{% load i18n %}
{% load static %}
{% load basefilters %}
{% if messages %}
  <div class="oh-alert-container">
      {% for message in messages %}
      <div class="oh-alert oh-alert--animated {{message.tags}}">
            {{ message }}
      </div>
      {% endfor %}
  </div>
{% endif %}
{% include "filter_tags.html" %}
{% 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=card" 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=card" hx-target="#TimeSheetList" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:DodgerBlue"></span>
    {% trans "Completed" %}
  </span>
</div>
{% if time_sheets %}
  <div class="oh-layout--grid-3">
    {% for time_sheet in time_sheets %}
    <div  class="oh-kanban-card
                {% if time_sheet.status == 'in_Progress' %} in-progress-time-sheet
                {% else %} completed-time-sheet
                {% endif %}"
                style="color: inherit;text-decoration: none;">
      <a data-toggle="oh-modal-toggle"
      data-target="#TimeSheetModal"
      hx-get="{% url 'view-single-time-sheet' time_sheet.id %}"
      hx-target="#TimeSheetFormTarget"
      style="color: inherit;text-decoration: none; display: flex;">
      <div class="oh-kanban-card__avatar">
        <div class="oh-kanban-card__profile-container">
          <img
          src="{{time_sheet.employee_id.get_avatar}}"
          class="oh-kanban-card__profile-image"
          alt="Username"
          />
        </div>
      </div>

      <div class="oh-kanban-card__details">
        <span class="oh-kanban-card__title">{{time_sheet.employee_id}}</span>
        <span class="oh-kanban-card__subtitle">{{time_sheet.date}}</span><br>
        <span class="oh-kanban-card__subtitle"><b>{{time_sheet.project_id}}</b></span><br>
        <span class="oh-kanban-card__subtitle"><b>{{time_sheet.task_id}}</b> | </span>
        <span class="oh-kanban-card__subtitle">{% trans "Time Spent" %} : <b>{{time_sheet.time_spent}}</b></span>
      </div>
    </a>
      <div class="oh-kanban-card__dots">
        <div class="oh-dropdown" x-data="{show: false}">
          <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show">
            <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-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
            <ul class="oh-dropdown__items">
              <li class="oh-dropdown__item">
                <a hx-get="{% url 'update-time-sheet' time_sheet.id %}?view=card" hx-target="#TimeSheetFormTarget" class="oh-dropdown__link" data-toggle="oh-modal-toggle" data-target="#TimeSheetModal">{% trans "Edit" %}</a>

              </li>
              <li class="oh-dropdown__item">
                <form action="{% url 'delete-time-sheet' time_sheet.id %}?view=card" method="post" onsubmit="return confirm('{% trans "Do you want to delete this employee?" %}')">
                  {% csrf_token %}
                  <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</button>
                </form>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </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}}&view=card"
          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&view=card"
            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 }}&view=card"
            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 }}&view=card"
            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 }}&view=card"
            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 %}