{{define "title"}}{{t "Design"}} · {{.Blog.Title}}{{end}}
{{define "content"}}
{{$t := .Data.theme}}
{{$sub := .Blog.Subdomain}}
<div class="pagehead">
  <h1>{{t "Design"}}</h1>
  <p class="lead muted">{{t "Everything about how your blog looks and what goes where, saved together with the one button at the bottom. Changes are live as soon as you save; refresh"}} <a href="{{.BlogURL}}" target="_blank">{{t "your blog"}} &#8599;</a> {{t "to see them."}}</p>
</div>

<div class="design">
<nav class="sidenav">
  <a href="#colours">{{t "Colours & fonts"}}</a>
  <a href="#header">{{t "Header"}}</a>
  <a href="#menu">{{t "Menu"}}</a>
  <a href="#content">{{t "Content"}}</a>
  <a href="#columns">{{t "Side columns"}}</a>
  <a href="#footer">{{t "Footer"}}</a>
  <a href="#logo">{{t "Logo & icon"}}</a>
</nav>

<form method="post" action="/b/{{$sub}}/design" enctype="multipart/form-data" id="design" data-next="{{.Data.nextIndex}}" data-sub="{{$sub}}">
<input type="hidden" name="_csrf" value="{{.CSRF}}">
<input type="hidden" name="at" value="">

<div class="card" id="colours">
  <h2>{{t "Colours & fonts"}}</h2>
  <h3>{{t "Colour schemes"}}</h3>
  <p class="muted small">{{t "A quick start: a scheme fills in every colour below. Images, fonts and layout are kept."}}</p>
  <div class="presets jsonly">
    {{range .Data.presets}}<button type="button" class="preset" data-colors="{{.Colors}}" title="{{tf "Apply %s" (t .Name)}}">
      <span class="sw" style="background:{{.HeaderBg}}"></span><span class="sw" style="background:{{.Bg}}"></span><span class="sw" style="background:{{.ContentBg}}"></span><span class="sw" style="background:{{.Link}}"></span>
      <span class="pname">{{t .Name}}</span>
    </button>
    {{end}}
  </div>
  <label class="nojs">{{t "Apply a scheme when saving"}}<br><select name="preset">
    <option value="">{{t "Keep the colours below"}}</option>
    {{range .Data.presets}}<option value="{{.Key}}">{{t .Name}}</option>{{end}}
  </select></label>

  <h3>{{t "Page background"}}</h3>
  <div class="row">
    <label>{{t "Colour"}}<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label>
    <label>{{t "Image style"}}<br><select name="bg_mode">
      <option value="cover"{{if eq $t.BgMode "cover"}} selected{{end}}>{{t "Stretch to fill"}}</option>
      <option value="fixed"{{if eq $t.BgMode "fixed"}} selected{{end}}>{{t "Fill, fixed while scrolling"}}</option>
      <option value="tile"{{if eq $t.BgMode "tile"}} selected{{end}}>{{t "Repeat (tile)"}}</option>
    </select></label>
  </div>
  {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "sub" $sub "images" .Data.images "names" .Data.imageNames "label" (t "Background image"))}}

  <h3>{{t "Text & links"}}</h3>
  <div class="row">
    <label>{{t "Text colour"}}<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label>
    <label>{{t "Link colour"}}<br><input type="color" name="link_color" value="{{$t.LinkColor}}"></label>
    <label>{{t "Underline links"}}<br><select name="link_underline">
      <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>{{t "Always"}}</option>
      <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>{{t "Only on hover"}}</option>
      <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>{{t "Never"}}</option>
    </select></label>
  </div>
  <div class="hoverpick">
    <input type="checkbox" name="link_hover_custom" id="link-hover-custom"{{if $t.LinkHover}} checked{{end}}>
    <label for="link-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
    <label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="link_hover" value="{{if $t.LinkHover}}{{$t.LinkHover}}{{else}}{{$t.LinkColor}}{{end}}"></label>
  </div>

  <h3>{{t "Fonts"}}</h3>
  <div class="row">
    <label>{{t "Font"}}<br><select name="font">
      <option value="sans"{{if eq $t.Font "sans"}} selected{{end}}>Sans-serif (Helvetica/Arial)</option>
      <option value="serif"{{if eq $t.Font "serif"}} selected{{end}}>Serif (Georgia/Times)</option>
      <option value="mono"{{if eq $t.Font "mono"}} selected{{end}}>Monospace (Courier)</option>
    </select></label>
    <label>{{t "Heading font"}}<br><select name="heading_font">
      <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>{{t "Same as text"}}</option>
      <option value="sans"{{if eq $t.HeadingFont "sans"}} selected{{end}}>Sans-serif</option>
      <option value="serif"{{if eq $t.HeadingFont "serif"}} selected{{end}}>Serif</option>
      <option value="mono"{{if eq $t.HeadingFont "mono"}} selected{{end}}>Monospace</option>
    </select></label>
    <label>{{t "Text size"}}<br><select name="font_size">
      <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>{{t "Small"}}</option>
      <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>{{t "Normal"}}</option>
      <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>{{t "Large"}}</option>
    </select></label>
  </div>
