{% extends "base.html" %}

{% block title %}{{ screen.name }} · Screens · LibreSignage{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('dashboard.static', filename='css/dashboard.css') }}">
{% endblock %}

{% block content %}
  <header class="page-header">
    <div>
      <a class="small text-decoration-none" href="{{ url_for('dashboard.screen_inventory') }}">← All screens</a>
      <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
        <h1 class="mb-0">{{ screen.name }}</h1>
        <span class="badge text-bg-{{ health_tone }}"><span class="status-dot"></span>{{ health_state|title }}</span>
        {% if screen.has_unpublished_changes or layout_assignment.has_unpublished_changes %}
          <span class="badge text-bg-warning">Staged changes</span>
        {% elif screen.published_revision %}
          <span class="badge text-bg-success">Published r{{ screen.published_revision }}</span>
        {% else %}
          <span class="badge text-bg-secondary">Not published</span>
        {% endif %}
      </div>
      <p class="text-body-secondary mb-0 mt-1">
        {{ profile.location or 'No location set' }} · <code>{{ screen.slug }}</code>
      </p>
    </div>
    <div class="page-header-actions">
      <a class="btn btn-outline-secondary" href="{{ url_for('dashboard.screen_preview', screen_id=screen.id) }}">Preview draft</a>
      <a class="btn btn-primary" href="{{ url_for('dashboard.screen_player', slug=screen.slug) }}{% if screen_token %}#token={{ screen_token }}{% endif %}">Open player</a>
    </div>
  </header>

  <nav class="screen-workspace-nav mb-4" aria-label="Screen sections">
    {% for tab_id, label in (
      ('overview', 'Overview'),
      ('playback', 'Playback'),
      ('settings', 'Settings'),
      ('access', 'Access & danger zone')
    ) %}
      <a class="nav-link{% if tab == tab_id %} active{% endif %}" href="{{ url_for('dashboard.screen_detail', screen_id=screen.id, tab=tab_id) }}"{% if tab == tab_id %} aria-current="page"{% endif %}>{{ label }}</a>
    {% endfor %}
  </nav>

  {% if tab == 'overview' %}
    <div class="row g-4">
      <div class="col-xl-8">
        <section class="card card-body mb-4" aria-labelledby="playback-summary-heading">
          <div class="section-heading">
            <div>
              <h2 class="h4 mb-1" id="playback-summary-heading">Playback status</h2>
              <p class="small text-body-secondary mb-0">What the player shows now and what will change next.</p>
            </div>
            <a class="btn btn-sm btn-outline-primary" href="{{ url_for('dashboard.screen_detail', screen_id=screen.id, tab='playback') }}">Manage playback</a>
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <div class="screen-status-panel h-100">
                <span class="small text-body-secondary d-block mb-1">Published now</span>
                <strong>
                  {% if not screen.published_revision %}Nothing published yet
                  {% elif layout_assignment.published_layout_id %}{{ layout_assignment.published_layout_name or 'Unknown layout' }} · Multi-zone layout
                  {% elif screen.published_use_schedules %}Scheduled channel
                  {% elif screen.published_playlist_id %}{{ screen.published_playlist_name or 'Unknown playlist' }} · Direct playlist
                  {% else %}Nothing assigned{% endif %}
                </strong>
                {% if screen.published_revision %}<span class="small text-body-secondary d-block mt-1">Revision {{ screen.published_revision }}</span>{% endif %}
              </div>
            </div>
            <div class="col-md-6">
              <div class="screen-status-panel h-100">
                <span class="small text-body-secondary d-block mb-1">Staged next</span>
                <strong>
                  {% if layout_assignment.draft_layout_id %}{{ layout_assignment.draft_layout_name or 'Unknown layout' }} · Multi-zone layout
                  {% elif screen.draft_use_schedules %}Scheduled channel
                  {% elif screen.draft_playlist_id %}{{ screen.draft_playlist_name or 'Unknown playlist' }} · Direct playlist
                  {% else %}Nothing assigned{% endif %}
                </strong>
                <span class="small text-body-secondary d-block mt-1">
                  {% if screen.has_unpublished_changes or layout_assignment.has_unpublished_changes %}Waiting to be published{% else %}Matches the published assignment{% endif %}
                </span>
              </div>
            </div>
          </div>
        </section>

        <section class="card card-body" aria-labelledby="device-health-heading">
          <h2 class="h4" id="device-health-heading">Device health</h2>
          <div class="row g-3">
            <div class="col-sm-6"><span class="small text-body-secondary d-block">Last contact</span><strong>{% if screen.last_seen_at %}<time data-relative-time datetime="{{ screen.last_seen_at|iso_utc }}">{{ screen.last_seen_at|utc_label }}</time>{% else %}Never connected{% endif %}</strong></div>
            <div class="col-sm-6"><span class="small text-body-secondary d-block">Offline readiness</span><strong>{% if health_report and health_report.cache_ready %}Ready{% else %}Not ready{% endif %}</strong></div>
            <div class="col-sm-6"><span class="small text-body-secondary d-block">Service worker</span><strong>{% if health_report and health_report.service_worker_active %}Active{% else %}Inactive{% endif %}</strong></div>
            <div class="col-sm-6"><span class="small text-body-secondary d-block">Display</span><strong>{{ profile.resolution_label }} · {{ profile.orientation }}</strong></div>
          </div>
          {% if health_report and health_report.last_error %}<div class="alert alert-danger mt-3 mb-0" role="alert">{{ health_report.last_error }}</div>{% endif %}
          {% if health_report and health_report.last_content_title %}<p class="small text-body-secondary mt-3 mb-0">Last played: {{ health_report.last_content_title }}</p>{% endif %}
        </section>
      </div>

      <aside class="col-xl-4">
        {% if g.user.role == 'admin' %}
          <section class="card card-body mb-4" aria-labelledby="quick-actions-heading">
            <h2 class="h5" id="quick-actions-heading">Player actions</h2>
            <div class="d-grid gap-2">
              {% for action, label in (('sync', 'Sync now'), ('reload', 'Restart player'), ('clear_cache', 'Clear offline cache')) %}
                <form method="post" action="{{ url_for('dashboard.queue_remote_command', screen_id=screen.id) }}"{% if action == 'clear_cache' %} data-confirm="Clear the offline cache on “{{ screen.name }}”? The player cannot play offline until it re-syncs."{% endif %}>
                  <input name="action" type="hidden" value="{{ action }}"><input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="overview">
                  <button class="btn btn-outline-secondary w-100" type="submit">{{ label }}</button>
                </form>
              {% endfor %}
              {% if native_agent %}
                <form method="post" action="{{ url_for('dashboard.queue_remote_command', screen_id=screen.id) }}" data-confirm="Reboot the operating system on “{{ screen.name }}”? The screen stays dark until it comes back up.">
                  <input name="action" type="hidden" value="reboot_os"><input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="overview">
                  <button class="btn btn-outline-danger w-100" type="submit">Reboot operating system</button>
                </form>
              {% endif %}
            </div>
          </section>
        {% endif %}
        <section class="card card-body">
          <h2 class="h5">Recent commands</h2>
          <div class="vstack gap-2">
            {% for command in commands[:5] %}<div class="d-flex justify-content-between gap-2"><span>{{ command.action|replace('_', ' ')|title }}</span><span class="badge text-bg-secondary">{{ command.status }}</span></div>{% else %}<p class="small text-body-secondary mb-0">No commands have been sent.</p>{% endfor %}
          </div>
        </section>
      </aside>
    </div>

  {% elif tab == 'playback' %}
    <div class="row g-4">
      <div class="col-lg-8">
        <form method="post" action="{{ url_for('dashboard.assign_screen', screen_id=screen.id) }}" class="card card-body">
          <input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="playback">
          <h2 class="h4">Stage playback assignment</h2>
          <p class="text-body-secondary">Choose what this screen should play next. Players do not change until an authorized user publishes the staged revision.</p>
          <div class="row g-3 align-items-end">
            <div class="col-md-5">
              <label class="form-label" for="mode-{{ screen.id }}">Playback source</label>
              <select class="form-select" id="mode-{{ screen.id }}" name="mode" data-screen-mode {% if g.user.role == 'viewer' %}disabled{% endif %}>
                <option value="schedule"{% if screen.draft_use_schedules and not layout_assignment.draft_layout_id %} selected{% endif %}>Scheduled channel</option>
                <option value="playlist"{% if not screen.draft_use_schedules and not layout_assignment.draft_layout_id %} selected{% endif %}>Direct playlist</option>
                <option value="layout"{% if layout_assignment.draft_layout_id %} selected{% endif %}>Multi-zone layout</option>
              </select>
            </div>
            <div class="col-md-7" data-playlist-field>
              <label class="form-label" for="playlist-{{ screen.id }}">Playlist</label>
              <select class="form-select" id="playlist-{{ screen.id }}" name="playlist_id"><option value="">Choose a playlist</option>{% for playlist in playlists %}<option value="{{ playlist.id }}"{% if screen.draft_playlist_id == playlist.id %} selected{% endif %}>{{ playlist.name }}</option>{% endfor %}</select>
            </div>
            <div class="col-md-7" data-layout-field>
              <label class="form-label" for="layout-{{ screen.id }}">Layout</label>
              <select class="form-select" id="layout-{{ screen.id }}" name="layout_id"><option value="">Choose a layout</option>{% for layout in layouts %}<option value="{{ layout.id }}"{% if layout_assignment.draft_layout_id == layout.id %} selected{% endif %}>{{ layout.name }}</option>{% endfor %}</select>
            </div>
            {% if g.user.role != 'viewer' %}<div class="col-12"><button class="btn btn-primary" type="submit">Stage assignment</button></div>{% endif %}
          </div>
        </form>
      </div>
      <aside class="col-lg-4"><div class="card card-body"><h2 class="h5">How publishing works</h2><ol class="small text-body-secondary mb-0 ps-3"><li class="mb-2">Stage an assignment here.</li><li class="mb-2">Preview the draft if needed.</li><li>Publish from the Dashboard or Screens page when it is ready.</li></ol></div></aside>
    </div>

  {% elif tab == 'settings' %}
    {% if g.user.role == 'admin' %}
      <form method="post" action="{{ url_for('dashboard.update_inventory', screen_id=screen.id) }}" class="card card-body">
        <input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="settings">
        <div class="section-heading"><div><h2 class="h4 mb-1">Screen settings</h2><p class="small text-body-secondary mb-0">Identity, placement, display profile, and venue playback policy.</p></div><button class="btn btn-primary d-none d-md-inline-flex" type="submit">Save settings</button></div>
        <div class="row g-3">
          <div class="col-md-6"><label class="form-label" for="name-{{ screen.id }}">Name</label><input class="form-control" id="name-{{ screen.id }}" name="name" value="{{ screen.name }}" required></div>
          <div class="col-md-6"><label class="form-label" for="location-{{ screen.id }}">Location</label><input class="form-control" id="location-{{ screen.id }}" name="location" value="{{ profile.location }}" placeholder="Building A · Lobby"></div>
          <div class="col-12"><label class="form-label" for="notes-{{ screen.id }}">Notes</label><textarea class="form-control" id="notes-{{ screen.id }}" name="notes" rows="3">{{ profile.notes }}</textarea></div>
          <fieldset class="col-12"><legend class="h5 mt-3">Display profile</legend><div class="row g-3" data-display-profile>
            <div class="col-lg-4"><label class="form-label" for="preset-{{ screen.id }}">Common resolution</label><select class="form-select" id="preset-{{ screen.id }}" data-resolution-preset><option value="">Custom</option>{% for width, height, label in [(1920,1080,'Full HD landscape'),(1080,1920,'Full HD portrait'),(3840,2160,'4K landscape'),(2160,3840,'4K portrait'),(1280,720,'HD landscape')] %}<option value="{{ width }}x{{ height }}"{% if profile.resolution_width == width and profile.resolution_height == height %} selected{% endif %}>{{ label }} · {{ width }} × {{ height }}</option>{% endfor %}</select></div>
            <div class="col-6 col-lg-2"><label class="form-label" for="width-{{ screen.id }}">Width</label><input class="form-control" id="width-{{ screen.id }}" name="resolution_width" type="number" min="320" max="7680" value="{{ profile.resolution_width }}" data-resolution-width required></div>
            <div class="col-6 col-lg-2"><label class="form-label" for="height-{{ screen.id }}">Height</label><input class="form-control" id="height-{{ screen.id }}" name="resolution_height" type="number" min="320" max="7680" value="{{ profile.resolution_height }}" data-resolution-height required></div>
            <div class="col-md-6 col-lg-4"><label class="form-label" for="scaling-{{ screen.id }}">Media scaling</label><select class="form-select" id="scaling-{{ screen.id }}" name="scaling_mode"><option value="contain"{% if profile.scaling_mode == 'contain' %} selected{% endif %}>Fit with letterboxing</option><option value="cover"{% if profile.scaling_mode == 'cover' %} selected{% endif %}>Fill and crop</option><option value="stretch"{% if profile.scaling_mode == 'stretch' %} selected{% endif %}>Stretch to fill</option></select></div>
            <div class="col-md-6"><label class="form-label" for="audio-{{ screen.id }}">Audio policy</label><select class="form-select" id="audio-{{ screen.id }}" name="audio_policy"><option value="muted"{% if profile.audio_policy == 'muted' %} selected{% endif %}>Muted (recommended)</option><option value="enabled"{% if profile.audio_policy == 'enabled' %} selected{% endif %}>Allow audible playback</option></select></div>
          </div></fieldset>
          <fieldset class="col-12"><legend class="h5 mt-3">Groups</legend><div class="d-flex flex-wrap gap-3">{% for group in groups %}<div class="form-check"><input class="form-check-input" id="screen-{{ screen.id }}-group-{{ group.id }}" name="group_ids" type="checkbox" value="{{ group.id }}"{% if group.id in profile.group_ids %} checked{% endif %}><label class="form-check-label" for="screen-{{ screen.id }}-group-{{ group.id }}">{{ group.name }}</label></div>{% else %}<span class="text-body-secondary">No groups are available.</span>{% endfor %}</div></fieldset>
          <div class="col-12 d-md-none"><button class="btn btn-primary w-100" type="submit">Save settings</button></div>
        </div>
      </form>
    {% else %}
      <div class="card card-body"><h2 class="h4">Screen settings</h2><p class="text-body-secondary">Only administrators can change device settings.</p><dl class="row mb-0"><dt class="col-sm-4">Location</dt><dd class="col-sm-8">{{ profile.location or 'Not set' }}</dd><dt class="col-sm-4">Display</dt><dd class="col-sm-8">{{ profile.resolution_label }} · {{ profile.orientation }}</dd><dt class="col-sm-4">Scaling</dt><dd class="col-sm-8">{{ profile.scaling_mode|title }}</dd><dt class="col-sm-4">Audio</dt><dd class="col-sm-8">{{ profile.audio_policy|title }}</dd></dl></div>
    {% endif %}

  {% elif tab == 'access' %}
    {% if g.user.role == 'admin' %}
      <div class="row g-4">
        <div class="col-xl-8">
          <section class="card card-body mb-4"><h2 class="h4">Authenticated client setup</h2><p class="text-body-secondary">Run this command on the display device. Treat its credential like a password.</p><code class="d-block text-wrap user-select-all screen-status-panel">libresignage-client configure --server-url {{ server_url }} --screen-slug {{ screen.slug }} --screen-token {{ screen_token }}</code><form class="mt-3" method="post" action="{{ url_for('dashboard.rotate_screen_credential', screen_id=screen.id) }}" data-confirm="Rotate the credential for “{{ screen.name }}”? The current token stops working immediately."><input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="access"><button class="btn btn-outline-warning" type="submit">Rotate credential</button></form></section>
          <section class="card card-body app-danger-zone"><h2 class="h4 text-danger">Danger zone</h2><p class="text-body-secondary">Removing this screen permanently invalidates its player URL and cannot be undone.</p><form method="post" action="{{ url_for('dashboard.remove_screen', screen_id=screen.id) }}" data-confirm="Remove “{{ screen.name }}” permanently? Its player URL stops working immediately."><input name="next" type="hidden" value="inventory"><button class="btn btn-danger" type="submit">Remove screen</button></form></section>
        </div>
        <aside class="col-xl-4"><section class="card card-body"><h2 class="h5">Duplicate configuration</h2><p class="small text-body-secondary">Create an unpublished copy with a fresh credential and isolated group membership.</p><form method="post" action="{{ url_for('dashboard.clone_screen_route', screen_id=screen.id) }}"><input name="next" type="hidden" value="detail"><input name="next_tab" type="hidden" value="access"><button class="btn btn-outline-secondary w-100" type="submit">Clone screen</button></form></section></aside>
      </div>
    {% else %}
      <div class="card card-body"><h2 class="h4">Access is administrator-only</h2><p class="text-body-secondary mb-0">Credentials, cloning, and destructive device actions are hidden from editors and viewers.</p></div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('dashboard.static', filename='js/dashboard.js') }}"></script>
{% endblock %}