{{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}}