{% extends 'layouts/admin.html' %}

{% block main %}
    <div class="admin-page-header">
        <div>
            <p class="eyebrow">Display Management</p>
            <h1 class="h2 mb-1">{{ display.name }}</h1>
            <p class="text-secondary mb-0">{{ display.location or 'No location assigned' }}</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn btn-outline-secondary" href="{{ url_for('admin_displays.list_displays') }}">Back</a>
            <a class="btn btn-outline-secondary" href="{{ url_for('display_player.show_display_player', display_id=display.id) }}" target="_blank" rel="noopener">Open player</a>
            <a class="btn btn-primary" href="{{ url_for('admin_displays.edit_display', display_id=display.id) }}">Edit display</a>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <section class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
                        <div>
                            <h2 class="h5 mb-1">Display Profile</h2>
                            <p class="text-secondary mb-0">Operational settings for this screen.</p>
                        </div>
                        <span class="badge display-status display-status-{{ display.status | lower }}">
                            {{ display_statuses[display.status] }}
                        </span>
                    </div>

                    <dl class="display-detail-grid">
                        <div>
                            <dt>Location</dt>
                            <dd>{{ display.location or 'Unassigned' }}</dd>
                        </div>
                        <div>
                            <dt>Resolution</dt>
                            <dd>{{ display.resolution_label }}</dd>
                        </div>
                        <div>
                            <dt>Orientation</dt>
                            <dd>{{ display_orientations[display.orientation] }}</dd>
                        </div>
                        <div>
                            <dt>Created</dt>
                            <dd>{{ display.created_at.strftime('%b %d, %Y') }}</dd>
                        </div>
                    </dl>

                    <hr>

                    <h2 class="h5">Notes</h2>
                    <p class="mb-0 text-secondary">{{ display.notes or 'No notes have been added for this display.' }}</p>
                </div>
            </section>
        </div>

        <div class="col-lg-4">
            <section class="card">
                <div class="card-body">
                    <h2 class="h5">Actions</h2>
                    <div class="d-grid gap-2">
                        <a class="btn btn-outline-secondary" href="{{ url_for('admin_displays.edit_display', display_id=display.id) }}">
                            Edit display
                        </a>
                        <a class="btn btn-outline-secondary" href="{{ url_for('display_player.show_display_player', display_id=display.id) }}" target="_blank" rel="noopener">
                            Open player
                        </a>
                        <form method="post"
                              action="{{ url_for('admin_displays.delete_display', display_id=display.id) }}"
                              onsubmit="return confirm('Delete this display?');">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-outline-danger w-100" type="submit">Delete display</button>
                        </form>
                    </div>
                </div>
            </section>

            <section class="card mt-3">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Player Access</h2>
                            <p class="mb-0 text-secondary">Pair and remotely disable this display client.</p>
                        </div>
                        {% if display.player_token_hash and display.player_token_enabled %}
                            <span class="badge text-bg-success">Enabled</span>
                        {% elif display.player_token_hash %}
                            <span class="badge text-bg-secondary">Disabled</span>
                        {% else %}
                            <span class="badge text-bg-warning">Not paired</span>
                        {% endif %}
                    </div>

                    {% if new_player_token is defined %}
                        <div class="alert alert-warning" role="alert">
                            <p class="fw-semibold mb-2">Copy this token now. It will not be shown again.</p>
                            <code class="player-token-value">{{ new_player_token }}</code>
                            <hr>
                            <p class="fw-semibold mb-2">Player URL</p>
                            <code class="player-token-url">{{ new_player_pairing_url }}</code>
                        </div>
                    {% endif %}

                    <dl class="display-detail-grid display-detail-grid-compact">
                        <div>
                            <dt>Created</dt>
                            <dd>
                                {% if display.player_token_created_at %}
                                    {{ display.player_token_created_at.strftime('%b %d, %Y %I:%M %p') }}
                                {% else %}
                                    Never
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt>Last paired</dt>
                            <dd>
                                {% if display.player_token_last_used_at %}
                                    {{ display.player_token_last_used_at.strftime('%b %d, %Y %I:%M %p') }}
                                {% else %}
                                    Never
                                {% endif %}
                            </dd>
                        </div>
                    </dl>

                    <div class="d-grid gap-2">
                        <form method="post" action="{{ url_for('admin_displays.rotate_display_player_token', display_id=display.id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-outline-primary w-100" type="submit">
                                {{ 'Rotate player token' if display.player_token_hash else 'Generate player token' }}
                            </button>
                        </form>
                        {% if display.player_token_hash and display.player_token_enabled %}
                            <form method="post"
                                  action="{{ url_for('admin_displays.disable_display_player_token', display_id=display.id) }}"
                                  onsubmit="return confirm('Disable this display client?');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button class="btn btn-outline-danger w-100" type="submit">Disable player access</button>
                            </form>
                        {% elif display.player_token_hash %}
                            <form method="post" action="{{ url_for('admin_displays.enable_display_player_token', display_id=display.id) }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button class="btn btn-outline-success w-100" type="submit">Enable player access</button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            </section>
        </div>
    </div>

    <section class="card mt-3">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                <div>
                    <h2 class="h5 mb-1">Assigned Media</h2>
                    <p class="mb-0 text-secondary">Media assets currently linked to this display.</p>
                </div>
                <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin_media.create_media') }}">Add media</a>
            </div>
            {% if display.media_assets %}
                <div class="table-responsive">
                    <table class="table align-middle mb-0 admin-table">
                        <thead>
                        <tr>
                            <th scope="col">Title</th>
                            <th scope="col">Type</th>
                            <th class="text-end" scope="col">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for media in display.media_assets %}
                            <tr>
                                <th scope="row">
                                    <a href="{{ url_for('admin_media.get_media_view', media_id=media.id) }}">{{ media.title }}</a>
                                </th>
                                <td>{{ media.media_type.title() }}</td>
                                <td class="text-end">
                                    <a class="btn btn-sm btn-outline-secondary"
                                       href="{{ url_for('admin_media.edit_media', media_id=media.id) }}">
                                        Edit
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="empty-state empty-state-sm">
                    <div>
                        <p class="mb-1 fw-semibold">No media assigned</p>
                        <p class="mb-0 text-secondary">Assign media from the media create or edit form.</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>
{% endblock %}