{% extends "base.html" %}

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

{% block head %}
  <link rel="stylesheet" href="{{ url_for('content.static', filename='css/content.css') }}">
{% 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-7 order-2 order-lg-1">
      <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>

        <fieldset class="mb-3">
          <legend class="form-label mb-1">Template</legend>
          <p class="form-text mt-0 mb-3">
            Landscape previews show how each zone divides the screen.
          </p>
          <div class="layout-preset-options">
            {% for preset in presets %}
              <div class="layout-preset-option">
                <input
                  class="layout-preset-input"
                  id="preset-{{ preset.key }}"
                  name="preset"
                  type="radio"
                  value="{{ preset.key }}"
                  {% if loop.first %}checked{% endif %}
                  required
                >
                <label class="layout-preset-card" for="preset-{{ preset.key }}">
                  <span class="layout-preset-preview" aria-hidden="true">
                    {% for zone in preset.landscape %}
                      <span
                        class="layout-preset-zone{% if zone.overlay %} is-overlay{% endif %}"
                        style="--zone-row: {{ zone.row }}; --zone-column: {{ zone.column }}; --zone-width: {{ zone.width }}; --zone-height: {{ zone.height }}; --zone-layer: {{ zone.layer }}"
                      >
                        <span>{{ zone.label }}</span>
                      </span>
                    {% endfor %}
                  </span>
                  <span class="layout-preset-name">{{ preset.name }}</span>
                  <small>
                    {{ preset.zones|length }} zone{% if preset.zones|length != 1 %}s{% endif %}
                    <span class="visually-hidden">: {{ preset.landscape|map(attribute='label')|join(', ') }}</span>
                  </small>
                </label>
              </div>
            {% endfor %}
          </div>
        </fieldset>
        <button class="btn btn-primary" type="submit">Create layout</button>
      </form>
    </div>
    <div class="col-lg-5 order-1 order-lg-2">
      {% 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 %}