{% include 'header.html' %}
{% if error %}
<div class="error">{{ _(error) }}</div>
{% endif %}
{% if request.args.get('error') %}
<div class="error">{{ _(request.args.get('error')) }}</div>
{% endif %}
{% if message %}
<div class="message">{{ _(message) }}</div>
{% endif %}
<div><a href="/dashboard" class="action">Dashboard</a> > <a href="/dashboard/edit/{{ blog.name }}" class="action">{{ blog.title }}</a> > {% if post %}{{ post.title }}{% else %}{{ _('new_post') }}{% endif %}</div>
<div class="container-row-fluid">
    <h3>{% if post %}{{ _('editing_post') }}: {{ post.title }}{% else %}{{ _('new_post_on') }}: {{ blog.name }}{% endif %}</h3>
    <a target="_blank" href="/dashboard/preview" class="btn purple" id="preview">{{ _('preview') }}</a>
</div>
<article class="main-content">
<form method="post" action="{% if post %}/dashboard/edit/{{ blog.name }}/{{ post.link }}{% else %}/dashboard/post/{{ blog.name }}{% endif %}">
    <input type="text" name="title" placeholder="{{ _('title') }}" style="max-width: 100%; height: 50px; font-size: 25px; margin-bottom: 1rem;" value="{% if post %}{{ post.title }}{% endif %}">
    <div style="display: flex; flex-direction: row; gap: 5px; align-items: center;">
        <a href="#" class="small btn empty" data-action="h1" title="Heading 1">H1</a>
        <a href="#" class="small btn empty" data-action="h2" title="Heading 2">H2</a>
        <a href="#" class="small btn empty" data-action="h3" title="Heading 3">H3</a>
        <a href="#" class="small btn empty" data-action="bold" title="Bold text"><b>B</b></a>
        <a href="#" class="small btn empty" data-action="italic" title="Italic text"><i>I</i></a>
        <a href="#" class="small btn empty" data-action="underline" title="Underlined text"><u>U</u></a>
        <a href="#" class="small btn empty" data-action="strikethrough" title="Strikethrough text"><del>C</del></a>
        <a href="#" class="small btn empty" data-action="quote" title="Quote/Blockquote">Q</a>
        <a href="#" class="small btn empty" data-action="link" title="Insert link">🔗</a>
        <a href="https://main.openwrite.io/markdown-syntax" style="text-decoration: none; color: #eeeeee; margin-left: auto" target="_blank" title="View Markdown syntax guide">Markdown syntax</a>
    </div>
    <textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" name="content" class="post_content" placeholder="{{ _('content') }}">{% if post %}{{ post.content_raw }}{% endif %}</textarea>
    <input type="hidden" name="content_raw" id="content_raw" value="{% if post %}{{ post.content_raw }}{% endif %}">
    
    <div style="margin-top: 1rem;">
        <label for="tags" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">{{ _('tags') }}({{ _('optional') }}):</label>
        <input type="text" id="tags" name="tags" 
               placeholder="music, games, web-dev (separate with commas)" 
               style="width: 100%; padding: 0.5rem; border: 1px solid #333; border-radius: 4px; background-color: #1a1a1a; color: #eee;"
               value="{% if existing_tags %}{{ existing_tags | join(', ') }}{% endif %}">
        <div style="font-size: 0.9em; color: #999; margin-top: 0.25rem;">
            {{ _('add-tags-help') }}
        </div>
    </div>
    
    <div style="display: flex; justify-content: space-between">
        <div style="display: flex; gap: 0.5rem;">
           <input type="checkbox" name="author" id="author" value="1" {% if post %} {% if post.author == "1" %}checked="true"{% endif %} {% else %} checked="true" {% endif %}>
           <label for="author" style="text-align: left">{{ _('include_author') }}?</label>
        </div>
        {% if g.upload_enabled %}
        <a href="#" id="uploadLink" class="btn empty">📎 {{ _('upload_image') }}</a>
        <input type="file" id="fileInput" style="display: none;">
        {% endif %}
    </div>
<div style="display: flex; gap: 0.5rem;">
    <input type="checkbox" name="feed" id="feed" value="1" {% if post %} {% if post.feed == "1" %}checked="true"{% endif %} {% else %} checked="true" {% endif %}>
