{% extends "base.html" %}

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

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

{% block content %}
  {% set cloned_credentials = session.pop('new_screen_credentials', []) %}
  {% if cloned_credentials %}
    <div class="alert alert-warning" role="alert">
      <strong>Save these new screen credentials now.</strong> They are shown once.
      {% for item in cloned_credentials %}<code class="d-block text-wrap user-select-all mt-1">Screen {{ item.screen_id }}: {{ item.credential }}</code>{% endfor %}
    </div>
  {% endif %}

  <header class="page-header">
    <div>
      <h1 class="mb-1">Screens</h1>
      <p class="text-body-secondary mb-0">Monitor the fleet, organize displays, and stage playback changes.</p>
    </div>
    <div class="page-header-actions">
      {% if g.user.role == 'admin' %}
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#register-screen" aria-expanded="false" aria-controls="register-screen">Add screen</button>
      {% endif %}
    </div>
  </header>

  {% if g.user.role == 'admin' %}
    <div class="collapse mb-4" id="register-screen">
      <form method="post" action="{{ url_for('dashboard.register_screen') }}" class="card card-body">
        <input name="next" type="hidden" value="inventory">
        <div class="row g-3 align-items-end">
          <div class="col-md-8"><label class="form-label" for="new-screen-name">Screen name</label><input class="form-control" id="new-screen-name" name="name" placeholder="Lobby display" required></div>
          <div class="col-md-4"><button class="btn btn-primary w-100" type="submit">Register screen</button></div>
        </div>
        <p class="small text-body-secondary mb-0 mt-3">The new screen remains unpublished until you assign content and publish it.</p>
      </form>
    </div>
  {% endif %}

  {% if can_publish_all or publish_groups %}
    <section class="card card-body mb-4" aria-labelledby="publishing-heading">
      <div class="section-heading mb-0">
        <div><h2 class="h5 mb-1" id="publishing-heading">Ready to publish</h2><p class="small text-body-secondary mb-0">{{ unpublished_count }} {{ 'screen has' if unpublished_count == 1 else 'screens have' }} staged changes.</p></div>
        <div class="page-header-actions">
          {% if publish_groups %}
            <form method="post" action="{{ url_for('dashboard.publish') }}" class="d-flex gap-2 mobile-stack-actions" data-confirm="Publish the selected group? Every screen in it receives the staged revision.">
              <input name="target" type="hidden" value="group">
              <select class="form-select" name="group_id" aria-label="Group to publish" required>{% for group in publish_groups %}<option value="{{ group.id }}">{{ group.name }} · {{ group_unpublished_counts.get(group.id, 0) }} staged</option>{% endfor %}</select>
              <button class="btn btn-outline-primary text-nowrap" type="submit">Publish group</button>
            </form>
          {% endif %}
          {% if can_publish_all %}
            <form method="post" action="{{ url_for('dashboard.publish') }}" data-confirm="Publish the current staged assignment to all {{ screens|length }} screens?">
              <input name="target" type="hidden" value="all"><button class="btn {{ 'btn-primary' if unpublished_count else 'btn-outline-secondary' }}" type="submit">{{ 'Publish fleet' if unpublished_count else 'Republish fleet' }}</button>
            </form>
          {% endif %}
        </div>
      </div>
    </section>
  {% endif %}

  <div class="row g-4">
    <section class="col-xl-8" aria-labelledby="screen-list-heading">
      <div class="section-heading"><div><h2 class="h4 mb-1" id="screen-list-heading">Fleet inventory</h2><p class="small text-body-secondary mb-0">Open a screen to manage playback, settings, and device access.</p></div></div>

      {% if screens %}
        <div class="filter-bar row g-2 mb-3" data-screen-filter hidden>
          <div class="col-sm-6 col-lg-5"><label class="visually-hidden" for="inventory-search">Search screens</label><input class="form-control" id="inventory-search" type="search" placeholder="Search screens" data-filter-search></div>
          <div class="col-sm-6 col-lg-3"><label class="visually-hidden" for="inventory-state">Filter by status</label><select class="form-select" id="inventory-state" data-filter-state><option value="">Any status</option><option value="online">Online</option><option value="degraded">Degraded</option><option value="offline">Offline</option><option value="never">Never connected</option></select></div>
          <div class="col-sm-6 col-lg-3"><label class="visually-hidden" for="inventory-group">Filter by group</label><select class="form-select" id="inventory-group" data-filter-group><option value="">Any group</option>{% for group in groups %}<option value="{{ group.id }}">{{ group.name }}</option>{% endfor %}</select></div>
          <div class="col-sm-6 col-lg-1 d-flex align-items-center"><div class="form-check"><input class="form-check-input" id="inventory-staged" type="checkbox" data-filter-staged><label class="form-check-label visually-hidden" for="inventory-staged">Staged only</label><span class="small text-body-secondary" aria-hidden="true">Staged</span></div></div>
          <div class="col-12"><p class="small text-body-secondary mb-0" data-filter-count aria-live="polite"></p></div>
        </div>
        <div class="content-empty text-center border p-5 mb-3" data-filter-empty hidden><h3 class="h5">No screens match these filters</h3><p class="text-body-secondary mb-0">Clear the search or choose different filters.</p></div>
      {% endif %}

      <div class="vstack gap-3">
        {% for screen in screens %}
          {% set profile = profiles[screen.id] %}
          {% set assignment = layout_assignments[screen.id] %}
          <article class="card card-body screen-summary-card" id="screen-{{ screen.id }}" data-screen-card data-screen-name="{{ screen.name }}" data-state="{{ health_states[screen.id] }}" data-unpublished="{{ 'true' if screen.id in unpublished_ids else 'false' }}" data-groups="{{ profile.group_ids|sort|join(',') }}">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
              <div class="flex-grow-1">
                <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                  <h3 class="h5 mb-0"><a class="screen-card-link stretched-link" href="{{ url_for('dashboard.screen_detail', screen_id=screen.id) }}">{{ screen.name }}</a></h3>
                  <span class="badge text-bg-{{ health_tones[screen.id] }}"><span class="status-dot"></span>{{ health_states[screen.id]|title }}</span>
                  {% if screen.id in unpublished_ids %}<span class="badge text-bg-warning">Staged changes</span>{% elif screen.published_revision %}<span class="badge text-bg-success">Published r{{ screen.published_revision }}</span>{% endif %}
                </div>
                <div class="screen-card-meta">
                  <span>{{ profile.location or 'No location' }}</span>
                  <span>{{ profile.resolution_label }} · {{ profile.orientation }}</span>
                  <span>{% if assignment.draft_layout_id %}{{ assignment.draft_layout_name }}{% elif screen.draft_use_schedules %}Scheduled channel{% elif screen.draft_playlist_id %}{{ screen.draft_playlist_name }}{% else %}No assignment{% endif %}</span>
                </div>
                {% if profile.group_names %}<div class="mt-2">{% for group_name in profile.group_names %}<span class="badge text-bg-secondary me-1">{{ group_name }}</span>{% endfor %}</div>{% endif %}
              </div>
              <span class="btn btn-sm btn-outline-primary position-relative">Manage <span aria-hidden="true">→</span></span>
            </div>
          </article>
        {% else %}
          <div class="content-empty text-center border p-5"><h3 class="h5">No screens registered</h3><p class="text-body-secondary mb-0">Add a screen to create its player identity.</p></div>
        {% endfor %}
      </div>
    </section>

    <aside class="col-xl-4">
      <section class="card card-body mb-4" aria-labelledby="targeting-heading">
        <details class="dashboard-disclosure">
          <summary class="d-flex justify-content-between align-items-center"><span><strong id="targeting-heading">Stage a bulk assignment</strong><small class="d-block text-body-secondary">Selected screens, a group, or the fleet</small></span></summary>
          <form method="post" action="{{ url_for('dashboard.assign_target') }}" class="mt-3" data-target-form>
            <label class="form-label" for="target">Target</label><select class="form-select mb-3" id="target" name="target" data-target required><option value="selected">Selected screens</option><option value="group">Screen group</option><option value="all">All screens</option></select>
            <div class="mb-3" data-group-field hidden><label class="form-label" for="group_id">Group</label><select class="form-select" id="group_id" 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>
            <label class="form-label" for="target-mode">Playback source</label><select class="form-select mb-3" id="target-mode" name="mode" data-screen-mode><option value="schedule">Scheduled channel</option><option value="playlist">Direct playlist</option><option value="layout">Multi-zone layout</option></select>
            <div class="mb-3" data-playlist-field><label class="form-label" for="target-playlist">Playlist</label><select class="form-select" id="target-playlist" name="playlist_id" disabled><option value="">Choose a playlist</option>{% for playlist in playlists %}<option value="{{ playlist.id }}">{{ playlist.name }}</option>{% endfor %}</select></div>
            <div class="mb-3" data-layout-field><label class="form-label" for="target-layout">Layout</label><select class="form-select" id="target-layout" name="layout_id" disabled><option value="">Choose a layout</option>{% for layout in layouts %}<option value="{{ layout.id }}">{{ layout.name }}</option>{% endfor %}</select></div>
            <fieldset class="mb-3" data-screen-field><legend class="form-label">Screens</legend><div class="vstack gap-2">{% for screen in screens %}<div class="form-check"><input class="form-check-input" id="target-screen-{{ screen.id }}" name="screen_ids" type="checkbox" value="{{ screen.id }}"><label class="form-check-label" for="target-screen-{{ screen.id }}">{{ screen.name }}</label></div>{% endfor %}</div></fieldset>
            <button class="btn btn-outline-primary w-100" type="submit">Stage assignment</button>
          </form>
        </details>
      </section>

      <section class="card card-body" aria-labelledby="groups-heading">
        <h2 class="h5" id="groups-heading">Groups</h2>
        {% if g.user.role == 'admin' %}<form method="post" action="{{ url_for('dashboard.create_group') }}" class="d-flex gap-2 mb-3"><input class="form-control" name="name" aria-label="New group name" placeholder="Downtown stores" required><button class="btn btn-outline-primary" type="submit">Add</button></form>{% endif %}
        <div class="list-group list-group-flush">
          {% for group in groups %}<div class="list-group-item d-flex align-items-center gap-2 px-0 bg-transparent"><div class="flex-grow-1"><strong>{{ group.name }}</strong><small class="d-block text-body-secondary">{{ group.screen_count }} {{ 'screen' if group.screen_count == 1 else 'screens' }}</small></div>{% if g.user.role == 'admin' %}<div class="dropdown"><button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Actions for group {{ group.name }}">Actions</button><div class="dropdown-menu dropdown-menu-end"><form method="post" action="{{ url_for('dashboard.clone_group_route', group_id=group.id) }}"><button class="dropdown-item" type="submit">Clone group</button></form><form method="post" action="{{ url_for('dashboard.remove_group', group_id=group.id) }}" data-confirm="Delete the group “{{ group.name }}”? Its screens remain registered."><button class="dropdown-item text-danger" type="submit">Delete group</button></form></div></div>{% endif %}</div>{% else %}<p class="small text-body-secondary mb-0">No groups yet.</p>{% endfor %}
        </div>
      </section>
    </aside>
  </div>
{% endblock %}

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