{% 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 %}
  {% set initial = source_item.template_values if source_item else {} %}
  <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>
    {% if item %}
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('content.template_history', item_id=item.id) }}">Version history</a>
      {% if item.template_slug == 'daily-special' %}<a class="btn btn-sm btn-outline-primary" href="{{ url_for('content.duplicate_next_week', item_id=item.id) }}">Duplicate as next week's special</a>{% endif %}
    {% endif %}
  </div>

  <div class="row g-4">
    <div class="col-lg-5">
      <form method="post" action="{{ form_action }}" 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', draft_title or (source_item.title if source_item else '')) }}" required>
        {% if source_item and not item %}<input type="hidden" name="duplicate_from" value="{{ source_item.id }}">{% endif %}

        <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', initial.get('eyebrow', '')) }}" maxlength="80" data-preview-field="eyebrow">

        <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', initial.get('headline', '')) }}" maxlength="120" required data-preview-field="headline">

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

        {% if template.layout == "menu" %}
          <fieldset class="mb-3">
            <legend class="h6">Menu items</legend>
            <p class="form-text">
              Add up to six items. Each used row needs a name and price.
            </p>
            <div class="vstack gap-3">
              {% for number in range(1, 7) %}
                <div class="border rounded-3 p-3">
                  <strong class="d-block mb-2">Item {{ number }}</strong>
                  <div class="row g-2">
                    <div class="col-sm-8">
                      <label class="form-label" for="item_{{ number }}_name">
                        Name
                      </label>
                      <input
                        class="form-control"
                        id="item_{{ number }}_name"
                        name="item_{{ number }}_name"
                        value="{{ request.form.get('item_' ~ number ~ '_name', initial.get('item_' ~ number ~ '_name', '')) }}"
                        maxlength="60"
                        data-preview-field="item_{{ number }}_name"
                        {% if number == 1 %}required{% endif %}
                      >
                    </div>
                    <div class="col-sm-4">
                      <label class="form-label" for="item_{{ number }}_price">
                        Price
                      </label>
                      <input
                        class="form-control"
                        id="item_{{ number }}_price"
                        name="item_{{ number }}_price"
                        value="{{ request.form.get('item_' ~ number ~ '_price', initial.get('item_' ~ number ~ '_price', '')) }}"
                        maxlength="16"
                        data-preview-field="item_{{ number }}_price"
                        {% if number == 1 %}required{% endif %}
                      >
                    </div>
                    <div class="col-12">
                      <label class="form-label" for="item_{{ number }}_description">
                        Description <span class="text-body-secondary">(optional)</span>
                      </label>
                      <input
                        class="form-control"
                        id="item_{{ number }}_description"
                        name="item_{{ number }}_description"
                        value="{{ request.form.get('item_' ~ number ~ '_description', initial.get('item_' ~ number ~ '_description', '')) }}"
                        maxlength="100"
                        data-preview-field="item_{{ number }}_description"
                      >
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </fieldset>
          {% if not item %}
            <fieldset class="border rounded p-3 mb-3">
              <legend class="h6">Bind row data (optional)</legend>
              <select class="form-select mb-2" name="data_kind" id="data_kind">
                <option value="">Manual rows</option><option value="csv">CSV</option><option value="json">JSON</option><option value="google_sheets">Published Google Sheet</option>
              </select>
              <input class="form-control mb-2" type="file" name="data_file" accept=".csv,.json">
              <textarea class="form-control mb-2" name="data_text" rows="3" placeholder="Or paste CSV / JSON"></textarea>
              <input class="form-control mb-2" name="data_url" type="url" placeholder="https://docs.google.com/.../pub?output=csv">
              <div class="row g-2">
                <div class="col"><input class="form-control" name="map_name" value="name" aria-label="Name column"></div>
                <div class="col"><input class="form-control" name="map_description" value="description" aria-label="Description column"></div>
                <div class="col"><input class="form-control" name="map_price" value="price" aria-label="Price column"></div>
              </div>
              <button class="btn btn-sm btn-outline-secondary mt-2" type="button" data-preview-rows>Preview rows</button>
              <div class="form-text" data-row-preview aria-live="polite"></div>
            </fieldset>
          {% endif %}
        {% else %}
          {% for field in template.extra_fields %}
            <label class="form-label" for="{{ field.name }}">
              {{ field.label }}
              {% if not field.required %}
                <span class="text-body-secondary">(optional)</span>
              {% endif %}
            </label>
            {% if field.multiline %}
              <textarea
                class="form-control mb-3"
                id="{{ field.name }}"
                name="{{ field.name }}"
                maxlength="{{ field.max_length }}"
                placeholder="{{ field.placeholder }}"
                data-preview-field="{{ field.name }}"
                {% if field.required %}required{% endif %}
              >{{ request.form.get(field.name, '') }}</textarea>
            {% else %}
              <input
                class="form-control mb-3"
                id="{{ field.name }}"
                name="{{ field.name }}"
                value="{{ request.form.get(field.name, initial.get(field.name, '')) }}"
                maxlength="{{ field.max_length }}"
                placeholder="{{ field.placeholder }}"
                data-preview-field="{{ field.name }}"
                {% if field.required %}required{% endif %}
              >
            {% endif %}
          {% endfor %}
        {% endif %}

        {% 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', initial.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-12">
            <label class="form-label" for="brand_kit_id">Brand kit</label>
            <select class="form-select" id="brand_kit_id" name="brand_kit_id">
              <option value="">Template defaults</option>
              {% for kit in brand_kits %}<option value="{{ kit.id }}" data-primary="{{ kit.primary_color }}" data-text="{{ kit.text_color }}" {% if initial.get('brand_kit_id') == kit.id or (not initial.get('brand_kit_id') and kit.is_default) %}selected{% endif %}>{{ kit.name }}{% if kit.is_default %} (default){% endif %}</option>{% endfor %}
            </select>
          </div>
          <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', initial.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', initial.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', source_item.duration_seconds if source_item else '10') }}" required>

        <label class="form-label" for="folder">Folder</label><input class="form-control mb-2" id="folder" name="folder" value="{{ request.form.get('folder', source_item.folder if source_item else '') }}">
        <label class="form-label" for="tags">Tags</label><input class="form-control mb-2" id="tags" name="tags" value="{{ request.form.get('tags', source_item.tags if source_item else '') }}">
        <label class="form-label" for="expires_on">Expiry date</label><input class="form-control mb-3" id="expires_on" name="expires_on" type="date" value="{{ request.form.get('expires_on', item.expires_on if item and item.expires_on else '') }}">
        {% if item %}
          {% if initial.get('_data_source_id') %}<button class="btn btn-outline-secondary mb-3" formmethod="post" formaction="{{ url_for('content.refresh_template_data', source_id=initial.get('_data_source_id')) }}">Refresh row data now</button>{% endif %}
        {% endif %}

        <button class="btn btn-primary" type="submit">{{ 'Save new version' if item else '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) }}"
        >
          {% if template.layout == "menu" %}
            {% set examples = [
              ("Smash burger", "Double patty, cheddar, pickles", "$12"),
              ("Street tacos", "Three tacos with salsa verde", "$11"),
              ("Loaded fries", "Cheese sauce, crema, scallions", "$8"),
              ("Chicken sandwich", "Crispy chicken and slaw", "$13"),
              ("Churros", "Cinnamon sugar", "$6"),
              ("Fresh lemonade", "House-made daily", "$4")
            ] %}
            <div class="creative-menu-heading">
              <p class="creative-eyebrow" data-preview="eyebrow">{{ request.form.get('eyebrow', 'Made fresh') }}</p>
              <p class="creative-headline" data-preview="headline">{{ request.form.get('headline', template.name) }}</p>
            </div>
            <ul class="creative-menu-items">
              {% for number in range(1, 7) %}
                {% set example = examples[number - 1] %}
                <li data-menu-row="{{ number }}">
                  <div>
                    <strong data-preview="item_{{ number }}_name">{{ request.form.get('item_' ~ number ~ '_name', example[0]) }}</strong>
                    <span data-preview="item_{{ number }}_description">{{ request.form.get('item_' ~ number ~ '_description', example[1]) }}</span>
                  </div>
                  <b data-preview="item_{{ number }}_price">{{ request.form.get('item_' ~ number ~ '_price', example[2]) }}</b>
                </li>
              {% endfor %}
            </ul>
            <p class="creative-menu-footer" data-preview="body">{{ request.form.get('body', 'Ask about vegetarian options') }}</p>
          {% else %}
            <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>
              {% if template.extra_fields|selectattr('name', 'equalto', 'price')|list %}
                <p class="creative-price" data-preview="price">{{ request.form.get('price', '$14.95') }}</p>
              {% endif %}
              {% if template.extra_fields|selectattr('name', 'equalto', 'callout')|list %}
                <p class="creative-callout" data-preview="callout">{{ request.form.get('callout', 'Order at the window') }}</p>
              {% endif %}
            </div>
          {% endif %}
        </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 %}