</div>

<div class="card" id="header">
  <h2>{{t "Header"}}</h2>
  <label class="check"><input type="checkbox" name="header_on" data-area="header"{{if $t.HeaderOn}} checked{{end}}> {{t "Show the header"}} <span class="muted">({{t "the top of every page"}})</span></label>
  <div class="row">
    <label>{{t "Background"}}<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
    <label>{{t "Text colour"}}<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label>
    <label>{{t "Alignment"}}<br><select name="header_align">
      <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>{{t "Left"}}</option>
      <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>{{t "Centred"}}</option>
    </select></label>
    <label>{{t "Title size"}}<br><select name="title_size">
      <option value="small"{{if eq $t.TitleSize "small"}} selected{{end}}>{{t "Small"}}</option>
      <option value="normal"{{if eq $t.TitleSize "normal"}} selected{{end}}>{{t "Normal"}}</option>
      <option value="large"{{if eq $t.TitleSize "large"}} selected{{end}}>{{t "Large"}}</option>
    </select></label>
  </div>
  {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" $sub "images" .Data.images "names" .Data.imageNames "label" (t "Banner image") "hint" (t "Shown across the top of the header whenever one is chosen."))}}
  <div class="row"><label>{{t "Banner height"}}<br><select name="header_image_height">
    <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>{{t "Short"}}</option>
    <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>{{t "Medium"}}</option>
    <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>{{t "Tall"}}</option>
  </select></label></div>
  {{template "arealist" (dict "area" "header" "root" . "hint" (t "Stack the title, a logo, the menu and a search box in the order you like."))}}
</div>

<div class="card" id="menu">
  <h2>{{t "Menu"}}</h2>
  <p class="muted small">{{t "The links the Menu module shows, wherever you place it. Pages and outside links can be mixed in any order. Ticking “Show in menu” on a page does the same as adding it here."}}</p>
  <ul class="modlist plain" id="menulist">
    {{range .Data.menuRows}}{{template "menurow" (dict "i" .I "item" .Item "pos" .Pos)}}{{end}}
  </ul>
  <p class="muted empty"{{if .Data.menuRows}} hidden{{end}}>{{t "The menu is empty."}}</p>
  <div class="addrow cols">
    <div>
      <h3>{{t "Add a page"}}</h3>
      {{if .Data.freePages}}<label>{{t "Page"}}<br><select name="menu_add_page"><option value="">—</option>{{range .Data.freePages}}<option value="{{.ID}}">{{.Title}}</option>{{end}}</select></label>
      <button type="button" class="secondary jsonly" data-menu="page">{{t "Add page"}}</button>
      {{end}}<p class="muted small nopages"{{if .Data.freePages}} hidden{{end}}>{{t "Every page is already in the menu."}}</p>
    </div>
    <div>
      <h3>{{t "Add a link"}}</h3>
      <label>{{t "Text"}}<br><input name="menu_add_label" maxlength="60" placeholder="{{t "My photos"}}"></label>
      <label>{{t "Address"}}<br><input name="menu_add_url" maxlength="500" placeholder="https://example.org"></label>
      <button type="button" class="secondary jsonly" data-menu="link">{{t "Add link"}}</button>
    </div>
  </div>
  <p class="muted small nojs">{{t "A page or link filled in here is added when you save."}}</p>
  <h3>{{t "How the menu looks"}}</h3>
  <div class="row">
    <label>{{t "Alignment"}} <span class="muted">({{t "menu in the header"}})</span><br><select name="nav_align">
      <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>{{t "Left"}}</option>
      <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>{{t "Centred"}}</option>
      <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>{{t "Right"}}</option>
    </select></label>
    <label>{{t "Link style"}}<br><select name="nav_style">
      <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>{{t "Normal"}}</option>
      <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>{{t "Uppercase, spaced"}}</option>
    </select></label>
    <label>{{t "Background"}}<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
    <label>{{t "Text"}}<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
  </div>
  <div class="hoverpick">
    <input type="checkbox" name="nav_hover_custom" id="nav-hover-custom"{{if $t.NavHover}} checked{{end}}>
    <label for="nav-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
    <label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
  </div>
</div>

<div class="card" id="content">
  <h2>{{t "Content"}}</h2>
  <p class="muted small">{{t "The box your posts and pages are shown in. It spans whatever the side columns leave."}}</p>
  <div class="row">
    <label>{{t "Background"}}<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label>
    <label>{{t "Box style"}}<br><select name="content_style">
      <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>{{t "Card (shadow, rounded corners)"}}</option>
      <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>{{t "Flat"}}</option>
    </select></label>
    <label>{{t "Padding"}} <span class="muted">({{t "inside the box"}})</span><br><select name="content_padding">
      <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>{{t "Compact"}}</option>
      <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>{{t "Normal"}}</option>
      <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>{{t "Roomy"}}</option>
    </select></label>
  </div>
  <h3>{{t "Posts"}}</h3>
  <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> {{t "Show the date on posts"}}</label>
  <div class="row">
    <label>{{t "Date format"}}<br><select name="date_format">
      <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>{{postdate "long" .Data.today}}</option>
      <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>{{postdate "short" .Data.today}}</option>
      <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>{{postdate "iso" .Data.today}}</option>
    </select></label>
    <label>{{t "Posts per page"}}<br><select name="posts_per_page">
      {{range .Data.perPage}}<option value="{{.}}"{{if eq . $t.PostsPerPage}} selected{{end}}>{{.}}</option>{{end}}
    </select></label>
  </div>
  <h3>{{t "Around the posts"}}</h3>
  <p class="muted small">{{t "Your own HTML before and after the posts — an intro box, a newsletter form, a badge…"}}</p>
  {{template "arealist" (dict "area" "above" "root" .)}}
  {{template "arealist" (dict "area" "below" "root" .)}}
</div>

<div class="card" id="columns">
  <h2>{{t "Side columns"}}</h2>
  <div class="lay">
    <div class="lay-row lay-header{{if not $t.HeaderOn}} off{{end}}">{{t "Header"}}</div>
    <div class="lay-cols">
      <div class="lay-col lay-side lay-left{{if not $t.LeftOn}} off{{end}}{{if not (index .Data.rows "left")}} empty{{end}}" style="width:{{$t.LeftWidth}}%">{{t "Left"}} <span class="pct">{{$t.LeftWidth}}</span>%</div>
      <div class="lay-col lay-main" style="width:{{$t.MainWidth}}%">{{t "Main content"}} <span class="pct">{{$t.MainWidth}}</span>%</div>
      <div class="lay-col lay-side lay-right{{if not $t.RightOn}} off{{end}}{{if not (index .Data.rows "right")}} empty{{end}}" style="width:{{$t.RightWidth}}%">{{t "Right"}} <span class="pct">{{$t.RightWidth}}</span>%</div>
    </div>
    <div class="lay-row lay-footer{{if not $t.FooterOn}} off{{end}}">{{t "Footer"}}</div>
  </div>
  <div class="row">
    <label>{{t "Left column width"}}<br><input type="number" name="left_width" value="{{$t.LeftWidth}}" min="15" max="40" step="5"> %</label>
    <label>{{t "Right column width"}}<br><input type="number" name="right_width" value="{{$t.RightWidth}}" min="15" max="40" step="5"> %</label>
  </div>
  <p class="muted small">{{t "Between 15% and 40% each; the main content takes the rest. A column only appears when it has at least one module; without columns the posts take the whole width. On phones the columns stack: main content first, then the left and right columns, then the footer."}}</p>
  <label class="check"><input type="checkbox" name="keep_columns"{{if $t.KeepColumns}} checked{{end}}> {{t "Always keep the columns' space, even when a column is empty or hidden"}} <span class="muted">({{t "the main content then keeps its width and stays centred"}})</span></label>
  <h3>{{t "Left column"}}</h3>
  <label class="check"><input type="checkbox" name="left_on" data-area="left"{{if $t.LeftOn}} checked{{end}}> {{t "Show the left column"}}</label>
  {{template "arealist" (dict "area" "left" "root" . "hint" (t "A narrow column beside your posts. Good for the menu, an archive or recent posts."))}}
  <h3>{{t "Right column"}}</h3>
  <label class="check"><input type="checkbox" name="right_on" data-area="right"{{if $t.RightOn}} checked{{end}}> {{t "Show the right column"}}</label>
  {{template "arealist" (dict "area" "right" "root" . "hint" (t "A narrow column on the other side of your posts. Same choices as the left one."))}}
</div>

<div class="card" id="footer">
  <h2>{{t "Footer"}}</h2>
  <label class="check"><input type="checkbox" name="footer_on" data-area="footer"{{if $t.FooterOn}} checked{{end}}> {{t "Show the footer"}} <span class="muted">({{t "the bottom of every page"}})</span></label>
  <div class="row">
    <label>{{t "Background"}}<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label>
    <label>{{t "Text colour"}}<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label>
    <label>{{t "Alignment"}}<br><select name="footer_align">
      <option value="center"{{if eq $t.FooterAlign "center"}} selected{{end}}>{{t "Centred"}}</option>
      <option value="left"{{if eq $t.FooterAlign "left"}} selected{{end}}>{{t "Left"}}</option>
    </select></label>
  </div>
  {{template "arealist" (dict "area" "footer" "root" . "hint" (t "A copyright line, the RSS link, a list of your pages."))}}
</div>

<div class="card" id="logo">
  <h2>{{t "Logo & site icon"}}</h2>
  {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" $sub "images" .Data.images "names" .Data.imageNames "label" (t "Logo") "hint" (t "Shown wherever you place a Logo module; it links to your front page."))}}
  <div class="row"><label>{{t "Logo size"}}<br><select name="logo_size">
    <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>{{t "Small (48 px tall)"}}</option>
    <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>{{t "Medium (80 px)"}}</option>
    <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>{{t "Large (140 px)"}}</option>
  </select></label></div>
  {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" $sub "images" .Data.images "names" .Data.imageNames "label" (t "Favicon") "hint" (t "The small icon browsers show in the tab. A square PNG or ICO of 32–64 px works best; pick None for the Blogspace icon.") "accept" "image/png,image/x-icon,image/gif,image/webp,image/jpeg,.ico")}}
</div>

<div class="savebar">
  <button type="submit">{{t "Save"}}</button>
  <a class="btn secondary" href="/b/{{$sub}}/design" id="discard">{{t "Discard changes"}}</a>
  <span class="unsaved" hidden>{{t "Unsaved changes"}}</span>
  <a class="viewlink" href="{{.BlogURL}}" target="_blank">{{t "View blog"}} &#8599;</a>
</div>

{{/* Row templates the script clones: one per area and kind, and the two menu entries. */}}
{{range .Data.templates}}<template id="tpl-{{.Area}}-{{.Kind}}">{{template "modrow" (dict "i" "__I__" "m" .M "pos" 0 "root" $)}}</template>
{{end}}<template id="tpl-menu-page">{{template "menurow" (dict "i" "__I__" "item" .Data.pageItem "pos" 0)}}</template>
<template id="tpl-menu-link">{{template "menurow" (dict "i" "__I__" "item" .Data.linkItem "pos" 0)}}</template>
</form>

<details class="help reset">
  <summary>{{t "Reset to defaults"}}</summary>
  <p>{{t "Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images (they stay in your library)."}}</p>
  <form method="post" action="/b/{{$sub}}/design/reset">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <button type="submit" class="danger">{{t "Reset everything"}}</button>
  </form>
</details>
</div>

{{/* The library panel: filled by the script from /files?kind=image as JSON, one page at a time. */}}
<div class="picker" id="picker" hidden>
  <div class="picker-box">
    <div class="picker-head">
      <input type="search" placeholder="{{t "Filter by name…"}}" aria-label="{{t "Filter by name…"}}">
      <span class="muted small pcount">{{tf "%d images" .Data.imageCount}}</span>
      <button type="button" class="secondary small" data-pick="close">{{t "Close"}}</button>
    </div>
    <div class="picks"></div>
    <p class="muted small pnone" hidden>{{t "No images match."}}</p>
    <div class="pager"><button type="button" class="mini" data-pick="prev">&larr; {{t "Newer"}}</button> <span class="pnum"></span> <button type="button" class="mini" data-pick="next">{{t "Older"}} &rarr;</button></div>
  </div>
</div>

<script>
(function () {
  var form = document.getElementById("design");
  if (!form || !("content" in document.createElement("template")) || !form.classList || !form.closest) return;
  form.className += " js";
  var next = +form.getAttribute("data-next") || 0, dirty = false, sending = false;
  function q(sel, el) { return (el || document).querySelector(sel); }
  function qa(sel, el) { return Array.prototype.slice.call((el || document).querySelectorAll(sel)); }
  function touch() { dirty = true; q(".unsaved").hidden = false; }
  form.addEventListener("input", touch);
  form.addEventListener("change", touch);
  window.addEventListener("beforeunload", function (e) { if (dirty && !sending) { e.preventDefault(); e.returnValue = ""; } });
  q("#discard").addEventListener("click", function (e) { if (dirty && !confirm({{t "Throw away your unsaved changes?"}})) e.preventDefault(); else dirty = false; });

  // ---- module and menu rows: order, remove, add
  function rows(list) { return qa(".modrow", list); }
  function refresh(list) { // the empty note and the "add" control of a one-module area
    var n = rows(list).length, card = list.parentNode;
    var empty = q(".empty", card); if (empty) empty.hidden = n > 0;
    var add = q(".addmod", card); if (add && list.getAttribute("data-max")) add.hidden = n >= +list.getAttribute("data-max");
  }
  function clone(id) { // a row template with a fresh index in its field names
    var tpl = document.getElementById(id);
    if (!tpl) return null;
    var frag = document.importNode(tpl.content, true), row = q(".modrow", frag), i = next++;
    qa("[name]", row).forEach(function (el) { el.name = el.name.replace("__I__", i); });
    return row;
  }
  form.addEventListener("click", function (e) {
    var b = e.target.closest("[data-act],[data-menu],[data-pick],.preset");
    if (!b) return;
    var row = b.closest(".modrow"), list = row && row.parentNode;
    switch (b.getAttribute("data-act")) {
      case "up": if (row.previousElementSibling) list.insertBefore(row, row.previousElementSibling); touch(); return;
      case "down": if (row.nextElementSibling) list.insertBefore(row.nextElementSibling, row); touch(); return;
      case "remove":
        if (row.getAttribute("data-confirm") && !confirm({{t "Remove this module and its text?"}})) return;
        list.removeChild(row); refresh(list); touch(); return;
    }
    switch (b.getAttribute("data-menu")) {
      case "page":
        var sel = q("[name=menu_add_page]"), opt = sel && sel.options[sel.selectedIndex];
        if (!opt || !opt.value) return;
        var pr = clone("tpl-menu-page");
        q("[data-field=page]", pr).value = opt.value; q(".modname", pr).textContent = opt.text;
        q("#menulist").appendChild(pr); sel.removeChild(opt); sel.selectedIndex = 0;
        q(".nopages", sel.parentNode).hidden = sel.options.length > 1;
        refresh(q("#menulist")); touch(); return;
      case "link":
        var lab = q("[name=menu_add_label]"), url = q("[name=menu_add_url]");
        if (!lab.value.trim() || !url.value.trim()) { (lab.value.trim() ? url : lab).focus(); return; }
        var lr = clone("tpl-menu-link");
        q("[data-field=label]", lr).value = lab.value.trim(); q("[data-field=url]", lr).value = url.value.trim();
        q("#menulist").appendChild(lr); lab.value = url.value = "";
        refresh(q("#menulist")); touch(); return;
    }
    if (b.className.indexOf("preset") >= 0) { // fill the colour inputs; nothing is saved yet
      var c = JSON.parse(b.getAttribute("data-colors"));
      for (var k in c) { var inp = q("[name=" + k + "]", form); if (inp) inp.value = c[k]; }
      q("[name=link_hover_custom]").checked = q("[name=nav_hover_custom]").checked = false;
      touch(); return;
    }
    pickAction(b);
  });
  form.addEventListener("change", function (e) {
    var t = e.target;
    if (t.getAttribute("data-add") && t.value) { // a chosen kind becomes a row at once
      var list = q(".modlist", t.closest(".arealist")), row = clone("tpl-" + list.getAttribute("data-area") + "-" + t.value);
      if (row) { list.appendChild(row); var d = q("details", row); if (d) d.open = true; refresh(list); }
      t.selectedIndex = 0;
    }
    if (t.getAttribute("data-area")) q(".arealist[data-area=" + t.getAttribute("data-area") + "]").classList.toggle("area-off", !t.checked);
  });
  // a heading or text typed into a row shows in its folded summary
  form.addEventListener("input", function (e) {
    var t = e.target, row = t.closest(".modrow");
    if (!row || !t.getAttribute("data-sum")) return;
    var s = q(".modsum", row); if (s) s.textContent = t.value.replace(/\s+/g, " ").slice(0, 60);
  });
  qa(".modlist").forEach(refresh);
  // the column diagram follows the width boxes
  function widths() {
    var l = +q("[name=left_width]").value || 0, r = +q("[name=right_width]").value || 0, m = 100 - l - r;
    q(".lay-left").style.width = l + "%"; q(".lay-right").style.width = r + "%"; q(".lay-main").style.width = m + "%";
    q(".lay-left .pct").textContent = l; q(".lay-right .pct").textContent = r; q(".lay-main .pct").textContent = m;
  }
  q("[name=left_width]").addEventListener("input", widths);
  q("[name=right_width]").addEventListener("input", widths);
  // the side index marks the section in view
  var cards = qa(".card[id]", form), links = qa(".sidenav a"), spy;
  function section() {
    var y = window.pageYOffset + 120, at = cards[0];
    cards.forEach(function (c) { if (c.offsetTop <= y) at = c; });
    return at.id;
  }
  function mark() { var id = section(); links.forEach(function (a) { a.className = a.getAttribute("href") === "#" + id ? "active" : ""; }); }
  window.addEventListener("scroll", function () { clearTimeout(spy); spy = setTimeout(mark, 80); });
  mark();

  form.addEventListener("submit", function () {
    sending = true;
    qa(".modlist").forEach(function (list) { rows(list).forEach(function (r, i) { q(".pos", r).value = i; }); });
    q("[name=at]").value = section(); // so the page comes back to the section in view
  });

  // ---- the image library panel: one shared panel, fetched page by page
  var panel = document.getElementById("picker"), pick = null, page = 1, filter = "", timer;
  if (!window.fetch) { qa(".imagepick .jsonly").forEach(function (el) { el.hidden = true; }); qa(".imagepick select").forEach(function (el) { el.className = ""; }); return; }
  function pickAction(b) {
    var act = b.getAttribute("data-pick"), ip = b.closest(".imagepick");
    if (act === "open") { pick = ip; panel.hidden = false; q("input", panel).value = filter = ""; load(1); q("input", panel).focus(); }
    else if (act === "clear") { choose(ip, "none", ""); }
  }
  panel.addEventListener("click", function (e) {
    var b = e.target.closest("[data-pick],.pick");
    if (!b) return;
    if (b.className.indexOf("pick") === 0) { choose(pick, b.getAttribute("data-id"), b.getAttribute("data-name")); panel.hidden = true; return; }
    switch (b.getAttribute("data-pick")) {
      case "close": panel.hidden = true; break;
      case "prev": load(page - 1); break;
      case "next": load(page + 1); break;
    }
  });
  panel.addEventListener("keydown", function (e) { if (e.key === "Escape") panel.hidden = true; });
  q("input", panel).addEventListener("input", function () { clearTimeout(timer); timer = setTimeout(function () { filter = q("input", panel).value.trim(); load(1); }, 250); });
  function load(n) {
    var url = "/b/" + form.getAttribute("data-sub") + "/files?kind=image&p=" + n + (filter ? "&q=" + encodeURIComponent(filter) : "");
    fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" }).then(function (r) { return r.json(); }).then(function (d) {
      page = d.page;
      var grid = q(".picks", panel); grid.innerHTML = "";
      (d.files || []).forEach(function (f) {
        var b = document.createElement("button"), img = document.createElement("img"), s = document.createElement("span");
        b.type = "button"; b.className = "pick"; b.setAttribute("data-id", f.id); b.setAttribute("data-name", f.filename);
        img.loading = "lazy"; img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + f.id; img.alt = "";
        s.className = "name"; s.textContent = f.filename;
        b.appendChild(img); b.appendChild(s); grid.appendChild(b);
      });
      q(".pnone", panel).hidden = !!(d.files && d.files.length);
      q(".pnum", panel).textContent = d.last > 1 ? d.page + " / " + d.last : "";
      q("[data-pick=prev]", panel).disabled = d.page <= 1; q("[data-pick=next]", panel).disabled = d.page >= d.last;
    });
  }
  function choose(ip, id, name) { // the select stays the value the form sends
    var sel = q("select", ip), pv = q(".preview", ip), found = false;
    for (var i = 0; i < sel.options.length; i++) if (sel.options[i].value === id) found = true;
    if (!found) { var o = document.createElement("option"); o.value = id; o.textContent = name; sel.appendChild(o); }
    sel.value = id;
    pv.innerHTML = id === "none" ? '<span class="swatch">&times;</span>' : "";
    if (id !== "none") { var img = document.createElement("img"); img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + id; img.alt = ""; pv.appendChild(img); }
    touch();
  }
})();
</script>
{{end}}

{{/* One area's modules: the list, its empty note and the "add" select. */}}
{{define "arealist"}}{{$r := .root}}{{$area := .area}}{{$rows := index $r.Data.rows $area}}{{$single := index $r.Data.single $area}}
<div class="arealist{{if not ($r.Data.theme.AreaOn $area)}} area-off{{end}}" data-area="{{$area}}">
  {{if $single}}<h4>{{t (index $r.Data.areaNames $area)}}</h4>{{end}}
  {{with .hint}}<p class="muted small">{{.}}</p>{{end}}
  <ul class="modlist plain" data-area="{{$area}}"{{if $single}} data-max="1"{{end}}>
    {{range $rows}}{{template "modrow" (dict "i" .I "m" .M "pos" .Pos "root" $r)}}{{end}}
  </ul>
  <p class="muted small empty"{{if $rows}} hidden{{end}}>{{if $single}}{{t "Nothing extra."}}{{else if eq $area "header"}}{{t "Nothing here yet."}}{{else}}{{t "Nothing here yet — this area is not shown until you add a module."}}{{end}}</p>
  <div class="addmod"{{if and $single $rows}} hidden{{end}}>
    <label>{{if $single}}{{t "Add custom HTML"}}{{else}}{{t "Add a module"}}{{end}}<br><select name="add.{{$area}}" data-add="1"><option value="">—</option>{{range index $r.Data.kinds $area}}<option value="{{.}}">{{t (index $r.Data.names .)}}</option>{{end}}</select></label>
  </div>
</div>{{end}}

{{/* One module row. .i is the field index (or __I__ in a template), .m the module. */}}
{{define "modrow"}}{{$i := .i}}{{$m := .m}}{{$r := .root}}
<li class="modrow" data-kind="{{$m.Kind}}"{{if $m.Body}} data-confirm="1"{{end}}>
  <input type="hidden" name="mod.{{$i}}.id" value="{{$m.ID}}"><input type="hidden" name="mod.{{$i}}.area" value="{{$m.Area}}"><input type="hidden" name="mod.{{$i}}.kind" value="{{$m.Kind}}">
  <span class="order"><button type="button" class="mini jsonly" data-act="up" title="{{t "Move up"}}">&#9650;</button><button type="button" class="mini jsonly" data-act="down" title="{{t "Move down"}}">&#9660;</button><input type="number" class="nojs pos" name="mod.{{$i}}.pos" value="{{.pos}}" min="0" title="{{t "Position"}}"></span>
  <span class="modname">{{t (index $r.Data.names $m.Kind)}}</span>
  {{if and (eq $m.Kind "logo") (not $r.Data.theme.Logo)}}<span class="tag off">{{t "no logo chosen"}}</span> <a class="small" href="#logo">{{t "pick one"}}</a>{{end}}
  <span class="modact"><label class="check nojs"><input type="checkbox" name="mod.{{$i}}.del"> {{t "Remove"}}</label><button type="button" class="mini danger jsonly" data-act="remove" title="{{t "Remove"}}">&#10005;</button></span>
  {{if modsettings $m}}<details class="modset">
    <summary>{{t "Settings"}} <span class="muted modsum">{{modsummary $m}}</span></summary>
    {{if or (ne $m.Kind "html") (and (ne $m.Area "above") (ne $m.Area "below"))}}{{if ne $m.Kind "text"}}
    <label>{{t "Heading"}} <span class="muted">({{t "optional"}})</span><br><input name="mod.{{$i}}.title" value="{{$m.Title}}" maxlength="120" data-sum="1"></label>
    {{end}}{{end}}
    {{if eq $m.Kind "recent"}}
    <div class="row"><label>{{t "How many posts"}}<br><select name="mod.{{$i}}.count">{{range $n := $r.Data.counts}}<option value="{{$n}}"{{if eq $n $m.Count}} selected{{end}}>{{$n}}</option>{{end}}</select></label></div>
    <p class="muted small">{{t "The newest published posts from every page of your blog, newest first."}}</p>
    {{else if eq $m.Kind "archive"}}
    <p class="muted small">{{t "Every published post grouped by year and month, newest first. Years and months fold open and shut; the latest year starts open."}}</p>
    {{else if eq $m.Kind "sitemap"}}
    <p class="muted small">{{t "Links to every page of your blog."}}</p>
    {{else if eq $m.Kind "tags"}}
    <div class="row"><label>{{t "How many tags"}}<br><select name="mod.{{$i}}.count"><option value="0"{{if eq $m.Count 0}} selected{{end}}>{{t "All"}}</option>{{range $n := $r.Data.tagCounts}}<option value="{{$n}}"{{if eq $n $m.Count}} selected{{end}}>{{$n}}</option>{{end}}</select></label></div>
    <p class="muted small">{{t "Your tags with the number of posts in each, most used first. Only published posts count."}}</p>
    {{else if eq $m.Kind "tagcloud"}}
    <p class="muted small">{{t "Every tag in alphabetical order, bigger the more posts use it."}}</p>
    {{else if eq $m.Kind "search"}}
    <p class="muted small">{{t "A box that searches the published posts of every page by title and text; the results open on your blog’s search page. Case does not matter, and several words find posts that contain them in that order, with anything in between."}}</p>
    {{else if eq $m.Kind "html"}}
    <label>HTML<br><textarea name="mod.{{$i}}.body" rows="6" class="mono" spellcheck="false" placeholder="&lt;p&gt;{{t "Hello!"}}&lt;/p&gt;" data-sum="1">{{$m.Body}}</textarea></label>
    <p class="muted small">{{t "Put into your page exactly as written — embeds, badges and scripts all work. Anything broken here (an unclosed tag, say) can break the page around it, so check your blog after saving. 20 KB at most."}}</p>
    {{else if eq $m.Kind "text"}}
    <label>{{t "Text"}}<br><textarea name="mod.{{$i}}.body" rows="3" placeholder="{{t "© 2026 Me"}}" data-sum="1">{{$m.Body}}</textarea></label>
    <p class="muted small">{{t "Plain text; each line becomes its own paragraph."}}</p>
    {{end}}
  </details>{{end}}
</li>{{end}}

{{/* One menu entry: a page (fixed) or a link (text and address editable). */}}
{{define "menurow"}}{{$i := .i}}{{$it := .item}}
<li class="modrow menurow">
  <input type="hidden" name="menu.{{$i}}.id" value="{{$it.ID}}">
  <span class="order"><button type="button" class="mini jsonly" data-act="up" title="{{t "Move up"}}">&#9650;</button><button type="button" class="mini jsonly" data-act="down" title="{{t "Move down"}}">&#9660;</button><input type="number" class="nojs pos" name="menu.{{$i}}.pos" value="{{.pos}}" min="0" title="{{t "Position"}}"></span>
  {{if $it.PageID}}<input type="hidden" name="menu.{{$i}}.page" value="{{deref64 $it.PageID}}" data-field="page"><span class="modname">{{$it.PageTitle}}</span> <span class="tag">{{t "page"}}</span>
  {{else}}<span class="tag">{{t "link"}}</span><span class="linkfields"><input name="menu.{{$i}}.label" value="{{$it.Label}}" maxlength="60" placeholder="{{t "Text"}}" data-field="label"><input name="menu.{{$i}}.url" value="{{$it.URL}}" maxlength="500" placeholder="https://example.org" data-field="url"></span>{{end}}
  <span class="modact"><label class="check nojs"><input type="checkbox" name="menu.{{$i}}.del"> {{t "Remove"}}</label><button type="button" class="mini danger jsonly" data-act="remove" title="{{t "Remove"}}">&#10005;</button></span>
</li>{{end}}