{% extends "base.html" %}

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

{% block head %}
  <link rel="stylesheet" href="{{ url_for('content.static', filename='css/content.css') }}">
  <link rel="stylesheet" href="{{ url_for('content.static', filename='css/creative.css') }}">
{% endblock %}

{% block content %}
  <div class="mb-4">
    <a href="{{ url_for('content.templates') }}">← All templates</a>
    <h1 class="mt-2 mb-1">{{ template.name }}</h1>
    <p class="text-body-secondary">{{ template.description }}</p>
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form method="post" enctype="multipart/form-data" class="card card-body">
        <h2 class="h5">Customize content</h2>

        <label class="form-label" for="title">Library title</label>
        <input class="form-control mb-3" id="title" name="title" value="{{ request.form.get('title', '') }}" required>

        <label class="form-label" for="eyebrow">{{ template.eyebrow_label }}</label>
        <input class="form-control mb-3" id="eyebrow" name="eyebrow" value="{{ request.form.get('eyebrow', '') }}" maxlength="80">

        <label class="form-label" for="headline">{{ template.headline_label }}</label>
        <input class="form-control mb-3" id="headline" name="headline" value="{{ request.form.get('headline', '') }}" maxlength="120" required>

        <label class="form-label" for="body">{{ template.body_label }}</label>
        <textarea class="form-control mb-3" id="body" name="body" rows="4" maxlength="500">{{ request.form.get('body', '') }}</textarea>

        {% if template.supports_image %}
          <label class="form-label" for="image">Image <span class="text-body-secondary">(optional)</span></label>
          <input class="form-control mb-2" id="image" name="image" type="file" accept=".gif,.jpeg,.jpg,.png,.webp">
          <label class="form-label" for="image_alt">Image description</label>
          <input
            class="form-control mb-1"
            id="image_alt"
            name="image_alt"
            value="{{ request.form.get('image_alt', '') }}"
            aria-describedby="image-alt-help"
          >
          <div class="form-text mb-3" id="image-alt-help">
            Required when adding an image. Describe its purpose, not its appearance.
          </div>
        {% endif %}

        <div class="row g-3 mb-3">
          <div class="col-sm-6">
            <label class="form-label" for="brand_color">Brand color</label>
            <input class="form-control form-control-color w-100" id="brand_color" name="brand_color" type="color" value="{{ request.form.get('brand_color', default_brand_color) }}">
          </div>
          <div class="col-sm-6">
            <label class="form-label" for="text_color">Text color</label>
            <input class="form-control form-control-color w-100" id="text_color" name="text_color" type="color" value="{{ request.form.get('text_color', default_text_color) }}">
          </div>
        </div>

        <label class="form-label" for="duration_seconds">Duration (seconds)</label>
        <input class="form-control mb-3" id="duration_seconds" name="duration_seconds" type="number" min="1" max="86400" value="{{ request.form.get('duration_seconds', '10') }}" required>

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

    <div class="col-lg-7">
      <section class="card card-body" aria-labelledby="preview-heading">
        <h2 class="h5" id="preview-heading">Design preview</h2>
        <div
          class="creative creative-preview creative-{{ template.slug }}"
          id="creative-preview"
          style="--creative-brand: {{ request.form.get('brand_color', default_brand_color) }}; --creative-text: {{ request.form.get('text_color', default_text_color) }}"
        >
          <div class="creative-copy">
            <p class="creative-eyebrow" data-preview="eyebrow">{{ request.form.get('eyebrow', template.eyebrow_label) }}</p>
            <p class="creative-headline" data-preview="headline">{{ request.form.get('headline', template.name) }}</p>
            <p class="creative-body" data-preview="body">{{ request.form.get('body', template.description) }}</p>
          </div>
        </div>
        <p class="form-text mb-0">
          Preview is representative; playback scales the design to the display.
        </p>
      </section>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('content.static', filename='js/template-editor.js') }}"></script>
{% endblock %}