{% extends "base.html" %}

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

{% block content %}
  <div class="d-flex flex-wrap justify-content-between gap-3 mb-4">
    <div>
      <a href="{{ url_for('content.layouts') }}">← All layouts</a>
      <h1 class="mb-1">{{ layout.name }}</h1>
      <span class="badge text-bg-secondary">
        {{ layout.preset_definition.name }}
      </span>
    </div>
    <div class="d-flex gap-2">
      <a
        class="btn btn-primary"
        href="{{ url_for('content.layout_player', layout_id=layout.id) }}"
      >
        Preview
      </a>
      <form
        method="post"
        action="{{ url_for('content.delete_layout_route', layout_id=layout.id) }}"
      >
        <button class="btn btn-outline-danger" type="submit">Delete</button>
      </form>
    </div>
  </div>

  <form method="post" class="card card-body">
    <h2 class="h5">Zone playlists</h2>
    <div class="row g-3">
      {% for zone in zones %}
        <div class="col-md-6">
          <label class="form-label" for="zone-{{ zone.zone_key }}">
            {{ zone.zone_key|replace("_", " ")|title }}
          </label>
          <select
            class="form-select"
            id="zone-{{ zone.zone_key }}"
            name="zone_{{ zone.zone_key }}"
          >
            <option value="">No content</option>
            {% for playlist in playlists %}
              <option
                value="{{ playlist.id }}"
                {% if zone.playlist_id == playlist.id %}selected{% endif %}
              >
                {{ playlist.name }}
              </option>
            {% endfor %}
          </select>
        </div>
      {% endfor %}
    </div>
    <div class="mt-3">
      <button class="btn btn-primary" type="submit">Save zone assignments</button>
    </div>
  </form>
{% endblock %}