{% extends "base.html" %}

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

{% block content %}
  <div class="mb-4">
    <h1 class="mb-1">Playlists</h1>
    <p class="text-body-secondary mb-0">
      Build deterministic, reusable playback sequences.
    </p>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form method="post" class="card card-body">
        <h2 class="h5">Create playlist</h2>

        <label class="form-label" for="name">Name</label>
        <input class="form-control mb-3" id="name" name="name" required>

        <label class="form-label" for="description">Description</label>
        <textarea
          class="form-control mb-3"
          id="description"
          name="description"
          rows="3"
        ></textarea>

        <div class="form-check mb-3">
          <input
            class="form-check-input"
            id="loop"
            name="loop"
            type="checkbox"
            checked
          >
          <label class="form-check-label" for="loop">
            Loop continuously
          </label>
        </div>

        <button class="btn btn-primary" type="submit">Create playlist</button>
      </form>
    </div>

    <div class="col-lg-7">
      {% if playlists %}
        <div class="list-group">
          {% for playlist in playlists %}
            <a
              class="list-group-item list-group-item-action"
              href="{{ url_for('content.playlist_detail', playlist_id=playlist.id) }}"
            >
              <div class="d-flex justify-content-between gap-3">
                <strong>{{ playlist.name }}</strong>
                <span class="badge text-bg-secondary">
                  {{ "Looping" if playlist.loop else "Play once" }}
                </span>
              </div>
              {% if playlist.description %}
                <small class="text-body-secondary">{{ playlist.description }}</small>
              {% endif %}
            </a>
          {% endfor %}
        </div>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h2 class="h5">No playlists yet</h2>
          <p class="text-body-secondary mb-0">
            Create one to arrange and play your content.
          </p>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}