{{define "title"}}Design · {{.Blog.Title}}{{end}}
{{define "content"}}
{{$t := .Data.theme}}
<h1>Design</h1>
<p class="muted">Save, then refresh <a href="{{.BlogURL}}" target="_blank">your blog &#8599;</a> to see the result. Colours are hex values like <code>#336699</code>.</p>
<form method="post" action="/b/{{.Blog.Subdomain}}/design" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="{{.CSRF}}">

<div class="card">
  <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 "images" .Data.images "label" "Background image")}}
</div>

<div class="card">
  <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="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>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>Width<br><select name="content_width">
      <option value="narrow"{{if eq $t.ContentWidth "narrow"}} selected{{end}}>Narrow</option>
      <option value="medium"{{if eq $t.ContentWidth "medium"}} selected{{end}}>Medium</option>
      <option value="wide"{{if eq $t.ContentWidth "wide"}} selected{{end}}>Wide</option>
    </select></label>
  </div>
</div>

<div class="card">
  <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>
  </div>
  <label class="check"><input type="checkbox" name="header_show_title"{{if $t.HeaderShowTitle}} checked{{end}}> Show blog title and tagline in the header</label>
  {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "images" .Data.images "label" "Header image (banner)")}}
</div>

<div class="card">
  <h2>Menu</h2>
  <div class="row">
    <label>Position<br><select name="nav_position">
      <option value="below-header"{{if eq $t.NavPosition "below-header"}} selected{{end}}>Below the header</option>
      <option value="top-bar"{{if eq $t.NavPosition "top-bar"}} selected{{end}}>Bar at the very top</option>
      <option value="left-sidebar"{{if eq $t.NavPosition "left-sidebar"}} selected{{end}}>Sidebar on the left</option>
    </select></label>
    <label>Background<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
    <label>Text colour<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
  </div>
  <label class="check"><input type="checkbox" name="nav_show_home"{{if $t.NavShowHome}} checked{{end}}> Include the home page in the menu</label>
</div>

<div class="card">
  <h2>Footer</h2>
  <label>Footer text<br><input name="footer_text" value="{{$t.FooterText}}" maxlength="2000" placeholder="© 2026 Me"></label>
  <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>

<p><button type="submit">Save design</button></p>
</form>
{{end}}