{% load i18n %}
{% load static %}
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
        {{ message }}
        </div>
    </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 'task-all-filter' %}?{{pd}}&status=to_do&view=card" hx-target="#view-container" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
    {% trans "To Do" %}
  </span>
  <span class="m-3 draft" hx-get="{% url 'task-all-filter' %}?{{pd}}&status=in_progress&view=card" hx-target="#view-container" 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 'task-all-filter' %}?{{pd}}&status=completed&view=card" hx-target="#view-container" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:DodgerBlue"></span>
    {% trans "Completed" %}
  </span>
  <span class="m-3 draft" hx-get="{% url 'task-all-filter' %}?{{pd}}&status=expired&view=card" hx-target="#view-container" style="cursor: pointer">
    <span class="oh-dot oh-dot--small me-1" style="background-color:Tomato"></span>
    {% trans "Expired" %}
  </span>
</div>

{% if tasks %}
<div class="oh-layout--grid-3">
  {% for task in tasks %}
  <div  class="oh-kanban-card {% if task.status == 'to_do'%} to-do-task
                              {% elif task.status == 'in_progress' %} in-progress-task
                              {% elif task.status == 'completed' %} completed-task
                              {% else %} expired-task
                              {% endif %} "
                              style="color: inherit;text-decoration: none;">
    <a hx-get="{% url 'task-details' task.id %}" hx-target="#TaskDetailsTarget" data-toggle='oh-modal-toggle' data-target = '#TaskModal' style="color: inherit;text-decoration: none; display: flex; width:550px">

        <div class="oh-kanban-card__avatar">
            <div class="oh-kanban-card__profile-container">
              <img
              src="https://ui-avatars.com/api/?name={{task.title}}&background=random"
              class="oh-kanban-card__profile-image"
              alt="Username"
              />
            </div>
          </div>
    <div class="oh-kanban-card__details">
      <span class="oh-kanban-card__title">{{task.title}}</span>
      <span class="oh-kanban-card__subtitle">{% trans "Project Name" %}: {{task.project}}</span><br>
      <span class="oh-kanban-card__subtitle">{% trans "Stage Name" %} : {{task.stage}}</span><br/>
      <span class="oh-kanban-card__subtitle">{% trans "End Date" %} : {{task.end_date}}</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" title="Options" 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">
            {% if perms.recruitment.change_candidate %}
            <li class="oh-dropdown__item">
              <a hx-get="{% url 'update-task-all' task.id %}" hx-target='#TaskDetailsTarget' data-toggle = 'oh-modal-toggle' data-target="#TaskModal"  hx-swap='innerHTML' class="oh-dropdown__link">{% trans "Edit" %}</a>
            </li>
            {% endif %}
            <li class="oh-dropdown__item">
                {% if task.is_active %}
                    <a href="{% url 'task-all-archive' task.id %}" onclick="return confirm('{% trans 'Do you want to archive this task?' %}')" class="oh-dropdown__link">
                        {% trans "Archive" %}
                    </a>
                {% else %}
                    <a href="{% url 'task-all-archive' task.id %}" onclick="return confirm('{% trans 'Do you want to un archive this task?' %}')" class="oh-dropdown__link">
                    {% trans "Un-Archive" %}
                    </a>
                {% endif %}

            </li>
            {% if perms.recruitment.delete_candidate %}
            <li class="oh-dropdown__item">
              <form action="{% url 'delete-task' task.id  %}?task_all=true" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method="post">
                {% csrf_token %}
                <button  class="oh-dropdown__link oh-dropdown__link--danger  ">{% trans "Delete" %}</button>
              </form>

            </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="oh-pagination">
  <span
    class="oh-pagination__page"
    data-toggle="modal"
    data-target="#addEmployeeModal"
    >
    {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.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="{{data.number}}"
        hx-get="{% url 'search-candidate' %}?{{pd}}&view=card"
        hx-target="#section"
        min="1"
      />
      <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
    </div>

    <ul class="oh-pagination__items">
      {% if data.has_previous %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{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='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=card" class="oh-pagination__link">{% trans "Previous" %}</a>
      </li>
      {% endif %}
      {% if data.has_next %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.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='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.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/task.png' %}" class="" alt="Page not found. 404."/>
      <h3 style="font-size:20px" class="oh-404__subtitle">{% trans "There are currently no available tasks; please create a new one." %}</h3>
    </div>
  </div>
{% endif %}