extends ../layouts/main
block vendorcss
  link(rel='stylesheet', href=`/cropperjs/cropper.min.css?v=${pkg.version}`)
block vendorjs
  script(src=`/cropperjs/cropper.min.js?v=${pkg.version}`)

block content
  
  include ../components/file-upload-image
  - var actionUrl = post ? `/post/${post._id}` : `/post`;

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

          div(class="uk-width-1-1 uk-width-1-3@m")
            .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="slug").uk-form-label URL slug
              -
                var postSlug;
                if (post) {
                  postSlug = post.slug.split('-');
                  postSlug.pop();
                  postSlug = postSlug.join('-');
                }
              input(id="slug", name="slug", type="text", placeholder= "Enter post URL slug", value= post ? postSlug : undefined).uk-input
              .uk-text-small The slug is used in the link to the page https://#{site.domain}/post/#{post ? post.slug : 'your-slug-here'}
            .uk-margin
              label(for="tags").uk-form-label Post tags
              input(id="tags", name="tags", placeholder= "Enter a comma-separated list of tags", value= (post.tags || [ ]).join(', ')).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.uk-button-primary= 'Update post'
            .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' : false) Archived
            .uk-margin
              div(uk-grid).uk-grid-small
                .uk-width-auto
                  label
                    input(id="enable-comments", name="enableComments", type="checkbox", checked= post ? post.flags.enableComments : true).uk-checkbox
                    |  Enable comments
                .uk-width-auto
                  label
                    input(id="is-featured", name="isFeatured", type="checkbox", checked= post ? post.flags.isFeatured : false).uk-checkbox
                    |  Featured

      if post
        .uk-margin
          label(for="post-image-file").uk-form-label Feature Image
          +renderFileUploadImage(
            `/post/${post._id}/image`,
            'post-image-upload',
            'post-image-file',
            'responsive',
            `/img/default-poster.jpg`,
            post.image,
            { aspectRatio: 16 / 9 },
          )

block viewjs
  script(src="/tinymce/tinymce.min.js")
  script.
    const useDarkMode = document.body.classList.contains('dtp-dark');
    window.addEventListener('dtp-load', async ( ) => {
      const toolbarItems = [
        'undo redo',
        'blocks visualblocks',
        'bold italic backcolor',
        'alignleft aligncenter alignright alignjustify',
        'bullist numlist outdent indent removeformat',
        'link image media code',
        'help'
      ];
      const pluginItems = [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
        'preview', 'anchor', 'searchreplace', 'visualblocks', 'code',
        'fullscreen', 'insertdatetime', 'media', 'table', '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' },
        ],
        convert_urls: false,
        skin: useDarkMode ? "oxide-dark" : "oxide",
        content_css: useDarkMode ? "dark" : "default",
      });

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