{% from "components.html" import column_header, footer_note, pill %}
<div class="card__header">
    <input type="hidden" id="secret-state" name="state" value="{{ state }}">
    <input class="search"
           id="secret-search"
           type="search"
           name="q"
           value="{{ query }}"
           placeholder="Search secret, policy or server…"
           aria-label="Search secrets"
           hx-get="/secrets"
           hx-include="#secret-state"
           hx-target="#secrets"
           hx-swap="outerHTML"
           hx-trigger="input changed delay:300ms"
           hx-push-url="true"
           hx-preserve="true">
    <div class="filters">
        {% for item in secret_filters %}
            <a class="filter{{ " filter--active" if item.key == state }}"
               href="{{ item.href(query) }}"
               hx-get="{{ item.href(query) }}"
               hx-target="#secrets"
               hx-swap="outerHTML"
               hx-push-url="true">{{ item.label }}</a>
        {% endfor %}
    </div>
</div>
<table class="table secrets-table">
    {{ column_header(secret_columns) }}
    <tbody>
        {% for secret in secrets %}
            <tr class="runs-table__row"
                tabindex="0"
                hx-get="/secrets/{{ secret.name }}"
                hx-target="#overlay"
                hx-trigger="click[!event.target.closest('.action')], keyup[key=='Enter'&&!event.target.closest('.action')]">
                <td>
                    <div class="runners-table__name{{ " secret__name--muted" if secret.muted }}">
                        <span class="dot tone-{{ secret.tone }}"></span>
                        <span>{{ secret.name }}</span>
                    </div>
                    <div class="table__id">{{ secret.short_id }}</div>
                </td>
                <td>
                    {{ pill(secret.pill, secret.pill_tone) }}
                    <div class="table__secondary">{{ secret.left }}</div>
                </td>
                <td>
                    <div class="run__mono">{{ secret.expires }}</div>
                    <div class="table__secondary">{{ secret.expires_note }}</div>
                </td>
                <td>
                    <div class="profile__tags">
                        {% for item in secret.tags %}
                            <span class="profile__tag{{ " profile__tag--off" if not item.set }}">{{ item.label }}</span>
                        {% endfor %}
                    </div>
                    <div class="table__secondary">{{ secret.used }}</div>
                </td>
                <td>
                    <div class="run__mono">{{ secret.rotated }}</div>
                    <div class="table__secondary">{{ secret.rotated_note }}</div>
                </td>
                <td>
                    <div>{{ secret.held }}</div>
                    <div class="table__secondary">{{ secret.held_note }}</div>
                </td>
                <td>
                    <a class="action"
                       href="/secrets/{{ secret.name }}/rotate"
                       hx-get="/secrets/{{ secret.name }}/rotate"
                       hx-target="#overlay">Rotate</a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td class="table__secondary" colspan="{{ secret_columns | length }}">no secret matches</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
{{ footer_note(secret_note) }}