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

{% block title %}Player · 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/creative.css') }}"
  >
  <link
    rel="stylesheet"
    href="{{ url_for('content.static', filename='css/widgets.css') }}"
  >
{% endblock %}

{% block body %}
  <main
    class="signage-player{% if display_profile is defined %} display-{{
      display_profile.orientation
    }} scaling-{{ display_profile.scaling_mode }}{% endif %}"
    aria-label="Content player"
    {% 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 %}
    data-loop="{{ 'true' if loop else 'false' }}"
    {% if scheduled %}
      data-schedule-id="{{ schedule_id or '' }}"
      data-status-url="{{ url_for('content.active_schedule_status') }}"
    {% endif %}
    {% if screen_slug is defined %}
      data-offline-manifest-url="{{ url_for(
        'dashboard.offline_manifest',
        slug=screen_slug
      ) }}"
      data-heartbeat-url="{{ url_for(
        'dashboard.screen_heartbeat',
        slug=screen_slug
      ) }}"
      data-screen-revision="{{ screen_revision }}"
      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
      ) }}"
    {% endif %}
  >
    {% if entries %}
      {% for entry in entries %}
        <article
          class="signage-slide transition-{{ entry.transition }}"
          data-duration="{{ entry.duration_seconds }}"
          data-kind="{{ entry.content.kind }}"
          {% if not loop.first %}hidden{% endif %}
        >
          {{ render_content(entry.content) }}
          <span class="visually-hidden">{{ entry.content.title }}</span>
        </article>
      {% endfor %}
      <div class="player-progress" aria-hidden="true">
        <div class="player-progress-bar"></div>
      </div>
    {% else %}
      <div class="player-empty">
        {% if scheduled %}
          <h1>No content is scheduled now</h1>
          <a href="{{ url_for('content.schedules') }}">Manage schedules</a>
        {% else %}
          <h1>No playlist content to play</h1>
          <a href="{{ url_for('content.playlists') }}">Manage playlists</a>
        {% endif %}
      </div>
    {% endif %}
    <div class="player-complete" hidden>
      <h1>Playback complete</h1>
    </div>
    {% if screen_slug is defined %}
      <div class="offline-status" role="status" aria-live="polite" hidden></div>
    {% endif %}
  </main>
{% endblock %}

{% block scripts %}
  {% if entries %}
    <script src="{{ url_for('content.static', filename='js/player.js') }}"></script>
    <script src="{{ url_for('content.static', filename='js/widgets.js') }}"></script>
  {% endif %}
  {% if scheduled %}
    <script src="{{ url_for('content.static', filename='js/schedule-watcher.js') }}"></script>
  {% endif %}
  {% if screen_slug is defined %}
    <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>
  {% endif %}
{% endblock %}