{# The sharing settings body: a read-only status strip for this device (its ID
   and hub connection — context for pairing, not inputs to it) followed by the
   pairing panel itself. Both live under #devices-section so one swap refreshes
   the pair. #}
<div id="devices-section">
    {% if not sharing.available %}
    <div class="sharing-panel">
        <p class="no-data">{{ _("Device sharing is not running in this process. Start Yaffo with the full application (python -m yaffo) to enable it.") }}</p>
    </div>
    {% else %}

    {% set device_id_help = _('Shown so you can visually confirm it from another device during pairing.') %}
    <div class="sharing-panel device-status-strip">
        <div class="device-status-item">
            <span class="device-status-label">{{ _("This device") }}</span>
            <code class="device-id">{{ sharing.device_id }}</code>
            <button type="button" class="chip chip-action"
                    data-copy-text="{{ sharing.device_id }}"
                    data-copied-label="{{ _('Copied!') }}">{{ _("Copy") }}</button>
            <button type="button" class="help-tip" data-icon="info"
                    aria-label="{{ device_id_help }}" data-tooltip="{{ device_id_help }}"></button>
        </div>
        <div class="device-status-item">
            <span class="device-status-label">{{ _("Sharing hub") }}</span>
            {% if sharing.hub_connected %}
            <span class="chip chip-success">{{ _("Connected") }}</span>
            {% else %}
            <span class="chip">{{ _("Disconnected") }}</span>
            {% endif %}
            <code class="device-id">{{ sharing.hub_url }}</code>
        </div>
    </div>

    <div class="sharing-panel">
        <h3>{{ _("Pair a device") }}</h3>
        <div class="pairing-forms">
            <div class="pairing-form">
                {% set show_code_help = _('Pairing establishes trust between two of your devices, once. Generate a code here, then paste or scan it on the other device — both must be online at the same time.') %}
                <h3>
                    {{ _("Show a pairing code") }}
                    <button type="button" class="help-tip" data-icon="info"
                            aria-label="{{ show_code_help }}" data-tooltip="{{ show_code_help }}"></button>
                </h3>
                <p class="hint-text">{{ _("Generate a code here, then paste or scan it on the other device within 5 minutes.") }}</p>
                <button type="button" class="btn-primary"
                        hx-post="{{ url_for('sharing_pairing_code') }}"
                        hx-target="#pairing-code-box" hx-swap="innerHTML">{{ _("Generate pairing code") }}</button>
                <div id="pairing-code-box"></div>
            </div>

            <div class="pairing-form">
                <h3>{{ _("Enter a pairing code") }}</h3>
                <p class="hint-text">{{ _("Paste the code generated on your other device. Pairing can take up to a minute.") }}</p>
                <form class="accept-pairing-form"
                      hx-post="{{ url_for('sharing_pair') }}"
                      hx-target="#devices-section" hx-swap="outerHTML"
                      hx-disabled-elt="find button">
                    <textarea name="code" rows="3" required
                              placeholder="{{ _('Paste the pairing code here') }}"
                              aria-label="{{ _('Pairing code') }}"></textarea>
                    <button type="submit" class="btn-primary">
                        {{ _("Pair") }}
                        <span class="htmx-indicator pairing-busy">{{ _("Connecting…") }}</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    {% endif %}
</div>