<div class="row">
  <div class="col-md-12 mt-2">
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <%if(menuPermission?.create_status){%>
          <a href="/manage-category/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">
            <i class="fas fa-plus"></i> Kategorie hinzufügen
          </a>
          <%}%>
      </div>
    </div>

    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%= page_title %>
        </h3>
      </div>

      <div class="card-body table-responsive">
        <table id="categoryTable" class="table table-hover table-head-fixed">
          <thead>
            <tr>
              <th>#</th>
              <th>Kategoriename</th>
              <th>Beschreibung</th>
              <th>Status</th>
              <th data-orderable="false">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <% if (categories.length> 0) { %>
              <% let index=((page - 1) * limit) + 1; %>
                <% categories.forEach(function(data) { %>
                  <tr>
                    <td>
                      <%= index++ %>
                    </td>
                    <td style="word-break: break-word; overflow-wrap: break-word; white-space: normal; max-width: 200px;">
                      <%= data.category_name %>
                    </td>
                    <td
                      style="word-break: break-word; overflow-wrap: break-word; white-space: normal; max-width: 200px;">
                      <%= data.category_description %>
                    </td>

                    <td>
                      <% if (data.status===1) { %>
                        <span class="badge bg-success">Aktiv</span>
                        <% } else { %>
                          <span class="badge bg-danger">Inaktiv</span>
                          <% } %>
                    </td>
                    <td>
                      <%if(menuPermission?.read_status){%>
                        <a class="btn btn-info btn-sm mr-2" href="/manage-category/details/<%= data.id %>"
                          data-toggle="tooltip" title="Details anzeigen">
                          <i class="far fa-eye"></i>
                        </a>
                        <%}%>
                          <%if(menuPermission?.update_status){%>
                            <a class="btn btn-primary btn-sm mr-2" href="/manage-category/edit/<%= data.id %>"
                              data-toggle="tooltip" title="Bearbeiten">
                              <i class="fas fa-pencil-alt"></i>
                            </a>
                            <%}%>

                              <%if(menuPermission?.delete_status){%>
                                <a class="btn btn-danger btn-sm"
                                  onclick="deleteDataFunc('<%= data.id %>', 'manage-category/delete/<%= data.id %>')"
                                  data-toggle="tooltip" title="Löschen">
                                  <i class="fas fa-trash"></i>
                                </a>
                                <%}%>
                    </td>
                  </tr>
                  <% }) %>
                    <% } else { %>
                      <tr>
                        <td colspan="5" class="text-center">Keine Daten gefunden</td>
                      </tr>
                      <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('#categoryTable')) {
      $('#categoryTable').DataTable({
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        language: {
          decimal: ",",
          thousands: ".",
          emptyTable: "Keine Daten in der Tabelle vorhanden",
          info: "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
          infoEmpty: "Keine Einträge verfügbar",
          infoFiltered: "(gefiltert von _MAX_ gesamten Einträgen)",
          infoPostFix: "",
          lengthMenu: "_MENU_ Einträge Zeige",
          loadingRecords: "Lade...",
          processing: "Verarbeite...",
          search: "Suche:",
          zeroRecords: "Keine passenden Einträge gefunden",
          paginate: {
            first: "Erste",
            last: "Letzte",
            next: "Nächste",
            previous: "Zurück"
          },
          aria: {
            sortAscending: ": aktivieren, um Spalte aufsteigend zu sortieren",
            sortDescending: ": aktivieren, um Spalte absteigend zu sortieren"
          }
        }
      });
    }
  });
</script>