{% extends "layout.njk" %}
{% block content %}
  <form class="ajax-handling mb-3">
    <div class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
      <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
        <label for="editor" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Post Metadata</label>
        <textarea
          id="editor"
          rows="8"
          class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500
            focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
            dark:focus:ring-blue-500 dark:focus:border-blue-500">{{ metadata }}</textarea>
      </div>
      <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
        <button
          id="submit-metadata"
          type="submit"
          class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
          Update</button>
      </div>
    </div>
  </form>
  <h5>
    <span class="mr-5 text-gray-800">Post Body (<i>read-only</i>)</span>
    <a class="text-blue-700" href="/post/edit/{{ post.id }}">edit here
      <i class="fa-light fa-arrow-right ml-2"></i>
    </a>
  </h5>
  <pre id="post-body"><code class="language-markdown">{{ post.body }}</code></pre>
  <script id="post-data" type="application/json">{{ post | json(2) }}</script>
{% endblock content %}
{% block script %}
  <script src="/js/post/settings.js" type="text/javascript" charset="utf-8"></script>
{% endblock script %}