{% extends "admin/base_site.html" %}
{% load i18n %}

{% comment %}
Task list page for django-taskly.

Provides a status filter dropdown and a task-name search field.  Both
controls trigger an HTMX request to task_list_partial so only the table
body is swapped, keeping the filter bar and pagination in place.

Context variables
-----------------
tasks          Page   — paginated TaskSnapshot page object
status_filter  str    — currently active status filter value (may be empty)
search_query   str    — currently active search query (may be empty)
statuses       list   — TaskSnapshot.Status.choices list of (value, label) tuples
{% endcomment %}

{% block title %}{% trans "Task List" %} | {% trans "Django Taskly" %}{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
  <style>
    /* ------------------------------------------------------------------ */
    /* Filter bar                                                           */
    /* ------------------------------------------------------------------ */
    .taskly-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-bottom: 1.25rem;
      padding: 1rem;
      background: var(--darkened-bg, #f8f8f8);
      border: 1px solid var(--border-color, #ddd);
      border-radius: 6px;
    }

    .taskly-filter-group {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .taskly-filter-group label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--body-quiet-color, #666);
    }

    .taskly-filter-group select,
    .taskly-filter-group input[type="search"] {
      padding: 0.4rem 0.6rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 4px;
      font-size: 0.875rem;
      background: var(--body-bg, #fff);
      color: var(--body-fg, #333);
      min-width: 160px;
    }

    .taskly-filter-bar .taskly-btn {
      padding: 0.45rem 1rem;
      border: none;
      border-radius: 4px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
    }

    .taskly-btn--primary {
      background: var(--primary, #417690);
      color: #fff;
    }

    .taskly-btn--secondary {
      background: var(--darkened-bg, #e0e0e0);
      color: var(--body-fg, #333);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }

    /* ------------------------------------------------------------------ */
    /* Table                                                                */
    /* ------------------------------------------------------------------ */
    .taskly-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }

    .taskly-table th {
      text-align: left;
      padding: 0.5rem 0.75rem;
      background: var(--darkened-bg, #f8f8f8);
      border-bottom: 2px solid var(--border-color, #ddd);
      font-weight: 600;
      white-space: nowrap;
    }

    .taskly-table td {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--border-color, #eee);
      vertical-align: middle;
    }

    .taskly-table tr:last-child td {
      border-bottom: none;
    }

    .taskly-table tr:hover td {
      background: var(--selected-row, #f0f0f0);
    }

    .taskly-empty-state {
      text-align: center;
      padding: 2rem !important;
      color: var(--body-quiet-color, #888);
      font-style: italic;
    }

    /* ------------------------------------------------------------------ */
    /* Status badges                                                        */
    /* ------------------------------------------------------------------ */
    .taskly-badge {
      display: inline-block;
      padding: 0.15em 0.55em;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .taskly-badge--success { background: #e8f5e9; color: #2e7d32; }
    .taskly-badge--danger  { background: #ffebee; color: #c62828; }
    .taskly-badge--info    { background: #e3f2fd; color: #1565c0; }
    .taskly-badge--warning { background: #fff3e0; color: #e65100; }

    /* ------------------------------------------------------------------ */
    /* Misc                                                                 */
    /* ------------------------------------------------------------------ */
    .taskly-slow-indicator {
      color: #e65100;
      font-size: 0.65rem;
      vertical-align: middle;
    }

    .taskly-truncate {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ------------------------------------------------------------------ */
    /* Pagination                                                           */
    /* ------------------------------------------------------------------ */
    .taskly-pagination {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
      font-size: 0.875rem;
    }

    .taskly-pagination a,
    .taskly-pagination span {
      padding: 0.3rem 0.6rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 3px;
      text-decoration: none;
      color: var(--body-fg, #333);
    }

    .taskly-pagination .taskly-page-current {
      background: var(--primary, #417690);
      color: #fff;
      border-color: var(--primary, #417690);
      font-weight: 700;
    }

    .taskly-pagination .taskly-page-disabled {
      color: var(--body-quiet-color, #aaa);
      pointer-events: none;
    }

    .taskly-nav-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .taskly-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.45rem 1rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--darkened-bg, #f8f8f8);
      color: var(--body-fg, #333);
      text-decoration: none;
      transition: background 0.15s;
    }

    .taskly-btn:hover {
      background: var(--border-color, #ddd);
    }
  </style>
{% endblock %}

{% block content %}
  <div class="taskly-nav-bar">
    <a href="{% url 'django_taskly:dashboard' %}" class="taskly-btn">
      &larr; Dashboard
    </a>
  </div>

  <h1>{% trans "Task Snapshots" %}</h1>

  {# -------------------------------------------------------------------- #}
  {# Filter bar — form values drive HTMX requests                         #}
  {# -------------------------------------------------------------------- #}
  <form
    id="taskly-filter-form"
    method="get"
    action="{% url 'django_taskly:task_list' %}"
    hx-get="{% url 'django_taskly:task_list_partial' %}"
    hx-target="#taskly-task-tbody"
    hx-swap="innerHTML"
    hx-push-url="false"
    hx-trigger="change from:#taskly-status-select, search from:#taskly-search-input delay:400ms"
    hx-include="#taskly-filter-form"
  >
    <div class="taskly-filter-bar">

      <div class="taskly-filter-group">
        <label for="taskly-status-select">{% trans "Status" %}</label>
        <select id="taskly-status-select" name="status">
          <option value="">{% trans "All statuses" %}</option>
          {% for value, label in statuses %}
            <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
              {{ label }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="taskly-filter-group">
        <label for="taskly-search-input">{% trans "Task name" %}</label>
        <input
          id="taskly-search-input"
          type="search"
          name="q"
          value="{{ search_query }}"
          placeholder="{% trans 'Search…' %}"
          autocomplete="off"
        >
      </div>

      <button type="submit" class="taskly-btn taskly-btn--primary">
        {% trans "Filter" %}
      </button>

      {% if status_filter or search_query %}
        <a href="{% url 'django_taskly:task_list' %}" class="taskly-btn taskly-btn--secondary">
          {% trans "Clear" %}
        </a>
      {% endif %}

    </div>
  </form>

  {# -------------------------------------------------------------------- #}
  {# Task table — tbody is the HTMX swap target                           #}
  {# -------------------------------------------------------------------- #}
  <table class="taskly-table">
    <thead>
      <tr>
        <th>{% trans "Task Name" %}</th>
        <th>{% trans "Status" %}</th>
        <th>{% trans "Backend" %}</th>
        <th>{% trans "Duration" %}</th>
        <th>{% trans "Attempts" %}</th>
        <th>{% trans "Updated" %}</th>
      </tr>
    </thead>
    <tbody id="taskly-task-tbody">
      {% include "django_taskly/partials/task_table.html" %}
    </tbody>
  </table>

  {# -------------------------------------------------------------------- #}
  {# Pagination                                                            #}
  {# -------------------------------------------------------------------- #}
  {% if tasks.has_other_pages %}
    <nav class="taskly-pagination" aria-label="{% trans 'Pagination' %}">

      {% if tasks.has_previous %}
        <a href="?page={{ tasks.previous_page_number }}&status={{ status_filter }}&q={{ search_query }}">
          &laquo; {% trans "Prev" %}
        </a>
      {% else %}
        <span class="taskly-page-disabled">&laquo; {% trans "Prev" %}</span>
      {% endif %}

      {% for page_num in tasks.paginator.page_range %}
        {% if page_num == tasks.number %}
          <span class="taskly-page-current">{{ page_num }}</span>
        {% elif page_num >= tasks.number|add:"-3" and page_num <= tasks.number|add:"3" %}
          <a href="?page={{ page_num }}&status={{ status_filter }}&q={{ search_query }}">
            {{ page_num }}
          </a>
        {% endif %}
      {% endfor %}

      {% if tasks.has_next %}
        <a href="?page={{ tasks.next_page_number }}&status={{ status_filter }}&q={{ search_query }}">
          {% trans "Next" %} &raquo;
        </a>
      {% else %}
        <span class="taskly-page-disabled">{% trans "Next" %} &raquo;</span>
      {% endif %}

    </nav>
  {% endif %}
{% endblock %}