{% extends "admin/_layout.html" %}
{% from "_macros.html" import icon %}
{% set section = "customization" %}

{% block title %}Customization - {{ brand.name }}{% endblock %}
{% block heading %}Customization{% endblock %}

{% block admin_content %}
<p class="admin-lede">
  What this installation is called and what it looks like. Every box below ships
  with a default; leaving one alone means it is <em>not</em> stored, so a later
  release can still improve the wording. Clearing a box gives you the shipped
  version back rather than nothing.
</p>

{% if error %}
<div class="alert alert--error">{{ icon("warning", "icon--sm") }} <span>{{ error }}</span></div>
{% endif %}
{% if saved %}
<div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>{{ saved }}</span></div>
{% endif %}

{# --- Identity ------------------------------------------------------------- #}
<form method="post" action="/admin/customization/identity" enctype="multipart/form-data"
      class="form-grid">
  <section class="card">
    <h2 class="card__title">Identity</h2>

    <div class="field">
      <label class="field__label" for="instance-name">Name</label>
      <input class="input" id="instance-name" name="instance_name"
             value="{{ values.instance_name }}" maxlength="120" placeholder="LLeMbas">
      <p class="field__hint">
        Shown in the sidebar, in every page title, in the launcher when this is
        installed as an app, and to the model — it is told which installation it
        is answering in. Empty means <strong>LLeMbas</strong>.
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="tagline">Tagline</label>
      <input class="input" id="tagline" name="tagline"
             value="{{ values.tagline }}" maxlength="200">
      <p class="field__hint">
        One line, used in the page description. The sign-in page has a line of
        its own under <strong>Wording</strong> below.
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="logo">Logo</label>
      {% if current.logo_path %}
      <p class="field__hint" style="margin-bottom: var(--sp-2)">
        <img src="/branding/{{ current.logo_path }}" alt="" width="48" height="48"
             style="vertical-align: middle; border-radius: var(--radius)">
        <label class="checkbox" style="display: inline-flex; margin-left: var(--sp-3)">
          <input type="checkbox" name="remove_logo" value="true">
          <span>Remove it</span>
        </label>
      </p>
      {% endif %}
      <input class="input" id="logo" name="logo" type="file"
             accept="image/png,image/jpeg,image/webp,image/gif">
      <p class="field__hint">
        Replaces the leaf mark everywhere it appears. PNG, JPEG, WEBP or GIF,
        under 2 MB, square. <strong>SVG is deliberately not accepted</strong>:
        these files are served to people who are not signed in, and an SVG can
        carry a script. The launcher icons are made from this automatically.
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="favicon">Favicon</label>
      {% if current.favicon_path %}
      <p class="field__hint" style="margin-bottom: var(--sp-2)">
        <img src="/branding/{{ current.favicon_path }}" alt="" width="16" height="16"
             style="vertical-align: middle">
        <label class="checkbox" style="display: inline-flex; margin-left: var(--sp-3)">
          <input type="checkbox" name="remove_favicon" value="true">
          <span>Remove it</span>
        </label>
      </p>
      {% endif %}
      <input class="input" id="favicon" name="favicon" type="file"
             accept="image/png,image/jpeg,image/webp,image/gif">
      <p class="field__hint">
        Optional. Without one, a logo you upload is used at 32px, and without
        that the shipped leaf.
      </p>
    </div>
  </section>

  <div class="btn-row">
    <button class="btn btn--primary" type="submit">Save identity</button>
  </div>
</form>

{# --- Wording -------------------------------------------------------------- #}
<form method="post" action="/admin/customization/flavour" class="form-grid">
  <section class="card">
    <h2 class="card__title">Wording</h2>
    <p class="field__hint">
      The lines with a bit of character in them. They live in the empty states,
      the error pages and the sign-in screen — never in the functional interface,
      where a button says what it does. Replace them with your own, or leave them.
    </p>

    {% for entry in flavour %}
    <div class="field">
      <label class="field__label" for="text-{{ entry.key }}">{{ entry.label }}</label>
      <input class="input" id="text-{{ entry.key }}" name="text_{{ entry.key }}"
             value="{{ entry.value }}" maxlength="400"
             placeholder="{{ entry.default }}">
      <p class="field__hint">{{ entry.hint }}</p>
    </div>
    {% endfor %}
  </section>

  <div class="btn-row">
    <button class="btn btn--primary" type="submit">Save wording</button>
  </div>
</form>

{# --- Themes --------------------------------------------------------------- #}
{#
  Three blocks, always rendered, so adding a theme needs no JavaScript: an empty
  id means that block is not a theme. Saving replaces the whole list, which is
  what makes removing one a matter of clearing its id.
#}
<form method="post" action="/admin/customization/themes" class="form-grid">
  <section class="card">
    <h2 class="card__title">Themes</h2>
    <p class="field__hint">
      A theme is a set of colours, not a stylesheet — nothing in this interface
      hard-codes one, so a third palette composes with everything. Pick which
      built-in it starts from and change only what you want; everything left
      empty is inherited. The soft variants behind focus rings and selected rows
      are worked out from the accent, so you do not have to.
    </p>

    {% for index in range(3) %}
    {% set existing = custom_themes[index] if index < custom_themes | length else none %}
    <div class="card" style="margin-top: var(--sp-4)">
      <h3 class="section-title">
        {{ existing.label if existing else "A theme of your own" }}
      </h3>

      <div class="field-row">
        <div class="field">
          <label class="field__label" for="theme-{{ index }}-id">Id</label>
          <input class="input" id="theme-{{ index }}-id" name="theme_{{ index }}_id"
                 value="{{ existing.id if existing else '' }}" maxlength="24"
                 pattern="[a-z][a-z0-9-]*" placeholder="dusk">
          <p class="field__hint">
            Lowercase letters, digits and hyphens. Clear it to remove the theme.
          </p>
        </div>
        <div class="field">
          <label class="field__label" for="theme-{{ index }}-label">Name</label>
          <input class="input" id="theme-{{ index }}-label" name="theme_{{ index }}_label"
                 value="{{ existing.label if existing else '' }}" maxlength="60"
                 placeholder="Dusk">
        </div>
        <div class="field">
          <label class="field__label" for="theme-{{ index }}-base">Starts from</label>
          <select class="input" id="theme-{{ index }}-base" name="theme_{{ index }}_base">
            {% for base in bases %}
            <option value="{{ base }}"
                    {{ 'selected' if existing and existing.base == base }}>{{ base }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="field-row">
        {% for name, description in tokens %}
        <div class="field">
          <label class="field__label" for="theme-{{ index }}-{{ name }}">
            {{ description }}
          </label>
          <input class="input" id="theme-{{ index }}-{{ name }}"
                 name="theme_{{ index }}_{{ name }}" type="text"
                 value="{{ existing.tokens.get(name, '') if existing else '' }}"
                 maxlength="40" placeholder="inherited"
                 spellcheck="false">
          <p class="field__hint"><code>--{{ name }}</code></p>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </section>

  <div class="btn-row">
    <button class="btn btn--primary" type="submit">Save themes</button>
  </div>
</form>

{# --- Stylesheet ----------------------------------------------------------- #}
<form method="post" action="/admin/customization/css" class="form-grid">
  <section class="card">
    <h2 class="card__title">Stylesheet</h2>
    <p class="field__hint">
      Served as <code>/branding.css</code> after everything else, so these rules
      win. It is a file rather than a block inside the page on purpose: a
      stylesheet has no markup around it to escape from. Reach for the themes
      above first — a colour set there follows both palettes, and a rule here
      follows neither.
    </p>

    <div class="field">
      <label class="field__label" for="custom-css">CSS</label>
      <textarea class="input textarea" id="custom-css" name="custom_css" rows="10"
                spellcheck="false"
                placeholder=".sidebar__brand { letter-spacing: 0.02em; }"
      >{{ values.custom_css }}</textarea>
      <p class="field__hint">
        Up to 40,000 characters. Nothing here is validated: a rule that does not
        parse is dropped by the browser, quietly, as it would be in any
        stylesheet.
      </p>
    </div>
  </section>

  <div class="btn-row">
    <button class="btn btn--primary" type="submit">Save stylesheet</button>
  </div>
</form>
{% endblock %}