{% extends "base.html" %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}

{# Outside the scan form, so the form's inherited hx-disabled-elt cannot reach
   it.  #checks-strip is deliberately not a live region: a health list that
   spoke on its own would talk over the scan.  #checks-body is the swap target;
   #checks-strip is the container that survives every swap. #}
<article id="checks-card">
    <h2>System status</h2>
    <div id="checks-strip">
        {% include "partials/checks.html" %}
    </div>
</article>

<article>
    <h2>Scan</h2>
    <noscript><p class="status-fallback">&#9888; {{ no_script_line }}</p></noscript>
    {# hx-disinherit is mandatory: hx-disabled-elt is inherited, so without it
       every select and refresh button in this form would disable Scan for its
       own round-trip.  method and action make a JavaScript-off submit a POST,
       which keeps the title out of the URL. #}
    <form hx-post="/api/scan"
          method="post" action="/api/scan"
          hx-target="#status-area"
          hx-swap="outerHTML"
          hx-disabled-elt="#scan-btn"
          hx-disinherit="hx-disabled-elt">

        {# The description swap is innerHTML, never outerHTML: the slot's id (the
           aria-describedby target), its live region and its adjacency to the
           select must survive.  The option value is the profile name, the wire
           contract POST /api/scan takes.  autocomplete is off because a browser
           that restores another profile on reload or Back fires no change, so
           the description, ticks and correspondent would stay on the old one. #}
        <label for="profile-select">Profile</label>
        <select name="profile" id="profile-select"
                autocomplete="off"
                aria-describedby="profile-description"
                hx-get="/api/profiles/description"
                hx-trigger="change"
                hx-target="#profile-description"
                hx-swap="innerHTML">
            {% for p in profiles %}
            <option value="{{ p.name }}"{% if p.name == selected %} selected{% endif %}>{{ p.label or p.name }}</option>
            {% endfor %}
        </select>
        <small id="profile-description" aria-live="polite">{{ selected_description }}</small>

        {# The partial names its own hx-target and hx-swap, so it does not inherit
           this form's status-area target. #}
        {% include "partials/multi_page_field.html" %}

        {# Each control's help is an adjacent <small> the control names in
           aria-describedby, so a screen reader reads it with the control. #}
        <label for="title-input">Title</label>
        <input type="text" name="title" id="title-input" maxlength="{{ title_max_length }}"
               aria-describedby="title-help"
               placeholder="Document title (auto-generated if empty)">
        <small id="title-help">What this document should be called in paperless-ngx.</small>

        {# The filter input belongs to tag-filter-form through its form attribute,
           so its text never rides with a scan and Enter filters instead of
           scanning.  input plus search, not keyup: a paste or dictation changes
           the value with no key, and the clear button fires search.  The
           hx-include is needed on a GET, where htmx gathers no form, and carries
           the current ticks so a filter or refresh never unticks anything.  The
           refresh button sits beside the legend, never inside it, because
           everything in a legend is part of the group's name.  Its swap targets
           the list, never the button, so focus stays on the button.  With the
           config key off the block is absent from the markup, not hidden by
           CSS. #}
        {% if show_tags %}
        <fieldset aria-describedby="tags-help">
            <legend>Tags</legend>
            <button type="button" id="tags-refresh"
                    hx-post="/api/cache/invalidate?resource=tags"
                    hx-target="#tags-list"
                    hx-swap="outerHTML"
                    hx-include="#tag-filter, #tags-list"
                    class="refresh-btn"
                    title="Refresh tags"
                    aria-label="Refresh tags">&#x21bb;<span class="sr-only">Refresh tags</span></button>

            <label for="tag-filter" class="sr-only">{{ tag_filter_label }}</label>
            <input type="search" id="tag-filter" name="q" form="tag-filter-form"
                   placeholder="Filter tags"
                   maxlength="{{ tag_filter_max_length }}"
                   aria-describedby="tag-filter-help"
                   hx-get="/api/tags" hx-target="#tags-list" hx-swap="outerHTML"
                   hx-trigger="input changed delay:300ms, search"
                   hx-include="#tags-list">
            <small id="tag-filter-help">Type to narrow the list. Ticked tags stay ticked.</small>

            {% include "partials/tags.html" %}
            {# The markers name no profile until the lazy list load answers: until
               then the lists hold no ticks, and a Scan released early must file
               the profile's defaults, not nothing. #}
            {% with marker_id = "tags-profile", marker_name = "tags_profile", marker_profile = lists_loading_marker %}{% include "partials/profile_marker.html" %}{% endwith %}
        </fieldset>
        <small id="tags-help">Labels to file this under in paperless-ngx. Optional.</small>
        {% endif %}

        {# The refresh button sits beside the label, never inside it: everything
           in a label is part of the select's name.  Its swap targets the
           select's options, never the button, so focus stays on the button.
           The refresh includes the current choice, so refreshing never changes
           it. #}
        {% if show_correspondent %}
        <div class="field-heading">
            <label for="correspondent-select">Correspondent</label>
            <button type="button" id="correspondents-refresh"
                    hx-post="/api/cache/invalidate?resource=correspondents"
                    hx-target="#correspondent-select"
                    hx-swap="innerHTML"
                    hx-include="#correspondent-select"
                    class="refresh-btn"
                    title="Refresh correspondents"
                    aria-label="Refresh correspondents">&#x21bb;<span class="sr-only">Refresh correspondents</span></button>
        </div>
        {% with help_elsewhere = true %}{% include "partials/correspondent_select.html" %}{% endwith %}
        {% include "partials/correspondent_help.html" %}
        {# After the help line, never between it and the select: the select
           has to stay the element directly before its help line. #}
        {% with marker_id = "correspondent-profile", marker_name = "correspondent_profile", marker_profile = lists_loading_marker %}{% include "partials/profile_marker.html" %}{% endwith %}
        {% endif %}

        {% include "partials/scan_button.html" %}
        {# Visible text directly after the button: a disabled button cannot be
           focused, so aria-describedby or a tooltip on it is never announced.
           Do not swap disabled for aria-disabled to keep it focusable; the
           server alone decides the real disabled state. #}
        {% if scan_blocked %}<small id="scan-blocked-reason" class="status-error">{{ scan_blocked_reason }}</small>{% endif %}
        {# The lazy list load empties this out of band, byte-empty so the :empty
           rule in app.css hides it.  app.css also hides it once the Scan button
           before it is enabled, because a status poll can release Scan first. #}
        {% if lists_loading and not scan_blocked %}<small id="scan-hold-reason">{{ scan_hold_reason }}</small>{% endif %}
    </form>

    {# Outside the scan form, so it inherits nothing from it.  every 20s
       retries a first request lost to htmx's timeout, which leaves the element
       in place and would otherwise hold Scan for good.  hx-sync this:replace
       aborts the answer for the previous profile, which would otherwise land
       after the profile-change swaps and restore that profile's ticks. #}
    {% if lists_loading %}
    <div id="metadata-loader" class="htmx-hidden" hx-get="/api/metadata" hx-include="#profile-select" hx-trigger="load, change from:#profile-select, every 20s" hx-sync="this:replace" hx-swap="outerHTML"></div>
    {% endif %}

    {# Fired by a list's hidden retry once the list can be loaded; each asks
       again carrying the form's current filter, ticks or choice.  hx-sync abort
       on the list's id drops a recovery while the profile-change refresh is in
       flight: landing first, it would take that refresh's swap target and leave
       the old profile's list under the new marker. #}
    {% if show_tags %}
    <div id="tags-recover" class="htmx-hidden" hx-get="/api/tags" hx-include="#tag-filter, #tags-list" hx-trigger="tags-recovered from:body" hx-target="#tags-list" hx-swap="outerHTML" hx-sync="#tags-list:abort"></div>
    {% endif %}
    {% if show_correspondent %}
    <div id="correspondents-recover" class="htmx-hidden" hx-get="/api/correspondents" hx-include="#correspondent-select" hx-trigger="correspondents-recovered from:body" hx-target="#correspondent-select" hx-swap="innerHTML" hx-sync="#correspondent-select:abort"></div>
    {% endif %}

    {# The filter input's own form, so its text never rides with a scan.  Adding
       hx-params to the scan form instead would be inherited by every control in
       it unless hx-disinherit listed it too. #}
    {% if show_tags %}
    <form id="tag-filter-form" class="htmx-hidden"
          hx-get="/api/tags" hx-target="#tags-list" hx-swap="outerHTML"
          hx-include="#tags-list"></form>
    {% endif %}
</article>

{# #status-live is never a swap target: a screen reader announces changes to
   a region already on the page, not one that arrives with the change.  Every
   status response swaps #status-area inside it, and #status-message stays its
   immediate previous sibling. #}
<div id="status-message" role="alert"></div>
<div id="status-live" role="status">
{% include "partials/status.html" %}
</div>

<article>
    <h2>Job History</h2>
    <div class="history-table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Profile</th>
                    <th>Title</th>
                    <th>Status</th>
                </tr>
            </thead>
            {% include "partials/history.html" %}
        </table>
    </div>
</article>

{% endblock %}