{{define "title"}}Design · {{.Blog.Title}}{{end}}
{{define "content"}}
{{$t := .Data.theme}}
<div class="pagehead">
  <h1>Design</h1>
  <p class="lead muted">Changes are live as soon as you save; refresh <a href="{{.BlogURL}}" target="_blank">your blog &#8599;</a> to see them.</p>
</div>
<p class="jumps"><a href="#schemes">Schemes</a><a href="#background">Background</a><a href="#text">Text</a><a href="#header">Header</a><a href="#menu">Menu</a><a href="#posts">Posts</a><a href="#footer">Footer</a><a href="#logo">Logo &amp; icon</a></p>
<p class="muted small">What appears where — header, columns, footer and their modules — is arranged on the <a href="/b/{{.Blog.Subdomain}}/layout">Layout</a> tab.</p>

<div class="card" id="schemes">
  <h2>Colour schemes</h2>
  <p class="muted small">A quick start: applying a scheme sets every colour below and saves immediately. Images, fonts and layout are kept.</p>
  <form method="post" action="/b/{{.Blog.Subdomain}}/design/preset" class="presets">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    {{range .Data.presets}}<button type="submit" name="preset" value="{{.Key}}" class="preset" title="Apply {{.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">{{.Name}}</span>
    </button>
    {{end}}
  </form>
</div>

<form method="post" action="/b/{{.Blog.Subdomain}}/design" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="{{.CSRF}}">

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

<div class="card" id="text">
  <h2>Text &amp; content area</h2>
  <div class="row">
    <label>Content background<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label>
    <label>Text colour<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label>
    <label>Link colour<br><input type="color" name="link_color" value="{{$t.LinkColor}}"></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">Change colour when the mouse is over a link</label>
    <label class="hover-color">Hover colour<br><input type="color" name="link_hover" value="{{if $t.LinkHover}}{{$t.LinkHover}}{{else}}{{$t.LinkColor}}{{end}}"></label>
  </div>
  <div class="row">
    <label>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>Heading font<br><select name="heading_font">
      <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>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>Text size<br><select name="font_size">
      <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>Small</option>
      <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>Normal</option>
      <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>Large</option>
    </select></label>
    <label>Underline links<br><select name="link_underline">
      <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>Always</option>
      <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>Only on hover</option>
      <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>Never</option>
    </select></label>
  </div>
  <div class="row">
    <label>Box style<br><select name="content_style">
      <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>Card (shadow, rounded corners)</option>
      <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>Flat</option>
    </select></label>
    <label>Padding <span class="muted">(inside the box)</span><br><select name="content_padding">
      <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>Compact</option>
      <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>Normal</option>
      <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>Roomy</option>
    </select></label>
  </div>
  <p class="muted small">The content spans the whole page; how much of it the posts get is set by the column widths on the <a href="/b/{{.Blog.Subdomain}}/layout#columns">Layout</a> tab.</p>
</div>

<div class="card" id="header">
  <h2>Header</h2>
  <div class="row">
    <label>Background<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
    <label>Text colour<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label>
    <label>Alignment<br><select name="header_align">
      <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>Left</option>
      <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>Centred</option>
    </select></label>
    <label>Image height<br><select name="header_image_height">
      <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>Short</option>
      <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>Medium</option>
      <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>Tall</option>
    </select></label>
  </div>
  <p class="muted small">The title, logo and menu are header modules — add, remove and order them on the <a href="/b/{{.Blog.Subdomain}}/layout#header">Layout</a> tab. The banner below is shown across the top of the header whenever one is chosen.</p>
  {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" .Blog.Subdomain "images" .Data.images "label" "Header image (banner)")}}
</div>

<div class="card" id="menu">
  <h2>Menu</h2>
  <p class="muted small">Which links the menu shows, and where it sits, is set on the <a href="/b/{{.Blog.Subdomain}}/layout#menu">Layout</a> tab. Here you choose how it looks.</p>
  <div class="row">
    <label>Alignment <span class="muted">(menu in the header)</span><br><select name="nav_align">
      <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>Left</option>
      <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>Centred</option>
      <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>Right</option>
    </select></label>
    <label>Link style<br><select name="nav_style">
      <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>Normal</option>
      <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>Uppercase, spaced</option>
    </select></label>
  </div>
  <h3>Menu colours</h3>
  <div class="row">
    <label>Background<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
    <label>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">Change colour when the mouse is over a link</label>
    <label class="hover-color">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="posts">
  <h2>Posts &amp; dates</h2>
  <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> Show the date on posts</label>
  <div class="row">
    <label>Date format<br><select name="date_format">
      <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>12 September 2026</option>
      <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>12 Sep 2026</option>
      <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>2026-09-12</option>
    </select></label>
  </div>
</div>

<div class="card" id="footer">
  <h2>Footer</h2>
  <p class="muted small">The footer text, RSS link and other footer modules live on the <a href="/b/{{.Blog.Subdomain}}/layout#footer">Layout</a> tab.</p>
  <div class="row">
    <label>Background<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label>
    <label>Text colour<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label>
  </div>
</div>

<div class="card" id="logo">
  <h2>Logo &amp; site icon</h2>
  <div class="row">
    <label>Logo size<br><select name="logo_size">
      <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>Small (48 px tall)</option>
      <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>Medium (80 px)</option>
      <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>Large (140 px)</option>
    </select></label>
  </div>
  {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" .Blog.Subdomain "images" .Data.images "label" "Logo" "hint" "Shown wherever you place a Logo module (Layout tab); it links to your front page.")}}
  {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" .Blog.Subdomain "images" .Data.images "label" "Favicon" "hint" "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">Save design</button>
  <a class="btn secondary" href="{{.BlogURL}}" target="_blank">View blog &#8599;</a>
</div>
</form>

<details class="help reset">
  <summary>Reset to defaults</summary>
  <p>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/{{.Blog.Subdomain}}/design/reset">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <button type="submit" class="danger">Reset everything</button>
  </form>
</details>
{{end}}