extends ../layouts/main
block content

  - var actionUrl = post ? `/admin/post/${post._id}` : `/admin/post`;

  form(method="POST", action= actionUrl).uk-form
    div(uk-grid).uk-grid-small
      .uk-width-2-3
        .uk-margin
          label(for="content").uk-form-label Post body
          textarea(id="content", name="content", rows="4").uk-textarea= post ? post.content : undefined

      .uk-width-1-3
        .uk-margin
          label(for="title").uk-form-label Post title
          input(id="title", name="title", type="text", placeholder= "Enter post title", value= post ? post.title : undefined).uk-input
        .uk-margin
          label(for="summary").uk-form-label Post summary
          textarea(id="summary", name="summary", rows="4", placeholder= "Enter post summary (text only, no HTML)").uk-textarea= post ? post.summary : undefined
        div(uk-grid)
          .uk-width-auto
            button(type="submit").uk-button.dtp-button-primary= post ? 'Update post' : 'Create post'
          .uk-width-auto
            a(href="/admin/post").uk-button.dtp-button-default Cancel
        .uk-margin
          label(for="status").uk-form-label Status
          select(id="status", name="status").uk-select
            option(value="draft", selected= post ? post.status === 'draft' : true) Draft
            option(value="published", selected= post ? post.status === 'published' : false) Published
            option(value="archived", selected= post ? post.status === 'archived' : true) Archived

block viewjs
  script(src="/tinymce/tinymce.min.js")
  script.
    window.addEventListener('dtp-load', async ( ) => {
      const toolbarItems = [
        'undo redo',
        'formatselect visualblocks',
        'bold italic backcolor',
        'alignleft aligncenter alignright alignjustify',
        'bullist numlist outdent indent removeformat',
        'link image code',
        'help'
      ];
      const pluginItems = [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print',
        'preview', 'anchor', 'searchreplace', 'visualblocks', 'code',
        'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code',
        'help', 'wordcount',
      ]

      const editors = await tinymce.init({
        selector: 'textarea#content',
        height: 500,
        menubar: false,
        plugins: pluginItems.join(' '),
        toolbar: toolbarItems.join('|'),
        branding: false,
        images_upload_url: '/image/tinymce',
        image_class_list: [
          { title: 'Body Image', value: 'dtp-image-body' },
          { title: 'Title Image', value: 'dtp-image-title' },
        ],
        document_base_url: '/post/#{post.slug}',
        convert_urls: false,
      });

      window.dtp.app.editor = editors[0];
    });