{% extends "scitex_app/app_shell.html" %}
{% load static scitex_project_picker scitex_paths %}
{% comment %}
  project_board.html — the PROJECT-SCOPED board (Hub PR #923, section 5 "Cards":
  "current project, canonical picker, authorized cards only").

  SELECTORS: every control and every state carries a stable data-stx-* hook
  rather than a visible label. Hub PR #923 requires the video/docs pipeline to
  locate controls by stable attributes "not translated labels", so the labels
  below are free to move and translate without breaking a recording.

  THE PICKER IS THE SDK's. When the host registers a project provider,
  {% templatetag openblock %} scitex_project_picker {% templatetag closeblock %} renders the canonical selector and this page adds no second one. Only a
  STANDALONE mount (no host provider) falls back to the plain form below, which
  offers exactly the projects the viewer's own authorized cards name — the same
  set the provider would answer with, so the two can never disagree.

  STATES ARE DISTINCT ON PURPOSE: no-project, denied, unavailable, empty and
  filtered-empty each need a different action from the reader, and the HTTP
  status matches (403 denied, 503 unavailable). A single "nothing here" panel
  would make the reader guess which of the five they are looking at.
{% endcomment %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'scitex_cards/project_board.css' %}">
{% endblock %}

{% block scitex_app_content %}
<main class="stx-cards-project"
      data-stx-page="project-board"
      data-stx-state="{{ board.state }}"
      data-stx-project="{{ board.project|default:'' }}"
      data-stx-project-count="{{ board.projects|length }}">

  <header class="stx-cards-project__band">
    <h1 class="stx-cards-project__title" data-stx-leaf-title>SciTeX Cards</h1>
    <span class="stx-cards-project__ver" data-stx-leaf-version>v{{ scitex_cards_version }}</span>
    <span class="stx-cards-project__current" data-stx-current-project>
      {% if board.project %}
        Project <code>{{ board.project }}</code>
      {% else %}
        No project selected
      {% endif %}
    </span>
    <div class="stx-cards-project__picker" data-stx-picker>
      {% if host_picker_available %}
        {% scitex_project_picker scope="project" current=board.project %}
      {% elif board.projects %}
        <form method="get" action="{{ api_base|stx_path:"/projects" }}" data-stx-picker-form>
          <label class="stx-cards-project__current" for="stx-project-select">Project</label>
          <select id="stx-project-select" name="project" data-stx-picker-select>
            <option value="">Choose a project…</option>
            {% for project in board.projects %}
              <option value="{{ project }}" {% if project == board.project %}selected{% endif %}>{{ project }}</option>
            {% endfor %}
          </select>
          <button type="submit" data-stx-picker-apply>Open</button>
        </form>
      {% endif %}
    </div>
  </header>

  {% if board.state == "ready" or board.state == "filtered-empty" %}
  <form class="stx-cards-project__filters" method="get"
        action="{{ api_base|stx_path:"/projects" }}"
        data-stx-filters role="search">
    <input type="hidden" name="project" value="{{ board.project }}">
    <label class="stx-cards-project__current" for="stx-filter-q">Search</label>
    <input id="stx-filter-q" type="search" name="q" value="{{ board.filters.q }}"
           placeholder="Search titles…" data-stx-filter="q">
    <label class="stx-cards-project__current" for="stx-filter-status">Status</label>
    <select id="stx-filter-status" name="status" data-stx-filter="status">
      <option value="">Any status</option>
      {% for status in statuses %}
        <option value="{{ status }}" {% if status == board.filters.status %}selected{% endif %}>{{ status }}</option>
      {% endfor %}
    </select>
    <label class="stx-cards-project__current" for="stx-filter-assignee">Assignee</label>
    <input id="stx-filter-assignee" type="text" name="assignee" value="{{ board.filters.assignee }}"
           placeholder="Anyone" data-stx-filter="assignee">
    <button type="submit" data-stx-filter-apply>Apply</button>
    {% if board.filters_active %}
      <a class="stx-cards-project__clear"
         href="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}"
         data-stx-filter-clear>Clear filters</a>
    {% endif %}
  </form>
  {% endif %}

  <section class="stx-cards-project__body" aria-live="polite">

    {% if created_id %}
      <p class="stx-cards-project__created" data-stx-created="{{ created_id }}">
        Card created: <code>{{ created_id }}</code>
      </p>
    {% endif %}
    {% if updated_id %}
      <p class="stx-cards-project__created" data-stx-updated="{{ updated_id }}">
        Card updated: <code>{{ updated_id }}</code>
      </p>
    {% endif %}
    {% if create_error %}
      <p class="stx-cards-project__create-error" data-stx-create-error role="alert">
        {{ create_error }}
      </p>
    {% endif %}

    {% if board.state == "ready" or board.state == "empty" %}
      {% comment %}
        CREATE. Plain form controls, keyboard-first, no drag and nothing that
        needs JavaScript — "accessible non-drag alternatives" is the product
        requirement, and a server-rendered form satisfies it by construction
        rather than by adding an alternative beside a drag-only control.

        NO {% templatetag openblock %} csrf_token {% templatetag closeblock %} HERE ON PURPOSE, and it is a
        stated gap rather than an oversight: this app's settings install no
        CsrfViewMiddleware, so no cookie would ever be set and a token that
        cannot be validated would break the form outright. Writes on this board
        therefore inherit the same stance as the existing DM POST endpoints
        (csrf-exempt). Flagged to the package owner as a decision for the write
        surface rather than silently assumed safe; the page is loopback-only by
        default and behind the hub's auth + Cloudflare Access when exposed.
      {% endcomment %}
      <form class="stx-cards-project__create" method="post"
            action="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}"
            data-stx-create>
        <label for="stx-create-title">New card in {{ board.project }}</label>
        <input id="stx-create-title" type="text" name="title"
               maxlength="{{ create_title_max }}" required
               placeholder="What needs doing?" data-stx-create-title>
        <label for="stx-create-status">Status</label>
        <select id="stx-create-status" name="status" data-stx-create-status>
          {% for status in statuses %}
            <option value="{{ status }}" {% if status == create_default_status %}selected{% endif %}>{{ status }}</option>
          {% endfor %}
        </select>
        <label for="stx-create-blocker">Blocker</label>
        <select id="stx-create-blocker" name="blocker" data-stx-create-blocker>
          <option value="">— none (only needed for a blocked card) —</option>
          {% for blocker in blockers %}
            <option value="{{ blocker }}">{{ blocker }}</option>
          {% endfor %}
        </select>
        <label for="stx-create-assignee">Assignee</label>
        <input id="stx-create-assignee" type="text" name="assignee"
               placeholder="me ({{ board.principal }})" data-stx-create-assignee>
        <label for="stx-create-priority">Priority</label>
        <input id="stx-create-priority" type="text" name="priority" inputmode="numeric"
               size="3" placeholder="—" data-stx-create-priority>
        <button type="submit" data-stx-create-submit>Create card</button>
      </form>
    {% endif %}

    {% if board.state == "no-project" %}
      <div class="stx-cards-project__state" data-stx-state-block="no-project">
        <h2 class="stx-cards-project__state-title">Choose a project</h2>
        <p class="stx-cards-project__state-body">
          A project board shows the cards of one project. Pick one above to open it.
          {% if not board.projects %}
            You have no cards in any project yet, so there is nothing to pick.
          {% endif %}
        </p>
      </div>

    {% elif board.state == "denied" %}
      <div class="stx-cards-project__state" data-stx-state-block="denied">
        <h2 class="stx-cards-project__state-title">No access to this project</h2>
        <p class="stx-cards-project__state-body">
          This project is not one you can open, so no cards from it are shown.
          {% if board.projects %}Pick one of your own projects above.{% endif %}
        </p>
      </div>

    {% elif board.state == "unavailable" %}
      <div class="stx-cards-project__state" data-stx-state-block="unavailable">
        <h2 class="stx-cards-project__state-title">The card store could not be read</h2>
        <p class="stx-cards-project__state-body">
          This is a temporary failure between this page and the store — not a
          problem with your projects. Try again; if it keeps failing, the
          deployment's store needs attention.
        </p>
        <a class="stx-cards-project__retry" href="" data-stx-retry>Retry</a>
      </div>

    {% elif board.state == "empty" %}
      <div class="stx-cards-project__state" data-stx-state-block="empty">
        <h2 class="stx-cards-project__state-title">No cards in {{ board.project }}</h2>
        <p class="stx-cards-project__state-body">
          This project has no cards yet. Create the first one below.
        </p>
      </div>

    {% elif board.state == "filtered-empty" %}
      <div class="stx-cards-project__state" data-stx-state-block="filtered-empty">
        <h2 class="stx-cards-project__state-title">No cards match these filters</h2>
        <p class="stx-cards-project__state-body">
          {{ board.project }} has {{ board.project_total }} card{{ board.project_total|pluralize }},
          none of which match the filters above. The board is not empty — the filters are.
        </p>
        <a class="stx-cards-project__clear"
           href="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}"
           data-stx-filter-clear>Clear filters</a>
      </div>

    {% else %}
      <p class="stx-cards-project__count" data-stx-count
         data-stx-shown-from="{{ board.shown_from }}" data-stx-shown-to="{{ board.shown_to }}"
         data-stx-total="{{ board.total }}" data-stx-offset="{{ board.offset }}">
        showing {{ board.shown_from }}–{{ board.shown_to }} of {{ board.total }}
        card{{ board.total|pluralize }} in {{ board.project }}
      </p>
      {% if board.has_prev or board.has_next %}
        <nav class="stx-cards-project__pager" data-stx-pager aria-label="Board pages">
          {% if board.has_prev %}
            <a class="stx-cards-project__retry"
               href="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}&amp;q={{ board.filters.q|urlencode }}&amp;status={{ board.filters.status|urlencode }}&amp;assignee={{ board.filters.assignee|urlencode }}&amp;offset={{ board.offset|add:"-500" }}"
               data-stx-page-prev>Previous 500</a>
          {% endif %}
          {% if board.has_next %}
            <a class="stx-cards-project__retry"
               href="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}&amp;q={{ board.filters.q|urlencode }}&amp;status={{ board.filters.status|urlencode }}&amp;assignee={{ board.filters.assignee|urlencode }}&amp;offset={{ board.offset|add:"500" }}"
               data-stx-page-next>Next 500</a>
          {% endif %}
        </nav>
      {% endif %}
      {% for group in groups %}
        <section class="stx-cards-project__group" data-stx-group="{{ group.status|default:'other' }}">
          <h2 class="stx-cards-project__group-title">
            <span>{{ group.status|default:"other" }}</span>
            <span data-stx-group-count>{{ group.count }}</span>
          </h2>
          <ul class="stx-cards-project__cards">
            {% for row in group.rows %}
              <li class="stx-cards-project__card" data-stx-card="{{ row.id }}">
                <p class="stx-cards-project__card-title" data-stx-card-title>
                  <a href="{{ api_base|stx_path:"/projects" }}/{{ row.id }}?project={{ board.project|urlencode }}"
                     data-stx-card-open="{{ row.id }}">{{ row.title|default:row.id }}</a>
                </p>
                <p class="stx-cards-project__meta">
                  <span data-stx-card-status>{{ row.status|default:"—" }}</span>
                  <span>assignee <code>{{ row.assignee|default:"—" }}</code></span>
                  <span>priority {{ row.priority|default:"—" }}</span>
                  {% if row.blocker %}<span data-stx-card-blocker>gate {{ row.blocker }}</span>{% endif %}
                  <code data-stx-card-id>{{ row.id }}</code>
                </p>
                {% comment %}
                  ACT ON A CARD — status, assignee, archive. Plain form controls,
                  no drag, no JavaScript, keyboard-first: the product requires
                  "accessible non-drag alternatives", and a server-rendered form
                  satisfies it by construction rather than by bolting an
                  alternative beside a drag-only control.

                  The form carries the card id, and the SERVER refuses any id that
                  is not already in the rows this page rendered — so the tenancy
                  check does not depend on the client sending an honest id.
                {% endcomment %}
                <form class="stx-cards-project__card-actions" method="post"
                      action="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}"
                      data-stx-card-action="{{ row.id }}">
                  <input type="hidden" name="action" value="update">
                  <input type="hidden" name="card_id" value="{{ row.id }}">
                  <label for="stx-card-{{ row.id }}-status">Status</label>
                  <select id="stx-card-{{ row.id }}-status" name="status" data-stx-card-status-select>
                    {% for status in statuses %}
                      <option value="{{ status }}" {% if status == row.status %}selected{% endif %}>{{ status }}</option>
                    {% endfor %}
                  </select>
                  <label for="stx-card-{{ row.id }}-assignee">Assignee</label>
                  <input id="stx-card-{{ row.id }}-assignee" type="text" name="assignee"
                         value="{{ row.assignee|default:'' }}" data-stx-card-assignee>
                  <button type="submit" data-stx-card-submit>Update</button>
                </form>
                <form class="stx-cards-project__card-archive" method="post"
                      action="{{ api_base|stx_path:"/projects" }}?project={{ board.project|urlencode }}"
                      data-stx-card-archive="{{ row.id }}">
                  <input type="hidden" name="action" value="update">
                  <input type="hidden" name="card_id" value="{{ row.id }}">
                  <input type="hidden" name="status" value="{{ archive_status }}">
                  <button type="submit" data-stx-card-archive-submit>Archive</button>
                </form>
              </li>
            {% endfor %}
          </ul>
        </section>
      {% endfor %}
    {% endif %}

  </section>
</main>
{% endblock %}