{% extends "base.html" %}

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

{% block content %}
  <div class="mb-4">
    <h1 class="mb-1">Multi-zone layouts</h1>
    <p class="text-body-secondary mb-0">
      Combine independent playlists using reliable fixed templates.
    </p>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form method="post" class="card card-body">
        <h2 class="h5">Create layout</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="preset">Template</label>
        <select class="form-select mb-3" id="preset" name="preset" required>
          {% for preset in presets %}
            <option value="{{ preset.key }}">
              {{ preset.name }} · {{ preset.zones|join(", ") }}
            </option>
          {% endfor %}
        </select>
        <button class="btn btn-primary" type="submit">Create layout</button>
      </form>
    </div>
    <div class="col-lg-7">
      {% if layouts %}
        <div class="list-group">
          {% for layout in layouts %}
            <a
              class="list-group-item list-group-item-action"
              href="{{ url_for('content.layout_detail', layout_id=layout.id) }}"
            >
              <strong>{{ layout.name }}</strong>
              <small class="d-block text-body-secondary">
                {{ layout.preset_definition.name }}
              </small>
            </a>
          {% endfor %}
        </div>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h2 class="h5">No layouts yet</h2>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}