{# One server's stored operations, and the line that counts them (spec §7.1).

   Returned on its own as the answer to a filter and to every review decision,
   which is why it is a template rather than a macro and why it starts at the
   element htmx replaces. Its context is ``operations``, ``operations_id``,
   ``operations_target`` and ``operations_form_id``, which is what
   ``routes_ui._operations_context`` builds.

   The filter controls are deliberately *outside* this region, as on the picker:
   swapping an input the operator is typing in would move the caret out from
   under them.

   The table is one form, and it is not this element. Every control in every row
   is bound to it by ``form="operations-form"`` — HTML's own way of saying that a
   control belongs to a form it is not inside — and the form element itself, with
   the one Save below it, lives out beside the filters. Not a form wrapped around
   the ``<table>``, because the last cell holds the review forms and a form inside
   a form is not HTML; and not inside this region, because this region is replaced
   on every filter and every decision (task 114).

   A hidden ``op_id`` per row is what says which rows were rendered. An unticked
   checkbox posts nothing at all, so without it a submission could not tell a row
   the operator unticked from a row that was never on the page — and every filter
   would be a bulk deselect.

   A filtered-out row is hidden rather than dropped, so that nothing an operator
   cannot see is quietly left out of the page they are working on. With one
   button that stops being a courtesy: it is what keeps the filter from
   unselecting what it hid. #}
{% from "partials/status_badge.html" import status_badge %}
{% from "partials/confirm.html" import confirm %}
<div id="{{ operations_id }}">
  {% if operations.alerts %}
  <ul class="flashes" role="alert">
    {% for alert in operations.alerts %}
    <li class="flash flash--error">{{ alert }}</li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if operations.review or operations.flagged %}
  {# Inside the swapped region on purpose: every decision below moves these
     counts, and one of them takes the flag off. A strip that lived in the page
     chrome would go on saying "3 new" after the third one was added. #}
  <div class="review">
    <p class="review__note">
      {% if operations.flagged %}
      {{ status_badge("attention", title="A refresh found changes nobody has reviewed yet.") }}
      {% endif %}
      {{ operations.review_note }}
    </p>
    <p class="review__counts">
      {% for count in operations.review %}
      {# A link rather than a badge: the number and the filter answer the same
         question, and an operator who reads "3 new" wants to see those three. #}
      <a class="badge badge--{{ count.status }}" href="{{ count.path }}">{{ count.summary }}</a>
      {% endfor %}
      {% if operations.filter.status %}
      <a class="badge badge--active" href="{{ operations.path }}">Show all</a>
      {% endif %}
    </p>
    {% if operations.flagged %}
    <form method="post" action="{{ operations.acknowledge_path }}"
          hx-post="{{ operations.acknowledge_path }}"
          hx-target="{{ operations_target }}"
          hx-swap="outerHTML">
      <button class="button" type="submit">Mark all reviewed</button>
    </form>
    {% endif %}
  </div>
  {% endif %}

  <p class="picker__summary" role="status">{{ operations.summary }}</p>

  <table class="table table--editable">
    <thead>
      <tr>
        <th scope="col" class="pick">
          {# Ships hidden and is unhidden by the script that wires it: it moves
             ticks in the page and writes nothing itself, so with no script it
             would be a box that does nothing, which is worse than an empty
             cell. Nothing is lost — the rows are still ticked one at a time,
             which is how this page has always worked (task 114). #}
          <input
            type="checkbox"
            id="tick-all"
            data-tick-all
            hidden
          />
          <label class="visually-hidden" for="tick-all">
            Expose every operation the filter is showing
          </label>
        </th>
        <th scope="col">Method</th>
        <th scope="col">Path</th>
        {# Not "Tool name". The column now prints the Tool prefix in front of
           every box in it, and two headings a card apart reading "Tool prefix"
           and "Tool name" describe two settings rather than one name built out
           of the other — which is what they are. The picker's column is headed
           the same way, for the same reason (tasks 115 and 116). #}
        <th scope="col">Name</th>
        <th scope="col"><span class="visually-hidden">Review</span></th>
      </tr>
    </thead>
    <tbody>
      {% for row in operations.rows %}
      <tr
        {% if not row.shown %}hidden{% endif %}
        class="{% if row.error %}row--invalid{% endif %}"
      >
        <td class="pick">
          {# Which row this is, for a submission that cannot otherwise tell. #}
          <input type="hidden" name="op_id" value="{{ row.id }}"
                 form="{{ operations_form_id }}" />
          <input
            type="checkbox"
            id="{{ row.pick_field }}"
            name="{{ row.pick_field }}"
            value="true"
            form="{{ operations_form_id }}"
            {% if row.ticked %}checked{% endif %}
          />
          <label class="visually-hidden" for="{{ row.pick_field }}">
            Expose {{ row.operation.op_key }} as a tool
          </label>
        </td>
        <td><code>{{ row.operation.method }}</code></td>
        <td>
          {# The badge the Status column used to hold, where the picker already
             puts a row's badges. The fact stays: the review strip's counts are
             links to ``?status=new`` and the selector above offers the same
             four, so a table that said nothing about a row's state would send
             an operator who followed "3 new" to three rows with no reason
             (task 114). #}
          <code>{{ row.operation.path }}</code>
          {% if row.badge %}{{ status_badge(row.badge) }}{% endif %}
          {# The override when there is one: it is the sentence the tool ships,
             and a page showing the spec's summary while the model is being told
             something else is a page describing somebody else's gateway. It is
             read-only here — the column that held it is gone, and the JSON API
             is where one is set (task 116). #}
          {% if row.note %}
          <span class="cell-note">{{ row.note }}</span>
          {% endif %}
        </td>
        <td>
          {# The server's prefix, printed rather than typed. It is a field in the
             Settings card on this same page and every name in this column is
             built out of it, so the box holds the half this row owns and the
             other half is shown as the fixed thing it is. Empty on a row whose
             stored name was never built on it, where the box holds all of the
             name — see ``OperationRow.prefixed`` (task 116). #}
          <span class="name-box">
            {% if row.lead %}<code class="name-lead">{{ row.lead }}</code>{% endif %}
            <input
              class="field__input"
              type="text"
              name="{{ row.name_field }}"
              form="{{ operations_form_id }}"
              value="{{ row.typed_stem }}"
              {# The generated default, shown the way the box shows a name, so
                 that clearing the box shows what clearing it means before the
                 operator does it. #}
              placeholder="{{ row.default_stem }}"
              aria-label="{{ row.name_label }}"
              autocomplete="off"
              spellcheck="false"
            />
          </span>
          {% if row.prefix_note %}
          <span class="cell-note">{{ row.prefix_note }}</span>
          {% endif %}
          {# Only when the box says something else, which is a save that was
             refused: otherwise the box or its placeholder is already the name,
             and repeating it under every row of two hundred says nothing. #}
          {% if row.typed_name and row.typed_name != row.operation.effective_tool_name %}
          <span class="cell-note">
            Still published as <code>{{ row.operation.effective_tool_name }}</code>
          </span>
          {% endif %}
          {% if row.error %}
          <span class="field__error" role="alert">{{ row.error }}</span>
          {% endif %}
        </td>
        <td class="row-actions">
          {# What spec §5.4 says can be done with this row, if it is waiting on
             a decision. A form each, and one request each: a decision is an
             answer to a question the gateway asked rather than an edit to the
             row, so it is not part of what the button below saves. A browser
             with no script reviews a server the same way — the answer is then
             the page rather than the table, and it lands back on the same
             filter.

             The column stays even when nothing here is flagged and every cell
             in it is empty: a table that grows a column when a refresh finds
             something and loses it when the last decision is settled is a table
             that jumps under the operator mid-review. #}
          {% for decision in row.decisions %}
          <form
            method="post"
            action="{{ operations.review_path(row) }}"
            hx-post="{{ operations.review_path(row) }}"
            hx-target="{{ operations_target }}"
            hx-swap="outerHTML"
          >
            <input type="hidden" name="decision" value="{{ decision.value }}" />
            <button class="button button--quiet" type="submit" title="{{ decision.hint }}">
              {{ decision.label }}
            </button>
          </form>
          {% endfor %}
          {% if row.deletable %}
          {{ confirm(
               operations.row_path(row),
               "Delete",
               row.delete_question,
               target=operations_target,
               swap="outerHTML") }}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
      {% if not operations.shown %}
      <tr>
        <td colspan="5">{{ operations.nothing_here }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
</div>