{% extends "base.html" %}

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

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

{% block content %}
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
    <div>
      <a href="{{ url_for('dashboard.index') }}">← CMS dashboard</a>
      <h1 class="mt-2 mb-1">Preview {{ screen.name }}</h1>
      <p class="text-body-secondary mb-0">
        Staged assignment: <strong>{{ assignment_name }}</strong>
        {% if schedule %} · active schedule {{ schedule.name }}{% endif %}
      </p>
    </div>
    <span class="badge text-bg-warning fs-6">Preview only · not published</span>
  </div>

  <div class="card card-body mb-4">
    <div class="row g-3 align-items-end">
      <div class="col-md-5">
        <label class="form-label" for="display-profile">Display profile</label>
        <select class="form-select" id="display-profile">
          {% set common_profiles = [
            (1920, 1080, "Full HD landscape"),
            (1080, 1920, "Full HD portrait"),
            (3840, 2160, "4K landscape"),
            (2160, 3840, "4K portrait"),
            (1280, 720, "HD landscape")
          ] %}
          {% set saved_resolution = display_profile.resolution_width
            ~ "x" ~ display_profile.resolution_height %}
          {% for width, height, label in common_profiles %}
            <option
              value="{{ width }}x{{ height }}"
              data-width="{{ width }}"
              data-height="{{ height }}"
              {% if display_profile.resolution_width == width
                and display_profile.resolution_height == height %}selected{% endif %}
            >
              {{ label }} · {{ width }} × {{ height }}
            </option>
          {% endfor %}
          {% if saved_resolution not in [
            "1920x1080", "1080x1920", "3840x2160", "2160x3840", "1280x720"
          ] %}
            <option
              value="{{ display_profile.resolution_width }}x{{ display_profile.resolution_height }}"
              data-width="{{ display_profile.resolution_width }}"
              data-height="{{ display_profile.resolution_height }}"
              selected
            >
              Saved custom · {{ display_profile.resolution_label }}
            </option>
          {% endif %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="preview-scaling">Media scaling</label>
        <select class="form-select" id="preview-scaling">
          <option value="contain" {% if display_profile.scaling_mode == "contain" %}selected{% endif %}>
            Fit with letterboxing
          </option>
          <option value="cover" {% if display_profile.scaling_mode == "cover" %}selected{% endif %}>
            Fill and crop
          </option>
          <option value="stretch" {% if display_profile.scaling_mode == "stretch" %}selected{% endif %}>
            Stretch to fill
          </option>
        </select>
      </div>
      <div class="col-md-4">
        <p class="mb-0 text-body-secondary" id="preview-status" role="status" aria-live="polite">
          Rendering saved display profile. The canvas is scaled to fit.
        </p>
      </div>
    </div>
  </div>

  <div class="preview-viewport" id="preview-viewport">
    <div class="preview-canvas" id="preview-canvas">
      <iframe
        id="preview-frame"
        src="{{ url_for('dashboard.screen_preview_player', screen_id=screen.id) }}"
        data-base-url="{{ url_for('dashboard.screen_preview_player', screen_id=screen.id) }}"
        title="Staged playback preview for {{ screen.name }}"
      ></iframe>
    </div>
  </div>

  <p class="form-text mt-2">
    Web pages may refuse to appear in an embedded preview because of their own
    security policy. The managed player will still attempt to display them.
  </p>
{% endblock %}

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