{% extends "base.html" %}

{% block content %}
  <section class="panel table-panel" aria-labelledby="actions-title">
    <div class="panel-heading table-heading">
      <div>
        <p class="section-kicker">Exclusive date buckets</p>
        <h2 id="actions-title">Incomplete items</h2>
      </div>
      <span class="panel-count">{{ state.aggregate.open_actions }} total</span>
    </div>

    <div class="table-tools">
      <div class="filter-group" role="group" aria-label="Filter by due window">
        <button
          type="button"
          class="filter-chip is-active"
          data-bucket-filter="all"
          aria-pressed="true"
        >
          All
        </button>
        {% for bucket, label in bucket_labels.items() %}
          <button
            type="button"
            class="filter-chip"
            data-bucket-filter="{{ bucket.value }}"
            aria-pressed="false"
          >
            {{ label }}
            <span>{{ state.aggregate.date_buckets.get(bucket, 0) }}</span>
          </button>
        {% endfor %}
      </div>
      <label class="project-filter">
        <span>Project</span>
        <select data-project-filter>
          <option value="all">All projects</option>
          {% for project in projects %}
            <option value="{{ project.diagnostic.path }}">
              {{ project.diagnostic.title }}
            </option>
          {% endfor %}
        </select>
      </label>
    </div>

    {% if upcoming %}
      <div class="table-scroll">
        <table class="action-table" data-action-table>
          <thead>
            <tr>
              <th scope="col" data-sort-heading aria-sort="none">
                <button type="button" data-sort-table="title">Item</button>
              </th>
              <th scope="col">Project</th>
              <th scope="col" data-sort-heading aria-sort="none">
                <button type="button" data-sort-table="due">Due</button>
              </th>
              <th scope="col">Priority</th>
              <th scope="col">Location</th>
            </tr>
          </thead>
          <tbody>
            {% for item in upcoming %}
              <tr
                data-project="{{ item.figure.project_path }}"
                data-bucket="{{ item.bucket.value if item.bucket else 'invalid' }}"
                data-title="{{ item.figure.title | lower }}"
                data-due="{{ item.figure.due_date or '9999' }}"
              >
                <td>
                  <strong>{{ item.figure.title or "Untitled item" }}</strong>
                  {% if item.figure.tags %}
                    <span class="tag-line">
                      {% for tag in item.figure.tags[:2] %}
                        <span>{{ tag }}</span>
                      {% endfor %}
                    </span>
                  {% endif %}
                </td>
                <td>{{ item.figure.project_title }}</td>
                <td>
                  <span class="due-badge due-{{ item.bucket.value if item.bucket else 'invalid' }}">
                    {{ item.bucket_label }}
                  </span>
                  <small>{{ item.figure.due_date or "No date" }}</small>
                </td>
                <td>
                  {% if item.figure.priority %}
                    <span class="priority priority-{{ item.figure.priority }}">
                      P{{ item.figure.priority }}
                    </span>
                  {% else %}
                    <span class="muted-copy">None</span>
                  {% endif %}
                </td>
                <td>
                  <span>{{ item.figure.section_path or "—" }}</span>
                  <small>{{ item.figure.organizer_path or "" }}</small>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <p
        class="no-filter-results"
        data-no-filter-results
        role="status"
        aria-live="polite"
        hidden
      >
        No actions match these filters.
      </p>
    {% else %}
      <div class="empty-state empty-table">
        <span class="empty-mark" aria-hidden="true">◷</span>
        <div>
          <h3>No incomplete items</h3>
          <p>
            There are no tagged Curio figures below 100% progress in this
            scope. Dated and unscheduled items each appear in one window.
          </p>
        </div>
      </div>
    {% endif %}
  </section>
{% endblock %}