{% extends "base.html" %}
{% from "content/_player_content.html" import render_content with context %}

{% macro render_slide(entry, first) %}
  <article
    class="signage-slide transition-{{ entry.transition }}"
    data-duration="{{ entry.duration_seconds }}"
    data-kind="{{ entry.content.kind }}"
    data-content-item-id="{{ entry.content.id }}"
    {% if not first %}hidden{% endif %}
  >
    {{ render_content(entry.content) }}
    <span class="visually-hidden">{{ entry.content.title }}</span>
  </article>
{% endmacro %}

{% block title %}{{ layout.name }} · LibreSignage{% endblock %}

{% block head %}
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/player.css') }}"
  >
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/layout-player.css') }}"
  >
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/creative.css') }}"
  >
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/widgets.css') }}"
  >
{% endblock %}

{% block body %}
  <main
    class="signage-player signage-layout layout-{{ layout.preset }}{%
      if display_profile is defined %} display-{{ display_profile.orientation }}
      scaling-{{ display_profile.scaling_mode }}{% endif %}"
    aria-label="{{ layout.name }}"
    data-playback-mode="normal"
    data-audio-policy="{{ display_profile.audio_policy if display_profile is defined else 'muted' }}"
    {% if display_profile is defined %}
      data-resolution-width="{{ display_profile.resolution_width }}"
      data-resolution-height="{{ display_profile.resolution_height }}"
      data-orientation="{{ display_profile.orientation }}"
      data-scaling-mode="{{ display_profile.scaling_mode }}"
    {% endif %}
    {% if screen_slug %}
      data-heartbeat-url="{{ url_for(
        'dashboard.screen_heartbeat',
        slug=screen_slug
      ) }}"
      data-offline-manifest-url="{{ url_for(
        'dashboard.offline_manifest',
        slug=screen_slug
      ) }}"
      data-screen-revision="{{ screen_revision }}"
      data-playback-retention-days="{{ config.PLAYBACK_LOG_RETENTION_DAYS }}"
      data-screen-status-url="{{ url_for(
        'dashboard.screen_status',
        slug=screen_slug
      ) }}"
      data-service-worker-url="{{ url_for(
        'dashboard.screen_service_worker',
        slug=screen_slug
      ) }}"
      {% if layout_schedule_fingerprint is defined %}
        data-status-url="{{ url_for('dashboard.screen_layout_schedule_status', slug=screen_slug) }}"
        data-selection-key="{{ layout_schedule_fingerprint }}"
      {% endif %}
    {% endif %}
  >
    {% for playable_zone in zones %}
      <section
        class="signage-zone zone-{{ playable_zone.zone.zone_key }}"
        data-zone-key="{{ playable_zone.zone.zone_key }}"
        aria-label="{{ playable_zone.zone.label }} zone"
        style="--zone-row: {{ playable_zone.zone.row }}; --zone-column: {{ playable_zone.zone.column }}; --zone-width: {{ playable_zone.zone.width }}; --zone-height: {{ playable_zone.zone.height }}; --zone-portrait-row: {{ playable_zone.zone.portrait_row }}; --zone-portrait-column: {{ playable_zone.zone.portrait_column }}; --zone-portrait-width: {{ playable_zone.zone.portrait_width }}; --zone-portrait-height: {{ playable_zone.zone.portrait_height }}; --zone-layer: {{ playable_zone.zone.layer }}"
      >
        {% for entry in playable_zone.entries %}
          {{ render_slide(entry, loop.first) }}
        {% else %}
          <div class="zone-empty">No content assigned</div>
        {% endfor %}
      </section>
    {% endfor %}
    {% if screen_slug %}
      <div class="offline-status" role="status" aria-live="polite" hidden></div>
    {% endif %}
  </main>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('content.static', filename='js/hls.min.js') }}"></script>
  {% if screen_slug %}
    <script src="{{ url_for('dashboard.static', filename='js/playback-log.js') }}"></script>
  {% endif %}
  <script src="{{ url_for('content.static', filename='js/zone-player.js') }}"></script>
  <script src="{{ url_for('content.static', filename='js/stream-player.js') }}"></script>
  <script src="{{ url_for('content.static', filename='js/widgets.js') }}"></script>
  {% if screen_slug %}
    <script src="{{ url_for('dashboard.static', filename='js/offline-player.js') }}"></script>
    <script src="{{ url_for('dashboard.static', filename='js/device-monitor.js') }}"></script>
    <script src="{{ url_for('dashboard.static', filename='js/screen-watcher.js') }}"></script>
    {% if zones|selectattr('zone.schedule_mode', 'equalto', 'scheduled')|list %}
      <script src="{{ url_for('content.static', filename='js/schedule-watcher.js') }}"></script>
    {% endif %}
  {% endif %}
{% endblock %}