<!DOCTYPE html>
<html lang="en">

<%- include('../header') %>

<body>

  <%- include('../navigation')  %>

  <%- include('../message')  %>

  <% if (!article) { var article = { id: '' } } %>

  <section class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-half">
                <!-- Article Form -->
                <form id="articleForm" action="<%= article.id ? `/my-articles/${article.id}/edit` : '/my-articles/new' %>" method="POST">
                  <div class="field">
                    <label class="label">Headline</label>
                    <div class="control">
                      <input class="input" type="text" name="headline" placeholder="Enter headline" required <% if(article) { %> value="<%= article.headline %>" <% } %> >
                    </div>
                  </div>
                  <div class="field">
                    <label class="label">Sub-header</label>
                    <div class="control">
                      <input class="input" type="text" name="subhead" placeholder="Enter sub-header" required <% if(article) { %> value="<%= article.subhead %>" <% } %> >
                    </div>
                  </div>
                  <div class="field">
                    <label class="label">Article Image URL</label>
                    <div class="control">
                      <input class="input" type="text" name="image" placeholder="Enter image URL" required <% if(article) { %> value="<%= article.image %>" <% } %> >
                    </div>
                  </div>
                  <div class="field">
                    <label class="label">Content</label>
                    <div class="control">
                      <textarea class="textarea" id="articleContent" name="content" required><% if(article) { %><%= article.content %><% } %></textarea>
                    </div>
                  </div>
                  <div class="field is-grouped">
                    <div class="control">
                      <button type="button" onclick="submitArticleForm()" class="button is-link">Save</button>
                    </div>
                    <% if (article) { %>
                    <div class="control">
                        <button type="button" onclick="deleteArticle()" class="button is-danger">Delete</button>
                    </div>
                    <% } %>
                    <div class="control">
                      <a href="/my-articles" class="button is-link is-light">Cancel</a>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
  </section>

  <!-- Initialize TinyMCE -->
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss markdown',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
      ],
      ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
    });

    function submitArticleForm() {
      const content = tinymce.get('articleContent').getContent();
      document.getElementById('articleContent').value = content;
      document.getElementById('articleForm').submit();
    }

    function deleteArticle() {
      if (confirm("Are you sure you want to delete this article?")) {
        const form = document.getElementById('articleForm');
        form.action = '/my-articles/<%= article.id %>/delete';
        form.method = 'POST';
        form.submit();
      }
    }
  </script>

  <%- include('../footer') %>
  </body>
</html>
