{% extends "base.html" %}

{% block head %}
  {% include "snippets/blog-imports.html" with editor=1 %}
  <script src="{{ config.services.common.url.pub }}/static/js/base.js?v={{ config.version_str }}"></script>
  <link rel="stylesheet" href="/static/css/ace.css?v={{ config.version_str }}">
  <link rel="stylesheet" href="/static/css/write.css?v={{ config.version_str }}">
{% endblock %}

{% block body %}
  <form method="POST" onsubmit="window.onbeforeunload = null;">
    {% csrf_token %}
    <div id="editable-container">
      <div id="editor-area" class="editor-object" data-editor="ace">
        <div id="ace-editor" class="editor-object"></div>
        <div id="plain-editor" class="editor-object"><textarea required name="raw" maxlength="500000" placeholder="Write here...">{{ repopulate.content }}</textarea></div>
      </div><div class="editor-object"><div id="preview"></div></div>
    </div>

    {% if error %}<p class="error">{{ error }}</p>{% endif %}

    <p>Characters: <b><span id="character-count">0</span>/<span data-localize-number="500000">500000</span></b></p>
    <p><b>Configuration:</b></p>

    <p>
      <input type="checkbox" id="use-plain-editor">
      <label data-fake-checkbox for="use-plain-editor">Use alternate editor</label>
    </p>

    <p>
      <label for="format">Format:</label>
      <select id="format" name="format">
        <option {% if not repopulate.format  or repopulate.format == "markdown" %}selected{% endif %} value="markdown">Markdown</option>
        <option {% if     repopulate.format and repopulate.format == "html"     %}selected{% endif %} value="html"    >Raw HTML</option>
        <option {% if     repopulate.format and repopulate.format == "plain"    %}selected{% endif %} value="plain"   >Plain text (sans-serif)</option>
        <option {% if     repopulate.format and repopulate.format == "mono"     %}selected{% endif %} value="mono"    >Plain text (monospace)</option>
      </select>
    </p>

    <p>
      <label for="title">Title:</label>
      <input maxlength="1000" placeholder="Title..." required name="title" id="title" value="{{ repopulate.title }}">
    </p>

    <p>
      <label for="url">{{ config.services.blog.url.pub }}/blog/{{ username }}/</label><input maxlength="1000" placeholder="blog-url" required name="url" id="url" value="{{ repopulate.url }}">
    </p>

    <p><input type="submit" value="{% if editing %}Confirm Edits{% else %}Create Blog Post{% endif %}"></p>
  </form>

  <script src="/static/js/write.js?v={{ config.version_str }}"></script>
{% endblock %}