{{define "title"}}{{if .Data.post.ID}}{{t "Edit post"}}{{else}}{{t "New post"}}{{end}} · {{.Blog.Title}}{{end}}
{{define "content"}}
<div class="card">
  <h1>{{if .Data.post.ID}}{{t "Edit post"}}{{else}}{{t "New post"}}{{end}}</h1>
  <form method="post" enctype="multipart/form-data">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <label>{{t "Title"}}<br><input name="title" value="{{.Data.post.Title}}" required maxlength="200" autofocus></label>
    <div class="row">
      <label>{{t "Page"}}<br>
        <select name="page_id">{{range .Data.pages}}<option value="{{.ID}}"{{if eq .ID $.Data.post.PageID}} selected{{end}}>{{.Title}}</option>{{end}}</select>
      </label>
      <label>{{t "Address"}} <span class="muted">({{t "optional, made from the title"}})</span><br>
        <input name="slug" value="{{.Data.post.Slug}}" pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?" maxlength="80"></label>
      <label>{{t "Date"}}<br>
        <input type="datetime-local" name="posted_at" value="{{.Data.post.CreatedAt.Format "2006-01-02T15:04"}}" placeholder="YYYY-MM-DD HH:MM"></label>
    </div>
    <label for="post-tags">{{t "Tags"}} <span class="muted">({{t "comma-separated"}})</span><br>
      <input id="post-tags" name="tags" value="{{.Data.tagsText}}" maxlength="900" placeholder="{{t "go, tomatoes, recipes"}}"></label>
    {{if .Data.allTags}}<details class="tagref"><summary>{{tf "Your tags (%d)" (len .Data.allTags)}}</summary>
      <p class="chips">{{range .Data.allTags}}<span class="chip" data-tag="{{.Name}}">{{.Name}}</span> {{end}}</p>
    </details>{{end}}
    <p class="muted small">{{t "Tags on hidden posts are not shown on the blog; a tag nobody uses disappears."}}</p>
    <script>
    // The chips add or remove their tag in the box; without JS they are a plain list to copy from.
    (function () {
      var box = document.getElementById('post-tags'), chips = document.querySelectorAll('.chip');
      if (!box || !chips.length) return;
      function list() { return box.value.split(',').map(function (s) { return s.trim(); }).filter(Boolean); }
      function has(l, t) { t = t.toLowerCase(); return l.some(function (x) { return x.toLowerCase() === t; }); }
      function mark() { var l = list(); for (var i = 0; i < chips.length; i++) chips[i].className = has(l, chips[i].getAttribute('data-tag')) ? 'chip on' : 'chip'; }
      for (var i = 0; i < chips.length; i++) chips[i].onclick = function () {
        var t = this.getAttribute('data-tag'), l = list();
        l = has(l, t) ? l.filter(function (x) { return x.toLowerCase() !== t.toLowerCase(); }) : l.concat([t]);
        box.value = l.join(', '); mark();
      };
      box.addEventListener('input', mark);
      document.querySelector('.tagref').className += ' live'; mark();
    })();
    </script>
    <label for="ed-body">{{t "Content"}} <span class="muted">(Markdown)</span></label>
    {{template "editor" (dict "name" "body" "value" .Data.post.BodyMD "rows" 24 "tall" true "upload" (print "/b/" .Blog.Subdomain "/files/upload") "preview" (print "/b/" .Blog.Subdomain "/preview") "csrf" .CSRF)}}
    <label class="check"><input type="checkbox" name="published"{{if .Data.post.Published}} checked{{end}}> {{t "Visible on the blog"}}</label>
    <p class="actionrow">
      <button type="submit">{{t "Save"}}</button>
      {{if .Data.post.ID}}<a class="btn secondary" href="{{.BlogURL}}/{{.Data.post.PageSlug}}/{{.Data.post.Slug}}" target="_blank">{{t "View post"}} &#8599;</a>{{end}}
      <a href="/b/{{.Blog.Subdomain}}/posts">{{t "Back to posts"}}</a>
    </p>
  </form>
</div>
{{end}}