{# ABOUTME: Diff panel for the apply-candidate flow — current vs proposed metadata. #}
{# ABOUTME: Includes header, per-field rows, and Apply/Back-to-results/Cancel actions. #}
{% include "_book_subhead.html" %}
<section class="enrich-diff" aria-labelledby="enrich-diff-heading">
    <header class="enrich-diff-header">
        <h3 id="enrich-diff-heading">
            Apply candidate
            · <span class="enrich-diff-provider">{{ candidate.source }}</span>
            · <span class="enrich-diff-confidence">conf {{ "%.2f"|format(candidate.confidence) }}</span>
        </h3>
    </header>

    <table class="enrich-diff-table">
        <thead>
            <tr>
                <th scope="col" class="diff-apply-col">Apply</th>
                <th scope="col">Field</th>
                <th scope="col">Current</th>
                <th scope="col">Proposed</th>
            </tr>
        </thead>
        <tbody>
            {% for diff in diffs %}
                {% include "_field_diff_row.html" %}
            {% endfor %}
            {# Cover is an image, not a text field, so it gets a dedicated row
               rather than going through metadata_diff / _field_diff_row.html. #}
            <tr class="diff-row {{ 'diff-changed' if candidate.metadata.cover_url else 'diff-unchanged' }}">
                {% if candidate.metadata.cover_url %}
                <td class="diff-apply">
                    <label class="diff-apply-label">
                        <input type="checkbox" name="apply_fields" value="cover" form="enrich-apply-form" checked aria-label="Apply cover">
                    </label>
                </td>
                {% else %}
                <td class="diff-apply"></td>
                {% endif %}
                <th scope="row" class="diff-field">Cover</th>
                <td class="diff-current{{ ' changed' if candidate.metadata.cover_url else '' }}">
                    <img class="enrich-diff-cover"
                         src="{{ url_for('web.book_cover', book_id=book.id) }}"
                         alt="Current cover"
                         width="80"
                         height="120">
                </td>
                {% if candidate.metadata.cover_url %}
                <td class="diff-proposed changed">
                    <img class="enrich-diff-cover"
                         src="{{ candidate.metadata.cover_url }}"
                         alt="Proposed cover"
                         width="80"
                         height="120"
                         loading="lazy">
                </td>
                {% else %}
                <td class="diff-proposed muted"><span class="diff-same">same</span></td>
                {% endif %}
            </tr>
        </tbody>
    </table>

    {# Apply only writes fields that actually change AND aren't a skipped clear.
       The cover counts as one change whenever the candidate supplied one. #}
    {% set write_count = (diffs|selectattr('changed')|rejectattr('skip_clear')|list|length)
                         + (1 if candidate.metadata.cover_url else 0) %}
    {% set skip_clear_count = diffs|selectattr('skip_clear')|list|length %}

    <div class="enrich-diff-actions" role="group" aria-label="Diff actions">
        <form class="enrich-diff-apply"
              id="enrich-apply-form"
              method="post"
              action="{{ url_for('web.enrich_apply', book_id=book.id) }}"
              hx-post="{{ url_for('web.enrich_apply', book_id=book.id) }}"
              hx-swap="none">
            <input type="hidden" name="provider" value="{{ provider_name }}">
            <input type="hidden" name="isbn" value="{{ dispatch_isbn }}">
            <input type="hidden" name="url" value="{{ dispatch_url }}">
            <input type="hidden" name="title" value="{{ dispatch_title }}">
            <input type="hidden" name="author" value="{{ dispatch_author }}">
            <input type="hidden" name="candidate_id" value="{{ candidate_id }}">
            {# Carry the previewed candidate so Apply writes exactly this without
               re-querying the provider (#234); dispatch fields above back the
               re-fetch fallback when this payload is absent. #}
            <input type="hidden" name="candidate_payload" value="{{ candidate_payload }}">
            {# Sentinel distinguishing "user unchecked everything" from a
               legacy post with no selection support at all (#284). #}
            <input type="hidden" name="apply_fields_present" value="1">
            <button type="submit" class="btn btn-primary"{% if not write_count %} disabled{% endif %}>
                Apply{% if write_count %} ({{ write_count }} change{{ '' if write_count == 1 else 's' }}){% endif %}
            </button>
            <span id="apply-none-hint" class="enrich-diff-skip-summary"{% if write_count %} hidden{% endif %}>
                Select at least one field to apply.
            </span>
            {% if skip_clear_count %}
                <span class="enrich-diff-skip-summary">
                    {{ skip_clear_count }} field{{ '' if skip_clear_count == 1 else 's' }} kept — provider had no value
                </span>
            {% endif %}
        </form>

        <script>
        (function () {
            var form = document.getElementById('enrich-apply-form');
            if (!form) { return; }
            var button = form.querySelector('button[type=submit]');
            var hint = document.getElementById('apply-none-hint');
            var boxes = document.querySelectorAll('input[name="apply_fields"][form="enrich-apply-form"]');
            function sync() {
                var n = 0;
                boxes.forEach(function (box) { if (box.checked) { n += 1; } });
                button.disabled = n === 0;
                if (hint) { hint.hidden = n !== 0; }
                button.textContent = n === 0
                    ? 'Apply'
                    : 'Apply (' + n + ' change' + (n === 1 ? '' : 's') + ')';
            }
            boxes.forEach(function (box) { box.addEventListener('change', sync); });
            sync();
        })();
        </script>

        <button type="button"
                class="btn btn-secondary"
                hx-get="{{ url_for('web.enrich_form', book_id=book.id, isbn=dispatch_isbn or none, title=dispatch_title or none, author=dispatch_author or none) }}"
                hx-target="#book-content"
                hx-swap="innerHTML">Back to results</button>

        <button type="button"
                class="btn btn-muted"
                hx-get="{{ url_for('web.book_detail', book_id=book.id) }}"
                hx-target="#book-content"
                hx-swap="innerHTML">Cancel</button>
    </div>
</section>