{% from "macros/local_datetime.html" import local_datetime %}
<div id="device-panel">
    <div class="sharing-panel">
        {% if not device.trusted %}
        <p class="known-device-meta">{{ _("This device no longer has access. Pair again to restore it.") }}</p>
        {% endif %}

        <div class="device-identity">
            <div class="device-identity-item">
                <label>{{ _("Device ID:") }}</label>
                <code class="device-id">{{ device.device_id }}</code>
            </div>
            <div class="device-identity-item">
                <label>{{ _("Paired:") }}</label>
                {% if device.paired_at %}
                    {{ local_datetime(device.paired_at, "known-device-meta") }}
                {% else %}
                    <span class="known-device-meta">{{ _("Unknown") }}</span>
                {% endif %}
            </div>
            <div class="device-identity-item">
                <label>{{ _("Last seen:") }}</label>
                {% if device.last_seen_at %}
                    {{ local_datetime(device.last_seen_at, "known-device-meta") }}
                {% else %}
                    <span class="known-device-meta">{{ _("Never") }}</span>
                {% endif %}
            </div>
        </div>

        <form class="device-rename-form"
              hx-post="{{ url_for('sharing_device_rename', device_id=device.device_id) }}"
              hx-target=".sharing-content" hx-swap="innerHTML">
            <label for="device-display-name">{{ _("Device Name") }}</label>
            <div class="device-rename-controls">
                <input type="text" id="device-display-name" name="display_name"
                       class="form-control"
                       value="{{ device.display_name }}" required
                       aria-label="{{ _('Device name') }}">
                <button type="submit" class="btn-secondary">{{ _("Rename") }}</button>
            </div>
        </form>
    </div>

    {# Shares granted to this device are listed (and revoked) in the sidebar's
       "Shared With Others"; this panel only adds new ones. #}
    <div class="sharing-panel">
        <h3>{{ _("Add Shared") }}</h3>
        {% if device.trusted %}
            {% if media_dirs %}
            <div class="share-grant-forms">
                <form class="share-grant-form"
                      hx-post="{{ url_for('sharing_device_grant', device_id=device.device_id) }}"
                      hx-target="#device-panel" hx-swap="outerHTML">
                    <label for="share-scope-type">{{ _("Share type") }}</label>
                    <div class="share-grant-controls share-grant-type-controls">
                        <select id="share-scope-type" name="scope_type" class="searchable-select"
                                data-search-disabled data-share-type-select>
                            <option value="media_dir" selected>{{ _("Media Directory") }}</option>
                            <option value="folder">{{ _("Folder") }}</option>
                            {% if albums %}<option value="album">{{ _("Album") }}</option>{% endif %}
                        </select>
                    </div>

                    <div class="share-grant-panel" data-share-type-panel="media_dir">
                        <label for="share-media-dir">{{ _("Media Directory") }}</label>
                        <div class="share-grant-controls">
                            <select id="share-media-dir" name="media_dir_id" class="searchable-select" required>
                                {% for media_dir in media_dirs %}
                                <option value="{{ media_dir.id }}">{{ media_dir.name }} - {{ media_dir.path }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="share-grant-panel" data-share-type-panel="folder" hidden>
                        <label for="share-folder-path">{{ _("Folder") }}</label>
                        <div class="file-browser-input-group share-grant-controls">
                            <input type="text"
                                   id="share-folder-path"
                                   name="folder_path"
                                   class="form-control file-browser-input"
                                   placeholder="{{ _('Choose a folder inside a media directory') }}"
                                   required
                                   disabled>
                            <button type="button" class="btn-secondary file-browser-btn" data-icon="folder" disabled>
                                {{ _("Browse…") }}
                            </button>
                        </div>
                    </div>

                    {# An album grant carries no media dir: its members are whatever is
                       in the album at request time, wherever they live. #}
                    <div class="share-grant-panel" data-share-type-panel="album" hidden>
                        <label for="share-album">{{ _("Album") }}</label>
                        <div class="share-grant-controls">
                            <select id="share-album" name="album_id" class="searchable-select" required disabled>
                                {% for album in albums %}
                                <option value="{{ album.id }}">{{ album.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="share-grant-actions">
                        <button type="submit" class="btn-secondary" data-icon="sharing">{{ _("Share") }}</button>
                    </div>
                </form>
            </div>
            {% else %}
            <p class="no-data">{{ _("Add a media directory in Settings before sharing folders with this device.") }}</p>
            {% endif %}
        {% else %}
        <p class="no-data">{{ _("This device is revoked. Pair it again before sharing folders with it.") }}</p>
        {% endif %}
    </div>
</div>