{# select or count over the registry of every addressed server.

   The server is a column rather than a heading, because the point of the
   family is comparing two servers row by row: sorting on path puts the same
   entry of every server next to itself. #}
<div class="result-view d-flex flex-column h-100" data-title="{{ outcome.verb }} registry"
     data-icon-kind="{{ outcome.icon_kind }}" data-icon-id="{{ outcome.icon_id }}">
  <div class="result-toolbar d-flex align-items-center gap-2 px-2 py-1">
    <span class="badge text-bg-secondary text-uppercase">{{ t("registry.badge") }}</span>
    <span class="text-secondary small" aria-live="polite">
      {% if outcome.verb == "count" %}
        {{ t("results.hits") }}: {{ outcome.total }}
      {% else %}
        {{ t("results.rows", n=outcome.total) }}
        {% if outcome.truncated %}({{ t("results.rows_shown", n=outcome.rows|length) }}){% endif %}
      {% endif %}
    </span>
    {% if outcome.servers %}
      <span class="text-secondary small">
        {{ t("registry.servers", n=outcome.servers|length) }}: {{ outcome.servers|join(", ") }}
      </span>
    {% endif %}
  </div>

  {% for failure in outcome.errors %}
    <div class="alert alert-warning mx-2 mt-2 mb-0 py-2" role="alert">
      <i class="ph ph-warning" aria-hidden="true"></i>
      {{ t("registry.server_failed", server=failure.server, detail=failure.message) }}
    </div>
  {% endfor %}

  {% if outcome.verb == "count" %}
    <div class="p-3">
      <div class="count-total display-4 fw-semibold">{{ outcome.total }}</div>
      <div class="text-secondary">{{ t("results.hits") }}</div>
      {% if outcome.counts|length > 1 %}
        <ul class="list-unstyled mt-3 mb-0">
          {% for server, count in outcome.counts %}
            <li class="d-flex align-items-center gap-2 py-1">
              <i class="ph ph-hard-drives" aria-hidden="true"></i>
              <span class="flex-grow-1">{{ server }}</span>
              <span class="fw-semibold">{{ count }}</span>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% elif not outcome.rows %}
    <div class="result-empty text-center text-secondary py-5">
      <i class="ph ph-hard-drives fs-1 d-block mb-2" aria-hidden="true"></i>
      {{ t("results.empty") }}
    </div>
  {% else %}
    <div class="table-scroll">
      <table class="table table-sm table-hover result-table mb-0">
        <thead>
          <tr>
            <th class="col-actions"><span class="visually-hidden">{{ t("results.actions") }}</span></th>
            {% for column in outcome.columns %}<th>{{ t("registry.column." ~ column) }}</th>{% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in outcome.rows %}
            <tr>
              <td class="col-actions">
                {# Prefills a write for exactly this entry on exactly this
                   server. A masked value is never handed to the editor: the
                   statement would write the mask back over the secret. #}
                {% if row.writable %}
                  <button type="button" class="btn btn-sm btn-link p-0 open-statement"
                          data-statement="{{ row.edit_statement }}"
                          aria-label="{{ t('results.edit') }}" title="{{ t('results.edit') }}">
                    <i class="ph ph-pencil-simple" aria-hidden="true"></i>
                  </button>
                {% endif %}
              </td>
              {# host:port is the identity a condition and an on clause use;
                 the machine's own name rides along muted on the same line, so
                 the row stays one line high. #}
              <td class="text-nowrap">
                {{ row.server }}
                {% if row.computer %}<span class="text-secondary small">· {{ row.computer }}</span>{% endif %}
              </td>
              <td>{{ row.key }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.path }}</td>
              <td{% if row.secret %} class="text-secondary fst-italic"{% endif %}>{{ row.value }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</div>