{% extends "base.html" %}

{% block title %}Dashboard · LibreSignage{% endblock %}

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

{% block content %}
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
    <div>
      <h1 class="mb-1">CMS dashboard</h1>
      <p class="text-body-secondary mb-0">
        Manage content and publish it to every screen from one place.
      </p>
      <small class="text-body-secondary">
        {% if latest_publish %}
          Last publish #{{ latest_publish.id }}:
          {{ latest_publish.created_at }} UTC to
          {{ latest_publish.screen_count }}
          {{ "screen" if latest_publish.screen_count == 1 else "screens" }}
        {% else %}
          Nothing has been published yet.
        {% endif %}
        Connected players check for updates every 2 seconds.
      </small>
    </div>
    <form method="post" action="{{ url_for('dashboard.publish') }}">
      <button class="btn btn-primary btn-lg" type="submit">
        Publish to {{ screens|length }} {{ "screen" if screens|length == 1 else "screens" }}
      </button>
    </form>
  </div>

  {% if unpublished_count %}
    <div class="alert alert-warning" role="status">
      {{ unpublished_count }} {{ "screen has" if unpublished_count == 1 else "screens have" }}
      unpublished assignment changes.
    </div>
  {% endif %}

  {% if emergency_overrides %}
    <section class="mb-4" aria-labelledby="active-emergencies-heading">
      <h2 class="h4" id="active-emergencies-heading">Active emergency overrides</h2>
      <div class="vstack gap-2">
        {% for emergency in emergency_overrides %}
          <div class="alert alert-danger d-flex flex-wrap align-items-center justify-content-between gap-3 mb-0" role="alert">
            <div>
              <strong>{{ emergency.title }}</strong>
              <span class="badge text-bg-dark ms-1">{{ emergency.severity|title }}</span>
              <div>{{ emergency.message }}</div>
              <small>
                Active on {{ emergency.screen_count }}
                {{ "screen" if emergency.screen_count == 1 else "screens" }}
                since {{ emergency.created_at }} UTC.
              </small>
            </div>
            {% if g.user.role == "admin" %}
              <form method="post" action="{{ url_for('dashboard.restore_emergency_override', override_id=emergency.id) }}">
                <button class="btn btn-light" type="submit">
                  Restore published playback
                </button>
              </form>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% for alert in alerts %}
    <div class="alert alert-danger" role="alert">
      <strong>{{ alert.screen_name }} is offline.</strong>
      No heartbeat has arrived within the configured threshold.
      Alert opened {{ alert.opened_at }} UTC.
    </div>
  {% endfor %}

  <section class="row g-3 mb-5" aria-label="CMS summary">
    {% for label, count, endpoint in [
      ("Content items", items|length, "content.index"),
      ("Playlists", playlists|length, "content.playlists"),
      ("Schedules", schedules|length, "content.schedules"),
      ("Screens", screens|length, "dashboard.screen_inventory")
    ] %}
      <div class="col-6 col-lg-3">
        <a class="dashboard-stat card card-body" href="{{ url_for(endpoint) }}">
          <span class="display-6">{{ count }}</span>
          <span class="text-body-secondary">{{ label }}</span>
        </a>
      </div>
    {% endfor %}
  </section>

  <div class="row g-4">
    <section class="col-xl-8">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h4 mb-0">Managed screens</h2>
        <form method="post" action="{{ url_for('dashboard.register_screen') }}" class="d-flex gap-2">
          <input
            class="form-control"
            name="name"
            aria-label="New screen name"
            placeholder="Lobby display"
            required
          >
          <button class="btn btn-outline-primary text-nowrap" type="submit">
            Add screen
          </button>
        </form>
      </div>

      {% if screens %}
        <div class="vstack gap-3">
          {% for screen in screens %}
            {% set state = health_states[screen.id] %}
            {% set report = health.get(screen.id) %}
            {% set layout_assignment = layout_assignments[screen.id] %}
            <article class="card card-body">
              <div class="d-flex flex-wrap justify-content-between gap-3">
                <div>
                  <div class="d-flex align-items-center gap-2">
                    <h3 class="h5 mb-0">{{ screen.name }}</h3>
                    {% if screen.id in unpublished_ids %}
                      <span class="badge text-bg-warning">Draft changes</span>
                    {% elif screen.published_revision %}
                      <span class="badge text-bg-success">
                        Published r{{ screen.published_revision }}
                      </span>
                    {% endif %}
                    <span class="badge text-bg-{{
                      'success' if state == 'online'
                      else ('warning' if state in ('degraded', 'never') else 'danger')
                    }}">
                      {{ state|title }}
                    </span>
                  </div>
                  <small class="text-body-secondary">
                    {% if screen.last_seen_at %}
                      Last contact {{ screen.last_seen_at }} UTC
                    {% else %}
                      Player has not connected
                    {% endif %}
                  </small>
                  <small class="d-block text-body-secondary">
                    Open once while online and wait for “Offline playlist ready”
                    before deploying or rebooting this screen.
                  </small>
                  {% if report %}
                    <small class="d-block text-body-secondary">
                      Cache:
                      {{ "ready" if report.cache_ready else "not ready" }}
                      {% if report.cache_revision %}
                        for r{{ report.cache_revision }}
                      {% endif %}
                      · Service worker:
                      {{ "active" if report.service_worker_active else "inactive" }}
                      {% if report.storage_usage is not none %}
                        · Storage {{ (report.storage_usage / 1048576)|round(1) }} MiB
                        {% if report.storage_quota %}
                          / {{ (report.storage_quota / 1048576)|round(1) }} MiB
                        {% endif %}
                      {% endif %}
                    </small>
                    {% if report.last_error %}
                      <small class="d-block text-danger">{{ report.last_error }}</small>
                    {% endif %}
                  {% endif %}
                </div>
                <div class="d-flex gap-2">
                  <a
                    class="btn btn-sm btn-outline-secondary"
                    href="{{ url_for(
                      'dashboard.screen_preview',
                      screen_id=screen.id
                    ) }}"
                  >
                    Preview draft
                  </a>
                  <a
                    class="btn btn-sm btn-outline-primary"
                    href="{{ url_for(
                      'dashboard.screen_player',
                      slug=screen.slug
                    ) }}"
                  >
                    Open player
                  </a>
                  <form
                    method="post"
                    action="{{ url_for(
                      'dashboard.remove_screen',
                      screen_id=screen.id
                    ) }}"
                  >
                    <button class="btn btn-sm btn-outline-danger" type="submit">
                      Remove
                    </button>
                  </form>
                </div>
              </div>

              <form
                method="post"
                action="{{ url_for(
                  'dashboard.assign_screen',
                  screen_id=screen.id
                ) }}"
                class="row g-2 align-items-end mt-2"
              >
                <div class="col-md-4">
                  <label class="form-label" for="mode-{{ screen.id }}">
                    Playback source
                  </label>
                  <select
                    class="form-select"
                    id="mode-{{ screen.id }}"
                    name="mode"
                    data-screen-mode
                  >
                    <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-5">
                  <label class="form-label" for="playlist-{{ screen.id }}">
                    Playlist
                  </label>
                  <select
                    class="form-select"
                    id="playlist-{{ screen.id }}"
                    name="playlist_id"
                    {% if screen.draft_use_schedules
                      or layout_assignment.draft_layout_id %}disabled{% endif %}
                  >
                    <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-5">
                  <label class="form-label" for="layout-{{ screen.id }}">
                    Layout
                  </label>
                  <select
                    class="form-select"
                    id="layout-{{ screen.id }}"
                    name="layout_id"
                    {% if not layout_assignment.draft_layout_id %}disabled{% endif %}
                  >
                    <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>
                <div class="col-md-3">
                  <button class="btn btn-outline-secondary w-100" type="submit">
                    Stage assignment
                  </button>
                </div>
              </form>

              <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                <span class="small fw-semibold me-1">Remote actions</span>
                {% for action, label in [
                  ("reload", "Restart player"),
                  ("sync", "Sync now"),
                  ("clear_cache", "Clear cache")
                ] %}
                  <form
                    method="post"
                    action="{{ url_for(
                      'dashboard.queue_remote_command',
                      screen_id=screen.id
                    ) }}"
                  >
                    <input name="action" type="hidden" value="{{ action }}">
                    <button class="btn btn-sm btn-outline-secondary" type="submit">
                      {{ label }}
                    </button>
                  </form>
                {% endfor %}
                {% if commands[screen.id] %}
                  <span class="small text-body-secondary ms-auto">
                    Latest: {{ commands[screen.id][0].action|replace("_", " ") }}
                    · {{ commands[screen.id][0].status }}
                  </span>
                {% endif %}
              </div>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h3 class="h5">No screens registered</h3>
          <p class="text-body-secondary mb-0">
            Add a screen to create its permanent player URL.
          </p>
        </div>
      {% endif %}
    </section>

    <aside class="col-xl-4">
      {% if g.user.role == "admin" %}
        <div class="card border-danger mb-4">
          <div class="card-header text-bg-danger">
            <h2 class="h5 mb-0">Emergency override</h2>
          </div>
          <form
            method="post"
            action="{{ url_for('dashboard.activate_emergency_override') }}"
            class="card-body"
            data-target-form
          >
            <p class="small text-body-secondary">
              Immediately interrupt normal playback. You can explicitly restore
              each targeted screen to its published assignment.
            </p>

            <label class="form-label" for="emergency-title">Title</label>
            <input class="form-control mb-3" id="emergency-title" name="title" maxlength="120" required>

            <label class="form-label" for="emergency-message">Message</label>
            <textarea class="form-control mb-3" id="emergency-message" name="message" rows="4" maxlength="1000" required></textarea>

            <label class="form-label" for="emergency-severity">Severity</label>
            <select class="form-select mb-3" id="emergency-severity" name="severity" required>
              <option value="critical">Critical</option>
              <option value="warning">Warning</option>
              <option value="information">Information</option>
            </select>

            <label class="form-label" for="emergency-target">Target</label>
            <select class="form-select mb-3" id="emergency-target" name="target" data-target required>
              <option value="all">All screens</option>
              <option value="group">Screen group</option>
              <option value="selected">Selected screens</option>
            </select>

            <div class="mb-3" data-group-field hidden>
              <label class="form-label" for="emergency-group">Group</label>
              <select class="form-select" id="emergency-group" name="group_id">
                <option value="">Choose a group</option>
                {% for group in groups %}
                  <option value="{{ group.id }}">{{ group.name }} · {{ group.screen_count }}</option>
                {% endfor %}
              </select>
            </div>

            <fieldset class="mb-3" data-screen-field hidden>
              <legend class="form-label">Screens</legend>
              {% for screen in screens %}
                <div class="form-check">
                  <input class="form-check-input" id="emergency-screen-{{ screen.id }}" name="screen_ids" type="checkbox" value="{{ screen.id }}">
                  <label class="form-check-label" for="emergency-screen-{{ screen.id }}">
                    {{ screen.name }}
                  </label>
                </div>
              {% endfor %}
            </fieldset>

            <button class="btn btn-danger w-100" type="submit" {% if not screens %}disabled{% endif %}>
              Activate emergency message
            </button>
          </form>
        </div>
      {% endif %}

      <div class="card card-body">
        <h2 class="h5">Management shortcuts</h2>
        <div class="list-group list-group-flush">
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.index') }}">
            Add or remove content
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.playlists') }}">
            Build playlists
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.layouts') }}">
            Configure multi-zone layouts
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.schedules') }}">
            Configure dayparting
          </a>
        </div>
      </div>
    </aside>
  </div>
{% endblock %}

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