{% extends "base.html" %}

{% block head %}
  {% include "snippets/blog-imports.html" %}
  <script src="{{ config.services.common.url.pub }}/static/js/base.js?v={{ config.version_str }}"></script>
{% endblock %}

{% block body %}
  <h1>{{ blog.title }}</h1>
  <div><b>By <a href="/blog/{{ blog.u_by.username }}">{{ blog.u_by.username }}</a></b></div>

  <small>
    <span data-timestamp="{{ blog.timestamp }}"></span>
    {% if blog.edited_at %}
      - Edited
      <span data-timestamp="{{ blog.edited_at }}"></span>
    {% endif %}
  </small>

  {% if username == blog.u_by.username %}
    <p><a href="/blog/{{ username }}/{{ blog.url }}/edit/">Edit post</a></p>

    <form method="POST">
      {% csrf_token %}
      <p>
        <input type="checkbox" required id="confirm">
        <label data-fake-checkbox for="confirm">I understand this is irreversible</label><br>
        <input type="submit" value="Delete this post">
      </p>
    </form>
  {% endif %}
  <hr>
  <div id="blog-container" class="inline-block left" data-format="{{ blog.text_format }}" data-raw="{{ blog.content }}"><i>Loading...</i></div>

  <script>
    const blog = document.getElementById("blog-container");
    blog.innerHTML = toHTML(blog.dataset.format, blog.dataset.raw);
  </script>
{% endblock %}