extends ../layouts/main
block content

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

  form(method="POST", action= actionUrl).uk-form
    .uk-margin
      label(for="title").uk-form-label.sr-only Newsletter title
      input(id="title", name="title", type="text", placeholder= "Enter newsletter title", value= newsletter ? newsletter.title : undefined, required).uk-input

    .uk-margin
      label(for="summary").uk-form-label.sr-only Newsletter summary
      textarea(id="summary", name="summary", rows="4", placeholder= "Enter newsletter summary (text only, no HTML)", required).uk-textarea= newsletter ? newsletter.summary : undefined
    
    .uk-margin
      label(for="content-html").uk-form-label.sr-only Newsletter HTML body
      textarea(id="content-html", name="content.html", rows="4").uk-textarea= newsletter ? newsletter.content.html : undefined
    
    .uk-margin
      button(type="button", onclick="return dtp.app.copyHtmlToText(event, 'content-text');").uk-button.dtp-button-default Copy HTML to Text
    
    .uk-margin
      label(for="content-text").uk-form-label.sr-only Newsletter text body
      textarea(id="content-text", name="content.text", rows="4", placeholder= "Enter text-only version of newsletter.", required).uk-textarea= newsletter ? newsletter.content.text : undefined
    
    button(type="submit").uk-button.dtp-button-primary= newsletter ? 'Update newsletter' : 'Save newsletter'

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',
        'help', 'wordcount',
      ]

      const editors = await tinymce.init({
        selector: 'textarea#content-html',
        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];
    });