{% 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">Zones</h2>
    <p class="text-body-secondary">Playlist changes are staged until screens using this layout are published.</p>
    <div class="row g-3">
      {% for zone in zones %}
        <div class="col-md-6">
          <label class="form-label" for="label-{{ zone.zone_key }}">Label</label>
          <input class="form-control mb-2" id="label-{{ zone.zone_key }}" name="label_{{ zone.zone_key }}" value="{{ zone.label }}" required>
          <div class="form-text mb-2">Immutable key: <code>{{ zone.zone_key }}</code></div>
          <label class="form-label" for="mode-{{ zone.zone_key }}">Playback mode</label>
          <select class="form-select mb-2" id="mode-{{ zone.zone_key }}" name="mode_{{ zone.zone_key }}">
            <option value="direct" {% if zone.schedule_mode == 'direct' %}selected{% endif %}>Direct playlist</option>
            <option value="scheduled" {% if zone.schedule_mode == 'scheduled' %}selected{% endif %}>Scheduled</option>
          </select>
          <label class="form-label" for="zone-{{ zone.zone_key }}">Direct playlist</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>
          <label class="form-label mt-2" for="fallback-{{ zone.zone_key }}">Scheduled fallback</label>
          <select class="form-select" id="fallback-{{ zone.zone_key }}" name="fallback_{{ zone.zone_key }}">
            <option value="">Empty when no rule is active</option>
            {% for playlist in playlists %}<option value="{{ playlist.id }}" {% if zone.fallback_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>
  {% if not layout.preset_definition.fixed %}
    <section class="card card-body mt-4" data-layout-editor data-save-url="{{ url_for('content.update_custom_layout_zones', layout_id=layout.id) }}">
      <h2 class="h5">12 × 12 snap-grid editor</h2>
      <p class="text-body-secondary">Drag or resize zones on the grid, or use the exact numeric fields. Base zones cannot overlap; mark a zone as an overlay to permit overlap.</p>
      <div class="layout-editor-grid mb-3" data-grid aria-label="Layout grid"></div>
      <div data-zone-fields>
        {% for zone in zones %}
          <fieldset class="border rounded p-3 mb-2" data-zone-key="{{ zone.zone_key }}">
            <legend class="h6">{{ zone.label }} <code>{{ zone.zone_key }}</code></legend>
            <div class="row g-2">
              {% for field, value in [('row',zone.row),('column',zone.column),('width',zone.width),('height',zone.height),('layer',zone.layer)] %}
                <div class="col"><label class="form-label">{{ field|title }}<input class="form-control" name="{{ field }}" type="number" min="{{ 0 if field == 'layer' else 1 }}" max="12" value="{{ value }}"></label></div>
              {% endfor %}
            </div>
            <label class="form-check"><input class="form-check-input" name="overlay" type="checkbox" {% if zone.overlay %}checked{% endif %}> Overlay</label>
            {% if zones|length > 1 %}<button class="btn btn-sm btn-outline-danger mt-2" type="button" data-remove-zone>Remove zone</button>{% endif %}
          </fieldset>
        {% endfor %}
      </div>
      <div><button class="btn btn-outline-primary" type="button" data-add-zone>Add zone</button> <button class="btn btn-primary" type="button" data-save-zones>Save geometry</button></div>
      <div class="alert mt-3" hidden data-editor-message role="status"></div>
    </section>
  {% endif %}
{% endblock %}

{% block scripts %}{% if not layout.preset_definition.fixed %}<script src="{{ url_for('content.static', filename='js/layout-editor.js') }}"></script>{% endif %}{% endblock %}