<label for="feed" style="text-align: left">{{ _('include_in_feed') }}?</label>
</div>
    {% if not post %}
    <input type="submit" value="{{ _('save-as-draft') }}" name="draft" id="draft" class="btn empty">
    {% endif %}
    <input type="submit" value="{% if post %}{% if post.isdraft == "0" %}{{ _('save') }}{% else %}{{ _('save-draft') }}{% endif %}{% else %}{{ _('create') }}{% endif %}" class="btn purple" id="{% if post %}{% if post.isdraft == "0" %}submit{% else %}draft{% endif %}{% else %}submit{% endif %}">
    {% if post %}{% if post.isdraft == "0" %}<input type="hidden" id="draft">{% endif %}{% endif %}
    {% if post %}
    {% if post.isdraft == "1" %}
    <input type="submit" value="{{ _('publish') }}" class="btn purple" id="submit">
    {% else %}
    {% endif %}
    {% endif %}
  </form>
</article>
<script nonce="{{ g.nonce }}">
    var converter = new showdown.Converter();
    converter.setOption('emoji', true);
    converter.setOption('noHeaderId', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    converter.setOption('strikethrough', true);
    converter.setOption('simplifiedAutoLink', true);

    document.getElementById('preview').addEventListener('click', function(e) {
        e.preventDefault();

        const form = document.querySelector('form');
        const title = form.querySelector('input[name="title"]').value;
        const content_raw = form.querySelector('textarea[name="content"]').value;
        const author = form.querySelector("#author").checked;

        const content = converter.makeHtml(content_raw);

        const tempForm = document.createElement('form');
        tempForm.method = 'POST';
        tempForm.action = '/dashboard/preview';
        tempForm.target = '_blank';
        const date = getUTCDate();
        const inputs = {
            title: title,
            content: content,
            author: author ? '1' : '0',
            blog_name: "{{ blog.name }}",
            blog_title: "{{ blog.title }}",
            theme: "{{ blog.theme }}",
            date: date
        };

        for (let key in inputs) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = inputs[key];
            tempForm.appendChild(input);
        }

        document.body.appendChild(tempForm);
        tempForm.submit();
        document.body.removeChild(tempForm);
    });

    document.getElementById('submit').addEventListener('click', function(e) {
        e.preventDefault();

        const form = document.querySelector('form');
        const title = form.querySelector('input[name="title"]').value;
        const content_raw = form.querySelector('textarea[name="content"]').value;
        const author = form.querySelector("#author").checked;
        const feed = form.querySelector("#feed").checked;
        const tags = form.querySelector('input[name="tags"]').value;

        const content = converter.makeHtml(content_raw);

        const tempForm = document.createElement('form');
        tempForm.method = 'POST';
        tempForm.action = '{% if post %}/dashboard/edit/{{ blog.name }}/{{ post.link }}{% else %}/dashboard/post/{{ blog.name }}{% endif %}';
        const date = new Date();
        const inputs = {
            title: title,
            content_raw: content_raw,
            content: content,
            author: author ? '1' : '0',
            feed: feed ? '1' : '0',
            tags: tags,
            draft: '0',
            {% if post %}{% if post.isdraft == "1" %}publish: '1'{% else %}publish: '0'{% endif %}{% endif %}
        };

        for (let key in inputs) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = inputs[key];
            tempForm.appendChild(input);
        }

        document.body.appendChild(tempForm);
        tempForm.submit();
        document.body.removeChild(tempForm);
    });

    document.getElementById('draft').addEventListener('click', function(e) {
        e.preventDefault();

        const form = document.querySelector('form');
        const title = form.querySelector('input[name="title"]').value;
        const content_raw = form.querySelector('textarea[name="content"]').value;
        const author = form.querySelector("#author").checked;
        const feed = form.querySelector("#feed").checked;
        const tags = form.querySelector('input[name="tags"]').value;

        const content = "none"
        const tempForm = document.createElement('form');
        tempForm.method = 'POST';
        tempForm.action = '{% if post %}/dashboard/edit/{{ blog.name }}/{{ post.link }}{% else %}/dashboard/post/{{ blog.name }}{% endif %}';
        const date = new Date();
        const inputs = {
            title: title,
            content_raw: content_raw,
            content: content,
            draft: '1',
            author: author ? '1' : '0',
            feed: feed ? '1' : '0',
            tags: tags,
            content: content,
        }
      
        for (let key in inputs) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = inputs[key];
            tempForm.appendChild(input);
        }

        document.body.appendChild(tempForm);
        tempForm.submit();
        document.body.removeChild(tempForm);

      });

    const editor = document.querySelector('textarea[name="content"]');
    const uploadLink = document.getElementById("uploadLink");
    const fileInput = document.getElementById("fileInput");

    editor.addEventListener("paste", async ev => {
        const clipboard = ev.clipboardData || window.clipboardData;
        if (!clipboard) return;

        for (let i = 0; i < clipboard.items.length; i++) {
            const item = clipboard.items[i];
            if (item.kind === "file" && item.type.startsWith("image/")) {
                ev.preventDefault();
                const file = item.getAsFile();
                const formData = new FormData();
                formData.append("file", file);
                const cursorPos = editor.selectionStart;
                try {
                    document.body.classList.add('wait');
                    const res = await fetch('/upload_image', {
                        method: "POST",
                        body: formData
                    });
                    const data = await res.json();
                    if (!res.ok) throw new Error(data.error || "Upload failed");

                    const markdown = `![alt text](${data.url})`;
                    const text = editor.value;
                    editor.value = text.slice(0, cursorPos) + markdown + text.slice(cursorPos);
                    editor.selectionStart = editor.selectionEnd = cursorPos + markdown.length;
                    editor.focus();
                } catch (err) {
                    alert("Upload failed: " + err.message);
                } finally {
                    document.body.classList.remove('wait');
                }
            }
        }
    });

    uploadLink.addEventListener("click", function(e) {
      e.preventDefault(); 
      fileInput.click(); 
    });

    fileInput.addEventListener("change", async () => {
      const file = fileInput.files[0];
      if (!file) return;

      const formData = new FormData();
      formData.append("file", file);
      const cursorPos = editor.selectionStart;

      try {
        const res = await fetch("/upload_image", {
          method: "POST",
          body: formData
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || "Upload failed");

        const markdown = `![alt text](${data.url})`;

        const text = editor.value;
        editor.value = text.slice(0, cursorPos) + markdown + text.slice(cursorPos);
        editor.selectionStart = editor.selectionEnd = cursorPos + markdown.length;
        editor.focus();

      } catch (err) {
        alert("Upload failed: " + err.message);
      } finally {
        fileInput.value = ""; 
      }
    });

document.querySelectorAll('[data-action]').forEach(btn => {
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    const action = this.getAttribute('data-action');

    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const selected = editor.value.slice(start, end);

    let modified = selected;
    let cursorOffset = 0;
    
    switch (action) {
      case "bold":
        modified = `**${selected}**`;
        cursorOffset = selected ? 0 : 2;
        break;
      case "italic":
        modified = `*${selected}*`;
        cursorOffset = selected ? 0 : 1;
        break;
      case "underline":
        modified = `<u>${selected}</u>`; 
        cursorOffset = selected ? 0 : 3;
        break;
      case "strikethrough":
        modified = `~~${selected}~~`;
        cursorOffset = selected ? 0 : 2;
        break;
      case "quote":
        modified = selected.split("\n").map(line => `> ${line}`).join("\n");
        cursorOffset = selected ? 0 : 2;
        break;
      case "h1":
        modified = `# ${selected}`;
        cursorOffset = selected ? 0 : 2;
        break;
      case "h2":
        modified = `## ${selected}`;
        cursorOffset = selected ? 0 : 3;
        break;
      case "h3":
        modified = `### ${selected}`;
        cursorOffset = selected ? 0 : 4;
        break;
      case "link":
        const url = prompt("Enter the URL:");
        if (url) {
          if (selected) {
        modified = `[${selected}](${url})`;
        cursorOffset = 0;
          } else {
        modified = `[link description](${url})`;
        cursorOffset = 1;
          }
        }
        break;
    }

    editor.setRangeText(modified, start, end, "end");
    
    if (!selected && cursorOffset > 0) {
      editor.selectionStart = editor.selectionEnd = start + cursorOffset;
    }
    
    editor.focus();
  });
});

</script>
{% include 'footer.html' %}