{% extends "base.html" %}

{% block title %}Emergency message · LibreSignage{% endblock %}

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

{% block body %}
  <main
    class="signage-player emergency-player emergency-{{ emergency.severity }}
      display-{{ display_profile.orientation }}"
    aria-label="Emergency message"
    data-playback-mode="emergency"
    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 }}"
    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-screen-status-url="{{ url_for('dashboard.screen_status', slug=screen_slug) }}"
    data-service-worker-url="{{ url_for('dashboard.screen_service_worker', slug=screen_slug) }}"
  >
    <article class="emergency-message" role="alert" aria-live="assertive">
      <p class="emergency-label">{{ emergency.severity }} alert</p>
      <h1>{{ emergency.title }}</h1>
      <p>{{ emergency.message }}</p>
    </article>
    <div class="offline-status" role="status" aria-live="polite" hidden></div>
  </main>
{% endblock %}

{% block scripts %}
  <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>
{% endblock %}