<!DOCTYPE html>
<html lang="es">
  <head>
    <%- include('../partials/head.ejs') %>

    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/jquery-resizable-columns@latest/dist/jquery.resizableColumns.css"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
    />
  </head>

  <body>
    <%- include('../partials/header.ejs') %>

    <main class="container mx-auto my-2 main">
      <section class="p-4">
        <table
          id="table"
          data-page-size="15"
          data-pagination="true"
          data-resizable="true"
          data-search="true"
          data-show-columns="true"
          data-show-export="true"
          data-show-fullscreen="true"
          data-show-pagination-switch="true"
          data-show-toggle="true"
          data-sticky-header="true"
          data-url="<%= path %>/json"
        >
          <thead>
            <tr>
              <% form.forEach((f) => { %>
              <th
                data-label="<%= f.fields.label %>"
                data-formatter="responseFormatter"
              ></th>
              <% }) %>
            </tr>
          </thead>
        </table>
      </section>
    </main>

    <%- include('../partials/footer.ejs') %>

    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://unpkg.com/tableexport.jquery.plugin@1.21.0/tableExport.min.js"></script>
    <script src="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>

    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-es-ES.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
    <script>
      $(function () {
        const url = $("#table").data("url");

        function initTable(columns) {
          $("#table").bootstrapTable({
            toggle: "table",
            locale: "es-ES",
            pagination: true,
            pageList: "[15, 25, 50, 100, all]",
            sidePagination: "client",
            columns,
            url,
            search: true,
            showRefresh: true,
            showExport: true,
          });
        }

        $(document).ready(function () {
          $.ajax({
            method: "GET",
            url,
            dataType: "json",
          }).done(function (data) {
            let columns = [];

            $.each(data[0], function (key, row) {
              columns.push({
                field: key,
                title: document.querySelectorAll("th")[key].dataset["label"],
                sortable: true,
              });
            });
            initTable(columns);
          });
        });
      });

      function responseFormatter(response) {
        return response.values.value;
      }
    </script>
  </body>
</html>
