{# Left navigation for the Sharing tab: the settings entry plus one entry per
   paired device. Re-fetches itself when an action fires sharingDevicesChanged
   (pair / revoke / rename), so the list stays current without a page load. #}
<nav class="sidebar sharing-sidebar" id="sharing-sidebar"
     hx-get="{{ url_for('sharing_sidebar', selected=selected_key) }}"
     hx-trigger="sharingDevicesChanged from:body"
     hx-swap="outerHTML">
    <h2>{{ _("Sharing") }}</h2>
    <ul class="panel-nav">
        <li>
            <a href="{{ url_for('sharing_settings') }}"
               class="{% if selected_key == 'settings' %}active{% endif %}">
                {{ _("Settings & pairing") }}
            </a>
        </li>
    </ul>

    <h3>{{ _("Devices") }}</h3>
    {% if sharing.devices %}
    <ul class="panel-nav">
        {% for device in sharing.devices %}
        <li>
            <a href="{{ url_for('sharing_device', device_id=device.device_id) }}"
               class="{% if selected_key == device.device_id %}active{% endif %}">
                <span class="panel-nav-label">{{ device.display_name }}</span>
                {% if not device.trusted %}
                <span class="chip chip-danger">{{ _("Revoked") }}</span>
                {% elif device.presence == 'local' %}
                <span class="chip chip-accent">{{ _("Local") }}</span>
                {% elif device.presence == 'online' %}
                <span class="chip chip-success">{{ _("Online") }}</span>
                {% elif device.presence == 'offline' %}
                <span class="chip">{{ _("Offline") }}</span>
                {% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="no-data">{{ _("No paired devices yet") }}</p>
    {% endif %}

    <h3>{{ _("Shared With Others") }}</h3>
    {% if sharing.outbound_shares %}
    <ul class="panel-nav sharing-shares-nav">
        {% for share in sharing.outbound_shares %}
        <li class="sharing-share-nav-item">
            <span class="sharing-share-label">{{ share.device_name }} - {{ share.share_name }}</span>
            <button type="button"
                    class="chip chip-action chip-danger"
                    data-sharing-confirm="revoke"
                    data-confirm-title="{{ _('Revoke share?') }}"
                    data-confirm-message="{{ _('Revoke this share from %(device)s?', device=share.device_name) }}"
                    data-confirm-text="{{ _('Revoke') }}"
                    aria-label="{{ _('Revoke share from %(device)s', device=share.device_name) }}"
                    hx-post="{{ url_for('sharing_sidebar_grant_revoke', grant_id=share.grant_id, selected=selected_key) }}"
                    hx-target="#sharing-sidebar" hx-swap="outerHTML">
                {{ _("Revoke") }}
            </button>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="no-data">{{ _("No shares with other devices") }}</p>
    {% endif %}

    <div id="sharing-sidebar-shared-with-me"
         hx-get="{{ url_for('sharing_sidebar_shared_with_me', selected=selected_key) }}"
         hx-trigger="load"
         hx-swap="outerHTML">
        <h3>{{ _("Shared With Me") }}</h3>
        <p class="no-data">{{ _("Loading shared folders…") }}</p>
    </div>
</nav>