{% 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 --------------------------------------------------------------- #}
{#
  One block per theme that exists, plus a single blank one to add the next.

  It used to be three blocks, always rendered, whether or not anybody had made a
  theme -- so a fresh instance opened on fifty-seven empty colour boxes under
  three identical headings, and the fourth theme was unreachable without editing
  the template. The spare-block pattern is the no-JavaScript way to do "add
  another": fill the blank one, save, and the page comes back with your theme
  and a new blank. There is no button to press and nothing to clone, which is
  why this still works with scripting off.

  The colours live in a <details> so a block is a heading and three fields until
  you ask for them. Nineteen inputs is the right number to *offer* and the wrong
  number to *show*: everything left empty inherits from the base, so most themes
  set four or five.

  Saving replaces the whole list, which is what makes removing one a matter of
  clearing its id -- and why the blocks may have gaps in their numbering without
  anything caring. `save_themes` skips an index with no id and counts from the
  keys it was actually sent.
#}
<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>

    {# The spare block is offered until the cap, so the form cannot grow without
       end and the page cannot stop offering one while there is room. #}
    {% set slots = custom_themes | length + (1 if custom_themes | length < max_themes else 0) %}
    {% for index in range(slots) %}
    {% 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 or existing.id if existing else "Add a theme" }}
      </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">
            {% if existing %}
            Lowercase letters, digits and hyphens. Clear it to remove this theme.
            {% else %}
            Lowercase letters, digits and hyphens. Give it one to make a theme.
            {% endif %}
          </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>

      {# Open on a theme that has set something, so an existing override is never
         hidden behind a disclosure somebody has to know to open. #}
      <details{{ ' open' if existing and existing.tokens }}>
        <summary class="text-sm">
          Colours
          {% if existing and existing.tokens %}
          <span class="badge">{{ existing.tokens | length }} set</span>
          {% else %}
          <span class="faint">all inherited</span>
          {% endif %}
        </summary>
        <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>
      </details>
    </div>
    {% endfor %}

    {% if custom_themes | length >= max_themes %}
    <p class="field__hint" style="margin-top: var(--sp-4)">
      That is {{ max_themes }} themes, which is the limit. Clear one's id and
      save to make room for another.
    </p>
    {% endif %}
  </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 %}
