{% from "components.html" import column_header, footer_note, pill %}
<div class="card__header">
    <input type="hidden" id="image-state" name="state" value="{{ state }}">
    <input class="search"
           id="image-search"
           type="search"
           name="q"
           value="{{ query }}"
           placeholder="Search id or sha256…"
           aria-label="Search images"
           hx-get="/images"
           hx-include="#image-state"
           hx-target="#images"
           hx-swap="outerHTML"
           hx-trigger="input changed delay:300ms"
           hx-push-url="true"
           hx-preserve="true">
    <div class="filters">
        {% for item in image_filters %}
            <a class="filter{{ " filter--active" if item.key == state }}"
               href="{{ item.href(query) }}"
               hx-get="{{ item.href(query) }}"
               hx-target="#images"
               hx-swap="outerHTML"
               hx-push-url="true">{{ item.label }}</a>
        {% endfor %}
    </div>
</div>
<table class="table images-table">
    {{ column_header(image_columns) }}
    <tbody>
        {% for image in images %}
            <tr class="runs-table__row"
                tabindex="0"
                hx-get="/images/{{ image.id }}"
                hx-target="#overlay"
                hx-trigger="click, keyup[key=='Enter']">
                <td>
                    <div class="runners-table__name">
                        <span class="dot tone-{{ image.tone }}"></span>
                        <span>{{ image.name }}</span>
                    </div>
                    {% if image.named %}<div class="table__id">{{ image.id }}</div>{% endif %}
                </td>
                <td>
                    <div class="run__mono">{{ image.version }}</div>
                    <div class="table__secondary">{{ image.built }}</div>
                </td>
                <td>
                    <div class="run__mono">{{ image.digest }}</div>
                    <div class="table__secondary">verified by the runner</div>
                </td>
                <td>
                    <div>{{ image.host }}</div>
                    <div class="table__id">{{ image.path }}</div>
                </td>
                <td>
                    <div>{{ image.registered }}</div>
                    <div class="table__secondary">{{ image.size }}</div>
                </td>
                <td>
                    {{ pill("IN USE" if image.in_use else "UNUSED", "green" if image.in_use else "grey") }}
                    <div class="table__secondary">{{ image.runs }}</div>
                </td>
            </tr>
        {% else %}
            <tr>
                <td class="table__secondary" colspan="{{ image_columns | length }}">no image matches</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
{{ footer_note(image_note) }}