{% extends "base.html" %}

{% block title %}Screen inventory · LibreSignage{% endblock %}

{% block content %}
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
    <div>
      <a href="{{ url_for('dashboard.index') }}">← Dashboard</a>
      <h1 class="mb-1">Screen inventory</h1>
      <p class="text-body-secondary mb-0">
        Organize screens and stage content for one display, a group, or the fleet.
      </p>
    </div>
    <form method="post" action="{{ url_for('dashboard.publish') }}">
      <button class="btn btn-primary" type="submit">
        Publish staged changes
      </button>
    </form>
  </div>

  <section class="card card-body mb-4">
    <h2 class="h4">Multi-screen targeting</h2>
    <form
      method="post"
      action="{{ url_for('dashboard.assign_target') }}"
      class="row g-3"
      data-target-form
    >
      <div class="col-md-4">
        <label class="form-label" for="target">Target</label>
        <select class="form-select" 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>
      <div class="col-md-4" 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>
      <div class="col-md-4">
        <label class="form-label" for="target-mode">Playback source</label>
        <select
          class="form-select"
          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>
      <div class="col-md-4">
        <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="col-md-4">
        <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="col-12" data-screen-field>
        <legend class="form-label">Screens</legend>
        <div class="d-flex flex-wrap gap-3">
          {% 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>
      <div class="col-12">
        <button class="btn btn-outline-primary" type="submit">
          Stage targeted assignment
        </button>
      </div>
    </form>
  </section>

  <div class="row g-4">
    <section class="col-xl-8">
      <div class="d-flex flex-wrap justify-content-between gap-3 mb-3">
        <h2 class="h4 mb-0">Screens</h2>
        <form
          method="post"
          action="{{ url_for('dashboard.register_screen') }}"
          class="d-flex gap-2"
        >
          <input name="next" type="hidden" value="inventory">
          <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">
            Register screen
          </button>
        </form>
      </div>

      <div class="vstack gap-3">
        {% for screen in screens %}
          {% set profile = profiles[screen.id] %}
          <article class="card card-body">
            <div class="d-flex flex-wrap justify-content-between gap-3 mb-3">
              <div>
                <h3 class="h5 mb-1">{{ screen.name }}</h3>
                <code>{{ screen.slug }}</code>
                {% if profile.location %}
                  <span class="d-block text-body-secondary">
                    {{ profile.location }}
                  </span>
                {% endif %}
                {% for group_name in profile.group_names %}
                  <span class="badge text-bg-secondary">{{ group_name }}</span>
                {% endfor %}
                <span class="badge text-bg-info">
                  {{ profile.resolution_label }} · {{ profile.orientation }}
                  · {{ profile.scaling_mode }}
                </span>
                <details class="mt-2">
                  <summary class="small">PyWebView client setup</summary>
                  <code class="d-block text-wrap user-select-all mt-1">
                    libresignage-client configure --server-url
                    {{ server_url }} --screen-slug {{ screen.slug }}
                  </code>
                </details>
              </div>
              <a
                class="btn btn-sm btn-outline-primary align-self-start"
                href="{{ url_for('dashboard.screen_player', slug=screen.slug) }}"
              >
                Open player
              </a>
            </div>

            <form
              method="post"
              action="{{ url_for(
                'dashboard.update_inventory',
                screen_id=screen.id
              ) }}"
              class="row g-3"
            >
              <div class="col-md-6">
                <label class="form-label" for="name-{{ screen.id }}">Name</label>
                <input
                  class="form-control"
                  id="name-{{ screen.id }}"
                  name="name"
                  value="{{ screen.name }}"
                  required
                >
              </div>
              <div class="col-md-6">
                <label class="form-label" for="location-{{ screen.id }}">
                  Location
                </label>
                <input
                  class="form-control"
                  id="location-{{ screen.id }}"
                  name="location"
                  value="{{ profile.location }}"
                  placeholder="Building A · Lobby"
                >
              </div>
              <div class="col-12">
                <label class="form-label" for="notes-{{ screen.id }}">Notes</label>
                <textarea
                  class="form-control"
                  id="notes-{{ screen.id }}"
                  name="notes"
                  rows="2"
                >{{ profile.notes }}</textarea>
              </div>
              <fieldset class="col-12">
                <legend class="h6">Display profile</legend>
                <div class="row g-3" data-display-profile>
                  <div class="col-md-4">
                    <label class="form-label" for="preset-{{ screen.id }}">
                      Common resolution
                    </label>
                    <select class="form-select" id="preset-{{ screen.id }}" data-resolution-preset>
                      <option value="">Custom</option>
                      {% for width, height, label in [
                        (1920, 1080, "Full HD landscape"),
                        (1080, 1920, "Full HD portrait"),
                        (3840, 2160, "4K landscape"),
                        (2160, 3840, "4K portrait"),
                        (1280, 720, "HD landscape")
                      ] %}
                        <option
                          value="{{ width }}x{{ height }}"
                          {% if profile.resolution_width == width
                            and profile.resolution_height == height %}selected{% endif %}
                        >
                          {{ label }} · {{ width }} × {{ height }}
                        </option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="col-md-2">
                    <label class="form-label" for="width-{{ screen.id }}">Width</label>
                    <input
                      class="form-control"
                      id="width-{{ screen.id }}"
                      name="resolution_width"
                      type="number"
                      min="320"
                      max="7680"
                      value="{{ profile.resolution_width }}"
                      data-resolution-width
                      required
                    >
                  </div>
                  <div class="col-md-2">
                    <label class="form-label" for="height-{{ screen.id }}">Height</label>
                    <input
                      class="form-control"
                      id="height-{{ screen.id }}"
                      name="resolution_height"
                      type="number"
                      min="320"
                      max="7680"
                      value="{{ profile.resolution_height }}"
                      data-resolution-height
                      required
                    >
                  </div>
                  <div class="col-md-4">
                    <label class="form-label" for="scaling-{{ screen.id }}">
                      Media scaling
                    </label>
                    <select class="form-select" id="scaling-{{ screen.id }}" name="scaling_mode">
                      <option value="contain" {% if profile.scaling_mode == "contain" %}selected{% endif %}>
                        Fit with letterboxing
                      </option>
                      <option value="cover" {% if profile.scaling_mode == "cover" %}selected{% endif %}>
                        Fill and crop
                      </option>
                      <option value="stretch" {% if profile.scaling_mode == "stretch" %}selected{% endif %}>
                        Stretch to fill
                      </option>
                    </select>
                  </div>
                  <div class="col-12">
                    <p class="form-text mb-0">
                      Orientation is derived from width and height. Portrait
                      layouts stack split zones vertically.
                    </p>
                  </div>
                </div>
              </fieldset>
              <fieldset class="col-12">
                <legend class="form-label">Groups</legend>
                <div class="d-flex flex-wrap gap-3">
                  {% for group in groups %}
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        id="screen-{{ screen.id }}-group-{{ group.id }}"
                        name="group_ids"
                        type="checkbox"
                        value="{{ group.id }}"
                        {% if group.id in profile.group_ids %}checked{% endif %}
                      >
                      <label
                        class="form-check-label"
                        for="screen-{{ screen.id }}-group-{{ group.id }}"
                      >
                        {{ group.name }}
                      </label>
                    </div>
                  {% endfor %}
                </div>
              </fieldset>
              <div class="col-12">
                <button class="btn btn-sm btn-outline-secondary" type="submit">
                  Save inventory details
                </button>
              </div>
            </form>
          </article>
        {% else %}
          <div class="content-empty text-center border rounded p-5">
            <h3 class="h5">No screens registered</h3>
          </div>
        {% endfor %}
      </div>
    </section>

    <aside class="col-xl-4">
      <div class="card card-body">
        <h2 class="h4">Groups</h2>
        <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>
        <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">
              <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>
              <form
                method="post"
                action="{{ url_for(
                  'dashboard.remove_group',
                  group_id=group.id
                ) }}"
              >
                <button class="btn btn-sm btn-outline-danger" type="submit">
                  Delete
                </button>
              </form>
            </div>
          {% else %}
            <p class="text-body-secondary mb-0">No groups yet.</p>
          {% endfor %}
        </div>
      </div>
    </aside>
  </div>
{% endblock %}

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