{% extends "layouts/default.html" %}
{% block title %}TinyMCE{% endblock %}
{% block content %}
<div class="container">
  <form id="tinymce-form" name="tinymce-form" method="post" action="/tinymce">
    <input type="hidden" name="mode" value="create">
    {{ token | safe }}
    <div class="columns">
      <div class="column is-half">
        <h1 class="title">TinyMCE</h1>
      </div>
      <div class="column is-half">
        <div class="field is-horizontal">
          <div class="field-label">
            <label for="filename" class="label">File Name</label>
          </div>
          <div class="field-body">
            <div class="field is-grouped">
              <div class="control is-expanded">
                <input class="input" id="filename" name="filename" type="text" value="{% if file.name %}{{ file.name }}{% endif %}" required>
              </div>
              <div class="control">
                <button class="button is-primary" type="submit">Process</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="field">
      <div class="field">
        <div class="control">
          <textarea class="textarea" id="default" name="default">{{ file.body | default:"Next, use our Get Started docs to setup Tiny!" }}</textarea>
        </div>
      </div>
    </div>
  </form>
</div>
<script id="script" src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  var tinymce_init = (() => {
      var only_once = false;
      return function () {
          if (!only_once) {
              only_once = true;
              setTimeout(tinymce.init({
                  selector: 'textarea#default',
                  auto_focus: 'default',
                  highlight_on_focus: true,
                  skin: 'oxide-dark',
                  content_css: 'dark',
                  min_height: 500,
                  plugins: 'accordion lists advlist anchor autolink autoresize autosave charmap code codesample directionality emoticons fullscreen help image insertdatetime link media nonbreaking pagebreak preview quickbars save searchreplace table template visualblocks visualchars wordcount',
                  toolbar1: 'bold italic underline strikethrough | alignleft aligncenter alignright alignjustify alignnone | styles | emoticons',
                  toolbar2: 'cut copy paste pastetext | bullist numlist | outdent indent | redo undo blockquote | link unlink openlink anchor image',
                  toolbar3: 'table | hr removeformat visualblocks | subscript superscript | charmap media insertdatetime | visualchars nonbreaking pagebreak fullscreen | searchreplace | help code',
                  promotion: false,
              }), 1000);
          }
      }
  })();
  ['DOMContentLoaded', 'htmx:afterRequest'].forEach(function(_) {
      tinymce_init();
  });
  htmx.onLoad(function (_) {
      tinymce_init();
  });
</script>
{% endblock %}