<div class="row">
  <div class="col-md-12 mt-2">

    <div class="row">

      <!-- Role Filter -->
      <div class="col-md-3">

        <select id="roleFilter" class="form-control mt-1">
          <option value="">All Roles</option>

          <% for(role of roleData){ %>

            <% if(role.role_slug !=='admin' ){ %>

              <option value="<%= role.name %>">
                <%= role.name %>
              </option>

              <% } %>

                <% } %>

        </select>

      </div>

      <!-- Add Button -->
      <div class="col-md-3 offset-md-6">
        <%if(menuPermission?.create_status){%>
          <a href="/user/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">

            <i class="fas fa-plus"></i>
            Daten hinzufügen

          </a>
          <%}%>
      </div>

    </div>

    <div class="card card-info">

      <div class="card-header">

        <h3 class="card-title">
          <%= sectionTitle %>
        </h3>

      </div>

      <div class="card-body table-responsive">

        <table class="table table-hover table-head-fixed datatable">

          <thead>

            <tr>

              <th style="width:1%">#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Telefonnummer</th>
              <th>Role</th>
              <th>Status</th>
              <th data-orderable="false">
                Aktion
              </th>

            </tr>

          </thead>

          <tbody>

            <% let index=1; %>

              <% for(data of userData){ %>

                <% if(data.user_role !=1){ %>

                  <tr>

                    <td>
                      <%= index++ %>
                    </td>

                    <td>
                      <%= data.name %>
                    </td>

                    <td>
                      <%= data.email %>
                    </td>

                    <td>
                      <%= data.phone_number %>
                    </td>

                    <!-- Role -->

                    <td>
                      <%= data.role_name || 'N/A' %>
                    </td>

                    <!-- Status -->

                    <td>

                      <% if(data.status===1){ %>

                        <span class="badge badge-success">
                          Aktiv
                        </span>

                        <% } else { %>

                          <span class="badge badge-warning" style="font-size:12px">
                            InAktiv
                          </span>

                          <% } %>

                    </td>

                    <!-- Action -->

                    <td>
                      <%if(menuPermission?.read_status){%>
                        <a class="btn btn-info btn-sm mr-2" href="/user/details/<%= data.id %>" data-toggle="tooltip"
                          title="Details">

                          <i class="far fa-eye"></i>

                        </a>
                        <%}%>
                          <%if(menuPermission?.update_status){%>

                            <a class="btn btn-info btn-sm mr-2" href="/user/edit/<%= data.id %>" data-toggle="tooltip"
                              title="Edit">

                              <i class="fas fa-pencil-alt"></i>

                            </a>
                            <%}%>
                              <%if(menuPermission?.delete_status){%>
                                <a class="btn btn-danger btn-sm" id="delete_<%= data.id %>"
                                  onclick="deleteDataFunc('<%=data.id%>','user/delete/<%=data.id%>')"
                                  data-toggle="tooltip" title="Delete">

                                  <i class="fas fa-trash"></i>

                                </a>
                                <%}%>
                    </td>

                  </tr>

                  <% } %>

                    <% } %>

          </tbody>

        </table>

      </div>

    </div>

  </div>
</div>

<%- contentFor('pageModalSection') %>

  <%- contentFor('pageScriptsSection') %>

    <script>

      $(document).ready(function () {

        var table = $('.datatable').DataTable();

        // Role filter
        $('#roleFilter').on('change', function () {

          let selectedRole = $(this).val();

          table
            .column(4)
            .search(selectedRole)
            .draw();

        });

      });

    </script>