{% extends "layout.html" %}
{% set title = fm.title %}
{% block scripts %}
<script src="/_/vendor/editor.js"></script>
<script type="module" src="/_/admin.js"></script>
{% endblock %}
{% block content %}
<form id="post-form" class="editor" method="post" action="/s/{{ site.id }}/edit/{{ path }}"
      data-site="{{ site.id }}" data-path="{{ path }}">
  <input type="hidden" name="version" value="{{ version }}">
  <div class="editor-bar">
    <a href="/s/{{ site.id }}/" class="muted">← Posts</a>
    {% if fm.draft %}<span class="badge badge--draft" data-status-badge>draft</span>{% else %}<span class="badge badge--published" data-status-badge>published</span>{% endif %}
    <span class="save-status muted" data-save-status role="status" aria-live="polite"></span>
    <span class="spacer"></span>
    <a class="button" href="/s/{{ site.id }}/history/{{ path }}" data-path-link="/s/{{ site.id }}/history/{path}">History</a>
    <a class="button hide-narrow" href="/s/{{ site.id }}/preview/{{ path }}" data-path-link="/s/{{ site.id }}/preview/{path}" target="_blank" rel="noopener">Full preview ↗</a>
    <a class="button hide-narrow" href="{{ public_origin }}{{ url }}" data-origin="{{ public_origin }}" target="_blank" rel="noopener" data-live-link{% if fm.draft or not public_origin %} hidden{% endif %}>View live ↗</a>
    <button class="button" type="submit" name="action" value="save" title="Ctrl/⌘ + S">Save</button>
    <button class="button button--primary" type="submit" name="action" value="publish" data-publish{% if not fm.draft %} hidden{% endif %}>Publish</button>
    <button class="button" type="submit" name="action" value="unpublish" data-unpublish{% if fm.draft %} hidden{% endif %}>Unpublish</button>
  </div>

  <div class="restore-banner notice" data-restore-banner hidden>
    This browser has unsaved changes from <span data-restore-time></span><span data-restore-older hidden>, made on an older version of this post (restoring replaces the newer one)</span>.
    <button class="link-button" type="button" data-restore-apply>Restore them</button> ·
    <button class="link-button" type="button" data-restore-discard>Discard</button>
  </div>

  <input class="title-input" type="text" name="title" value="{{ fm.title }}" placeholder="Title" required aria-label="Title">

  <details class="settings"{% if fm.title == "Untitled" %} open{% endif %}>
    <summary>Post settings</summary>
    <div class="settings-grid">
      <label class="field"><span>Section</span>
        <select name="kind">
          {% for k in kinds %}<option value="{{ k }}"{% if k == kind %} selected{% endif %}>{{ k | capitalize }}</option>{% endfor %}
        </select>
      </label>
      <label class="field"><span>URL path</span>
        <input type="text" name="slug" value="{% if slug is not startingwith('untitled-') %}{{ slug }}{% endif %}" placeholder="generated from the title" data-slug spellcheck="false" autocapitalize="off">
        <small class="muted">Leave empty to generate from the title. Changing it on a published post breaks old links.</small>
      </label>
      <label class="field field--wide"><span>Description</span>
        <textarea name="description" rows="2">{{ fm.description }}</textarea>
      </label>
      <label class="field"><span>Tags</span>
        <input type="text" name="tags" value="{{ fm.tags | join(', ') }}" placeholder="go, programming" autocapitalize="off">
      </label>
      <label class="field"><span>Published date</span>
        <input type="date" name="date" value="{{ fm.date }}" required>
      </label>
      <label class="field"><span>Updated date</span>
        <input type="date" name="updated" value="{{ fm.updated or '' }}">
      </label>
      <div class="field checks">
        <label><input type="checkbox" name="wip" value="1"{% if fm.wip %} checked{% endif %}> Work-in-progress notice</label>
        <label><input type="checkbox" name="toc" value="1"{% if fm.toc %} checked{% endif %}> Table of contents</label>
      </div>
    </div>
  </details>

  <div class="editor-tools">
    <div class="segmented" role="group" aria-label="Layout">
      <button type="button" data-view="write">Write</button>
      <button type="button" data-view="split" class="hide-narrow">Split</button>
      <button type="button" data-view="preview">Preview</button>
    </div>
    <label class="upload-button button">Insert file…<input type="file" data-upload hidden multiple accept="image/*,video/mp4,video/webm,video/quicktime,.pdf,.zip,.txt"></label>
    <span class="spacer"></span>
    <label class="muted small"><input type="checkbox" data-vim> Vim keys</label>
  </div>

  <div class="panes" data-panes>
    <div class="pane pane--editor">
      <div data-editor></div>
      <textarea name="body" data-body hidden>{{ body }}</textarea>
    </div>
    <div class="pane pane--preview">
      <iframe data-preview sandbox="allow-scripts" src="/s/{{ site.id }}/preview/{{ path }}" title="Preview" loading="lazy"></iframe>
    </div>
  </div>
</form>

<form method="post" action="/s/{{ site.id }}/delete/{{ path }}" class="danger-zone"
      data-confirm="Move “{{ fm.title }}” to the trash? Its history is kept.">
  <button class="link-button danger" type="submit">Delete this post</button>
</form>
{% endblock %}