{% load static i18n generic_template_filters %}
<div id="{{view_id|safe}}">
  <div
    class="oh-modal"
    id="bulkUpdateModal{{view_id|safe}}"
    role="dialog"
    aria-labelledby="bulkUpdateModal{{view_id|safe}}"
    aria-hidden="true"
  >
    <div class="oh-modal__dialog" id="bulkUpdateModalBody{{view_id|safe}}"></div>
  </div>

  {% include "generic/export_fields_modal.html" %}
  <script>
    if (!$(".HTV").length) {
      $("#reloadMessagesButton").click()
    }
  </script>
  <button class="reload-record" id="{{view_id|safe}}Reload" hidden hx-get="{{request.path}}?{{saved_filters.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML">
  </button>
  {% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
  {% if queryset|length %}
  {% if bulk_select_option %}
  {% include "generic/quick_actions.html" %}
  {% endif %}


  <div class="oh-table_sticky--wrapper">
    <div class="oh-sticky-dropdown--header" style="z-index:13;">
      <div class="oh-dropdown" x-data="{open: false}">
        <button class="oh-sticky-dropdown_btn" @click="open = !open">
          <ion-icon
            name="ellipsis-vertical-sharp"
            role="img"
            class="md hydrated"
            aria-label="ellipsis vertical sharp"
          ></ion-icon>
        </button>
        <div
          class="oh-dropdown__menu oh-sticky-table_dropdown"
          x-show="open"
          @click.outside="
            open = false
            $($el).closest('.oh-table_sticky--wrapper').parent().find('.reload-record').click();
          "
        >
          {{toggle_form.as_list}}
        </div>
      </div>
    </div>
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table oh-table--sortable" style="
        width: 100%;
        width: -moz-available;          /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        width: fill-available;
      ">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            {% if bulk_select_option %}
            <div
              class="oh-sticky-table__th"
              style="width: 10px; z-index: 12 !important"
            >
              <div class="centered-div" align="center">
                <input
                  type="checkbox"
                  class="oh-input oh-input__checkbox bulk-list-table-row"
                  onchange="
                  $(this).closest('.oh-sticky-table').find('.list-table-row').prop('checked',$(this).is(':checked')).change();
                  $(document).ready(function () {
                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
                    reloadSelectedCount($('.count_{{view_id|safe}}'));
                  });
                  "
                  title="Select All"
                />
              </div>
            </div>
            {% endif %} {% for cell in columns %}
            <div

              id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
              class="oh-sticky-table__th"
              style="z-index: 11;width:200px;">
              <div
              {% for sort_map in sortby_mapping %}
              {% if sort_map.0 == cell.0 %}
              hx-get="{{search_url}}?{{saved_filters.urlencode}}&{{sortby_key}}={{sort_map.1}}&filter_applied=on"
              hx-target="#{{view_id}}"
              class="
                {% if request.sort_order == "asc" and request.sort_key == sort_map.1 %}
                  arrow-up
                  {% elif request.sort_order == "desc" and request.sort_key == sort_map.1 %}
                  arrow-down
                  {% else %}
                  arrow-up-down
                {% endif %}
                "
              {% endif %}
              {% endfor %}

                style="width: 200px;"
              >
                {{cell.0}}
              </div>
            </div>
            {% endfor %} {% if options or option_method%}
            <div class="oh-sticky-table__th" >
              <div style="width: 200px;">
                {% trans "Options" %}
              </div>
            </div>
            {% endif %} {% if actions or action_method %}
            <div class="oh-sticky-table__th oh-sticky-table__right" style="z-index:12 !important;">
              <div style="width: 200px;">
                {% trans "Actions" %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
        <div class="oh-sticky-table__tbody">
          {% for instance in queryset %}
          <div
            class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
            draggable="true"
            data-instance-id="{{instance.id}}"
            {{row_attrs|format:instance|safe}}
          >
            {% if bulk_select_option %}
            <div
              class="oh-sticky-table__sd {{row_status_class|format:instance|safe}}"
              onclick="event.stopPropagation()"
              style="width: 10px; z-index: 11 !important"
            >
              <div class="centered-div" align="center">
                <input
                  type="checkbox"
                  class="oh-input oh-input__checkbox list-table-row"
                  data-view-id="{{view_id|safe}}"
                  onchange="
                  element = $(this)
                  highlightRow(element);
                  $(document).ready(function () {
                    if (!element.is(':checked')) {
                      removeId(element)
                    }
                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
                    reloadSelectedCount($('.count_{{view_id|safe}}'));
                  });
                  "
                  value = "{{instance.pk}}"
                />
              </div>
            </div>
            {% endif %} {% for cell in columns %}
            {% with attribute=cell.1 index=forloop.counter %} {% if not cell.2 %}
            <div
              data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
              class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
            >
              {{instance|getattribute:attribute|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
            </div>
            {% else %}
            <div
              data-header-id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header"
              class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %} t-body"
            >
              <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                  <img
                    src="{{instance|getattribute:cell.2}}"
                    class="oh-profile__image"
                  />
                </div>
                <span class="oh-profile__name oh-text--dark">
                  {{instance|getattribute:attribute}}
                </span>
              </div>
            </div>
            {% endif %} {% endwith %} {% endfor %} {% if options or option_method %}
            <div class="oh-sticky-table__td oh-permission-table--toggle">
              {% if not option_method %}
              <div class="oh-btn-group">
                {% for option in options %}
                  {% if option.accessibility|accessibility:instance %}
                  <a
                    href="#"
                    title="{{option.option|safe}}"
                    {{option.attrs|format:instance|safe}}
                  >
                    <ion-icon name="{{option.icon}}"></ion-icon>
                  </a>
                  {% endif %}
                {% endfor %}
              </div>
              {% else %} {{instance|getattribute:option_method|safe}} {% endif %}
            </div>
            {% endif %} {% if actions or action_method %}
            <div class="oh-sticky-table__td oh-sticky-table__right">
              {% if not action_method %}
              <div class="oh-btn-group">
                {% for action in actions %}
                  {% if action.accessibility|accessibility:instance %}
                  <a
                    title="{{action.action|safe}}"
                    {{action.attrs|format:instance|safe}}
                  >
                    <ion-icon name="{{action.icon}}"></ion-icon>
              </a>
                  {% endif %}
                {% endfor %}
              </div>
              {% else %} {{instance|getattribute:action_method|safe}} {% endif %}
            </div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% if queryset.paginator.count %}
  <div class="oh-pagination">
    <span
      class="oh-pagination__page"
      data-toggle="modal"
      data-target="#addEmployeeModal"
      >{% trans "Page" %} {{queryset.number}} {% trans "of" %}
      {{queryset.paginator.num_pages}}</span
    >

    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>

        <input
          type="number"
          class="oh-pagination__input"
          value="{{queryset.number}}"
          min="1"
          name="page"
          hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
          hx-swap="outerHTML"
          hx-target="#{{view_id|safe}}"
        />
        <span class="oh-pagination__label"
          >{% trans "of" %} {{queryset.paginator.num_pages}}</span
        >
      </div>

      <ul class="oh-pagination__items" data-search-url="{{search_url}}">
        {% if queryset.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page=1&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            class="oh-pagination__link"
            >{% trans "First" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            class="oh-pagination__link"
            >{% trans "Previous" %}</a
          >
        </li>
        {% endif %} {% if queryset.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            class="oh-pagination__link"
            >{% trans "Next" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            class="oh-pagination__link"
            >{% trans "Last" %}</a
          >
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  <script>
    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
    reloadSelectedCount($('.count_{{view_id|safe}}'));
    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
    var badge = $(`#badge-${tabId}`);
    var count = "{{queryset.paginator.count}}";
    var label = badge.attr("data-badge-label") || "";
    var title = count + " " + label;
    badge.html(count);
    badge.attr("title", title);
  </script>
  {% if bulk_select_option %}
  <script>
    selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
  </script>
  {% endif %}
  {% endif %}
  <script>
    $("ul[data-search-url] a").click(function (e) {
      e.preventDefault();
      const url =  $(this).attr("hx-get")
      const $urlObj = $('<a>', { href: url });
      const searchParams = new URLSearchParams($urlObj[0].search);

      let lastPageParam = null;
      let lastPageValue = 1;

      searchParams.forEach((value, param) => {
        if (param === "page") {
          lastPageParam = param;
          lastPageValue = value.split(",").pop();
        }
      });

      form = $(`form[hx-get="{{search_url}}"]`)
      pageInput = form.find("#pageInput")
      pageInput.attr("name",lastPageParam)
      pageInput.attr("value",lastPageValue)

    });
  </script>
  {% else %}
   {% if row_status_indications %}
    <div class="d-flex flex-row-reverse">
      {% for indication in row_status_indications %}
      <span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
        <span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
        {{indication.1}}
      </span>
      {% endfor %}
    </div>
    {% endif %}
  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
    <div align="center">
      <img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
      <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
      <p class="oh-404__subtitle">
        {% trans "No records found." %}
      </p>
    </div>
  </div>
  {% endif %}
</div>