{{define "content"}}
{{$data := .Content}}
<section class="mb-4">
  <div>
    <div class="text-uppercase small fw-semibold text-primary mb-2">Themes</div>
    <h1 class="display-6 fw-bold mb-2">Appearance</h1>
    <p class="text-body-secondary mb-0">Five defaults. Colored themes work in dark or light.</p>
  </div>
</section>

<section class="row g-4">
  <div class="col-12 col-xl-8">
    <article class="card border-0 shadow-sm h-100" id="theme-presets">
      <div class="card-body p-4">
        <h2 class="h4 mb-3">Theme Presets</h2>
        <form method="post" action="/settings/theme">
          <div class="mb-4">
            <label class="form-label d-block">Mode</label>
            <div class="d-flex gap-2 flex-wrap">
              <input type="radio" class="btn-check" name="mode" id="mode-dark" value="dark" {{if eq $data.CurrentMode "dark"}}checked{{end}}>
              <label class="btn btn-outline-secondary" for="mode-dark">Dark</label>
              <input type="radio" class="btn-check" name="mode" id="mode-light" value="light" {{if eq $data.CurrentMode "light"}}checked{{end}}>
              <label class="btn btn-outline-secondary" for="mode-light">Light</label>
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-12 col-md-6 col-xxl-4">
              <input type="radio" class="btn-check" name="theme" id="theme-dark" value="dark" {{if eq $data.CurrentTheme "dark"}}checked{{end}}>
              <label class="theme-card d-block h-100" for="theme-dark">
                <span class="theme-swatch swatch-dark"></span>
                <strong>Dark</strong>
                <small>Neutral dark base</small>
              </label>
            </div>
            <div class="col-12 col-md-6 col-xxl-4">
              <input type="radio" class="btn-check" name="theme" id="theme-light" value="light" {{if eq $data.CurrentTheme "light"}}checked{{end}}>
              <label class="theme-card d-block h-100" for="theme-light">
                <span class="theme-swatch swatch-light"></span>
                <strong>Light</strong>
                <small>Neutral light base</small>
              </label>
            </div>
            <div class="col-12 col-md-6 col-xxl-4">
              <input type="radio" class="btn-check" name="theme" id="theme-green" value="green" {{if eq $data.CurrentTheme "green"}}checked{{end}}>
              <label class="theme-card d-block h-100" for="theme-green">
                <span class="theme-swatch swatch-green"></span>
                <strong>Green</strong>
                <small>Computed green accents</small>
              </label>
            </div>
            <div class="col-12 col-md-6 col-xxl-4">
              <input type="radio" class="btn-check" name="theme" id="theme-red" value="red" {{if eq $data.CurrentTheme "red"}}checked{{end}}>
              <label class="theme-card d-block h-100" for="theme-red">
                <span class="theme-swatch swatch-red"></span>
                <strong>Red</strong>
                <small>Computed red accents</small>
              </label>
            </div>
            <div class="col-12 col-md-6 col-xxl-4">
              <input type="radio" class="btn-check" name="theme" id="theme-blue" value="blue" {{if eq $data.CurrentTheme "blue"}}checked{{end}}>
              <label class="theme-card d-block h-100" for="theme-blue">
                <span class="theme-swatch swatch-blue"></span>
                <strong>Blue</strong>
                <small>Computed blue accents</small>
              </label>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Save Theme</button>
        </form>
      </div>
    </article>
  </div>

  <div class="col-12 col-xl-4">
    <article class="card border-0 shadow-sm h-100">
      <div class="card-body p-4">
        <h2 class="h4 mb-3">Current</h2>
        <div class="theme-preview d-grid gap-3">
          <div class="preview-card"></div>
          <div class="preview-card accent"></div>
          <div class="preview-card dim"></div>
        </div>
        <div class="mt-4 small text-body-secondary">
          Theme: <strong class="text-body-emphasis">{{$data.CurrentTheme}}</strong><br>
          Mode: <strong class="text-body-emphasis">{{$data.CurrentMode}}</strong>
        </div>
      </div>
    </article>
  </div>
</section>
{{end}}
