{{define "admin_settings.html"}}{{template "admin_base.html" .}}{{end}}
{{define "title"}}Admin — Settings{{end}}
{{define "content"}}
  <h2>Settings</h2>
  {{if .Success}}<p class="success">Settings saved.</p>{{end}}
  <form method="POST" action="/admin/settings" class="form">
    <label for="blog_title">blog title</label>
    <input type="text" id="blog_title" name="blog_title" value="{{.BlogTitle}}" required>
    <label for="blog_description">blog description</label>
    <input type="text" id="blog_description" name="blog_description" value="{{.BlogDescription}}">
    <label for="nav_links">navigation links (format: [label](url) [label2](url2))</label>
    <textarea id="nav_links" name="nav_links" class="nav-links-input">{{.NavLinksRaw}}</textarea>
    <label for="favicon_url">favicon URL (leave empty for default)</label>
    <input type="text" id="favicon_url" name="favicon_url" value="{{.FaviconURL}}" placeholder="https://example.com/favicon.png">
    <label for="og_image_url">default OG image URL (used when posts don't have their own)</label>
    <input type="text" id="og_image_url" name="og_image_url" value="{{.OGImageURL}}" placeholder="https://example.com/og.png">
    <label for="default_location">default location for weather metadata</label>
    <input type="text" id="default_location" name="default_location" value="{{.DefaultLocation}}" placeholder="lat,long">
    <label for="intro_content">intro content (markdown, shown on homepage — use &#123;&#123;latest_posts&#125;&#125; to embed recent posts)</label>
    <textarea id="intro_content" name="intro_content" class="post-content">{{.IntroContent}}</textarea>
    <div class="switch-row">
      <label class="switch">
        <input type="checkbox" id="custom_css_toggle" {{if .CustomCSS}}checked{{end}}>
        <span class="switch-slider"></span>
      </label>
      <span class="switch-label">custom stylesheet</span>
    </div>
    <div id="custom_css_section" {{if not .CustomCSS}}class="hidden"{{end}}>
      <label for="custom_css">custom CSS (overrides default styles)</label>
      <textarea id="custom_css" name="custom_css" class="post-content">{{if .CustomCSS}}{{.CustomCSS}}{{else}}{{.DefaultCSS}}{{end}}</textarea>
    </div>
    <label for="custom_header">custom header (markdown or HTML, shown above nav on all pages)</label>
    <textarea id="custom_header" name="custom_header" class="nav-links-input">{{.CustomHeader}}</textarea>
    <label for="custom_footer">custom footer (markdown or HTML, shown at bottom of all pages)</label>
    <textarea id="custom_footer" name="custom_footer" class="post-content">{{.CustomFooter}}</textarea>
    <button type="submit">save</button>
  </form>
  <h3>Data Export</h3>
  <div class="form-actions">
    <a href="/admin/downloads/posts" class="btn">download posts</a>
    <a href="/admin/downloads/uploads" class="btn">download uploads</a>
  </div>
  <script>
    var toggle = document.getElementById('custom_css_toggle');
    var section = document.getElementById('custom_css_section');
    var cssTextarea = document.getElementById('custom_css');
    toggle.addEventListener('change', function() {
      section.classList.toggle('hidden', !this.checked);
    });
    document.querySelector('form').addEventListener('submit', function() {
      if (!toggle.checked) { cssTextarea.value = ''; }
    });
  </script>
{{end}}