{% extends "base.html" %}

{% block title %}{{ playlist.name }} · LibreSignage{% endblock %}

{% block content %}
  <form class="float-end" method="post" action="{{ url_for('content.export_playlist_pack_route', playlist_id=playlist.id) }}">
    <button class="btn btn-outline-secondary" type="submit">Export .lspack</button>
  </form>
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
    <div>
      <a href="{{ url_for('content.playlists') }}">← All playlists</a>
      <h1 class="mb-1">{{ playlist.name }}</h1>
      {% if playlist.description %}
        <p class="text-body-secondary mb-1">{{ playlist.description }}</p>
      {% endif %}
      <span class="badge text-bg-secondary">
        {{ "Loops continuously" if playlist.loop else "Plays once" }}
      </span>
    </div>
    <div class="d-flex gap-2">
      <a
        class="btn btn-primary"
        href="{{ url_for('content.playlist_player', playlist_id=playlist.id) }}"
      >
        Open player
      </a>
      <form
        method="post"
        action="{{ url_for('content.delete_playlist_route', playlist_id=playlist.id) }}"
      >
        <button class="btn btn-outline-danger" type="submit">Delete</button>
      </form>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form
        method="post"
        action="{{ url_for('content.add_playlist_entry_route', playlist_id=playlist.id) }}"
        class="card card-body"
      >
        <h2 class="h5">Add content</h2>
        {% if items %}
          <label class="form-label" for="content_item_id">Library item</label>
          <select
            class="form-select mb-3"
            id="content_item_id"
            name="content_item_id"
            required
          >
            {% for item in items %}
              <option value="{{ item.id }}">
                {{ item.title }} · {{ item.display_kind }}
              </option>
            {% endfor %}
          </select>

          <label class="form-label" for="duration_override">
            Duration override
          </label>
          <input
            class="form-control"
            id="duration_override"
            name="duration_override"
            type="number"
            min="1"
            max="86400"
            placeholder="Use content default"
          >
          <div class="form-text mb-3">Leave blank to use the content duration.</div>

          <label class="form-label" for="transition">Transition</label>
          <select class="form-select" id="transition" name="transition">
            {% for value, label in transitions.items() %}
              <option value="{{ value }}">{{ label }}</option>
            {% endfor %}
          </select>
          <div class="form-text mb-3">
            Subtle transitions keep signage readable and distraction-free.
          </div>

          <button class="btn btn-primary" type="submit">Add to playlist</button>
        {% else %}
          <p class="text-body-secondary">Add something to the content library first.</p>
          <a class="btn btn-outline-primary" href="{{ url_for('content.index') }}">
            Open content library
          </a>
        {% endif %}
      </form>
    </div>

    <div class="col-lg-7">
      <h2 class="h5">Playback order</h2>
      {% if entries %}
        <ol class="list-group list-group-numbered">
          {% for entry in entries %}
            <li class="list-group-item d-flex align-items-center gap-3">
              <div class="flex-grow-1 ms-2">
                <strong>{{ entry.content.title }}</strong>
                <small class="d-block text-body-secondary">
                  {{ entry.content.display_kind|upper }} ·
                  {{ entry.duration_seconds }} seconds ·
                  {{ transitions.get(entry.transition, entry.transition) }} transition
                  {% if entry.content.expired %}
                    · <span class="text-danger">expired and skipped</span>
                  {% endif %}
                </small>
              </div>
              <div class="btn-group" role="group" aria-label="Reorder item">
                {% for direction, label in [("up", "↑"), ("down", "↓")] %}
                  <form
                    method="post"
                    action="{{ url_for(
                      'content.move_playlist_entry_route',
                      playlist_id=playlist.id,
                      entry_id=entry.id
                    ) }}"
                  >
                    <input name="direction" type="hidden" value="{{ direction }}">
                    <button class="btn btn-sm btn-outline-secondary" type="submit">
                      {{ label }}
                    </button>
                  </form>
                {% endfor %}
                <form
                  method="post"
                  action="{{ url_for(
                    'content.remove_playlist_entry_route',
                    playlist_id=playlist.id,
                    entry_id=entry.id
                  ) }}"
                >
                  <button class="btn btn-sm btn-outline-danger" type="submit">
                    Remove
                  </button>
                </form>
              </div>
            </li>
          {% endfor %}
        </ol>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h3 class="h6">This playlist is empty</h3>
          <p class="text-body-secondary mb-0">Add content to begin.</p>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}