{% load i18n %} {% load horillafilters %} {% load static %}
{% include "filter_tags.html" %}

{% if time_sheets %}
  <div class="oh-tabs__content oh-tabs__content--active" style="padding-top: 10px;">
    {% comment %} easy filters {% endcomment %}
    <div class="d-flex flex-row-reverse">
      <span class="m-3 draft" hx-get="{% url 'filter-time-sheet' %}?{{pd}}&status=in_progress&view=list" hx-target="#TimeSheetList" style="cursor: pointer">
        <span class="oh-dot oh-dot--small me-1" style="background-color:Orange"></span>
        {% trans "In progress" %}
      </span>
      <span class="m-3 draft" hx-get="{% url 'filter-time-sheet' %}?{{pd}}&status=completed&view=list" hx-target="#TimeSheetList" style="cursor: pointer">
        <span class="oh-dot oh-dot--small me-1" style="background-color:DodgerBlue"></span>
        {% trans "Completed" %}
      </span>
    </div>
    {% comment %} table of contents {% endcomment %}
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table oh-table--sortable">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr ">
            <div class="oh-sticky-table__th">
              <div class="d-flex">
                <div class="">
                  <input type="checkbox" class="oh-input oh-input__checkbox mt-1 mr-2 all-time-sheet" />
                </div>
                <div>{% trans "Employee" %}</div>
              </div>
            </div>
            {% comment %}
            <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
            {% endcomment %}
            <div class="oh-sticky-table__th">{% trans "Project" %}</div>
            <div class="oh-sticky-table__th">{% trans "Task" %}</div>
            <div class="oh-sticky-table__th">{% trans "Date" %}</div>
            <div class="oh-sticky-table__th">{% trans "Time Spent" %}</div>
            <div class="oh-sticky-table__th">{% trans "Status" %}</div>
            <div class="oh-sticky-table__th">{% trans "Description" %}</div>
            <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
          </div>
        </div>

        {% for time_sheet in time_sheets %}
        <div class="oh-sticky-table__tr ui-sortable-handle"
        data-toggle="oh-modal-toggle"
        data-target="#TimeSheetModal"
        hx-get="{% url 'view-single-time-sheet' time_sheet.id %}"
        hx-target="#TimeSheetFormTarget"
        >
          <div class="oh-sticky-table__sd {% if time_sheet.status == 'in_Progress' %} in-progress-time-sheet
                                          {% else %} completed-time-sheet
                                          {% endif %} ">
            <div class="d-flex">
              <div onclick="event.stopPropagation();">
                <input
                  type="checkbox"
                  id="{{time_sheet.id}}"
                  class="oh-input candidate-checkbox oh-input__checkbox mt-2 mr-2 all-time-sheet-row"
                />
              </div>
              <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                    <img
                      src="{{time_sheet.employee_id.get_avatar}}"
                      class="oh-kanban-card__profile-image"
                      alt="Username"
                    />
                </div>
                <span class="oh-profile__name oh-text--dark"
                  >{{time_sheet.employee_id.employee_first_name}}
                  {{time_sheet.employee_id.employee_last_name|default:""}}
                </span>
              </div>
            </div>
          </div>
          <div class="oh-sticky-table__td">{{time_sheet.project_id.title}}</div>
          <div class="oh-sticky-table__td">{{time_sheet.task_id}}</div>
          <div class="oh-sticky-table__td">{{time_sheet.date}}</div>
          <div class="oh-sticky-table__td">{{time_sheet.time_spent}}</div>
          <div class="oh-sticky-table__td">{{time_sheet.get_status_display}}</div>
          <div class="oh-sticky-table__td">{{time_sheet.description|truncatechars:15}}</div>
          <div class="oh-sticky-table__td" onclick="event.stopPropagation();">
            <div class="oh-btn-group " >
              <a
                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                data-toggle="oh-modal-toggle"
                data-target="#TimeSheetModal"
                hx-get="{% url 'update-time-sheet' time_sheet.id %}"
                hx-target="#TimeSheetFormTarget"

              >
                <ion-icon
                  name="create-outline"
                  role="img"
                  class="md hydrated"
                  style="color: blue"
                  aria-label="create outline"
                ></ion-icon>
              </a>
              <a
                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                href="{% url 'delete-time-sheet' time_sheet.id %}"
                onclick="event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this time sheet?' %}`)"
              >
                <ion-icon
                  name="trash-outline"
                  role="img"
                  class="md hydrated"
                  aria-label="trash outline"
                ></ion-icon>
              </a>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

<div class="oh-pagination">
  <span class="oh-pagination__page">
    {% trans "Page" %} {{ time_sheets.number }} {% trans "of" %} {{ time_sheets.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"
        name="page"
        class="oh-pagination__input"
        value="{{time_sheets.number}}"
        hx-get="{% url 'filter-time-sheet' %}?{{pd}}"
        hx-target="#TimeSheetList"
        min="1"
      />
      <span class="oh-pagination__label"
        >{% trans "of" %} {{time_sheet.paginator.num_pages}}</span
      >
    </div>
    <ul class="oh-pagination__items">
      {% if time_sheets.has_previous %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a
          hx-target="#TimeSheetList"
          hx-get="{% url 'filter-time-sheet' %}?{{pd}}&page=1"
          class="oh-pagination__link"
          >{% trans "First" %}</a
        >
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a
          hx-target="#TimeSheetList"
          hx-get="{% url 'filter-time-sheet' %}?{{pd}}&page={{ time_sheets.previous_page_number }}"
          class="oh-pagination__link"
          >{% trans "Previous" %}</a
        >
      </li>
      {% endif %} {% if time_sheets.has_next %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a
          hx-target="#TimeSheetList"
          hx-get="{% url 'filter-time-sheet' %}?{{pd}}&page={{ time_sheets.next_page_number }}"
          class="oh-pagination__link"
          >{% trans "Next" %}</a
        >
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a
          hx-target="#TimeSheetList"
          hx-get="{% url 'filter-time-sheet' %}?{{pd}}&page={{ time_sheets.paginator.num_pages }}"
          class="oh-pagination__link"
          >{% trans "Last" %}</a
        >
      </li>
      {% endif %}
    </ul>
  </nav>
</div>
{% else %}
  <div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
    <div style="" class="">
      <img style="display: block;width: 200px;margin: 10px auto ;" src="{% static 'images/ui/project/timesheet.png' %}" class="" alt="Page not found. 404."/>
      <h3 style="font-size:20px" class="oh-404__subtitle">{% trans "There are currently no available timesheets; please create a new one." %}</h3>
    </div>
  </div>
{% endif %}

<script src="{% static '/time_sheet/time_sheet_action.js' %}"></script>