{% extends "base.html" %}

{% block title %}{% if is_edit %}Edit Post{% else %}New Post{% endif %} - Blog{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/easymde.min.css" data-testid="easymde-stylesheet">
{% endblock %}

{% block content %}
<section class="page-header" data-testid="page-header-form">
    <h1 class="page-title" data-testid="page-title-form">
        {% if is_edit %}Edit Post{% else %}Create New Post{% endif %}
    </h1>
</section>

<form
    method="POST"
    action="{% if is_edit %}/web/posts/{{ post.slug }}/edit{% else %}/web/posts/new{% endif %}"
    class="card"
    data-testid="form-post"
>
    <div class="card-body" data-testid="form-post-body">
        <div class="form-group" data-testid="form-group-title">
            <label for="title" class="form-label form-label-required" data-testid="label-title">
                Title
            </label>
            <input
                type="text"
                id="title"
                name="title"
                class="input input-lg"
                value="{% if post %}{{ post.title }}{% endif %}"
                placeholder="Enter post title"
                required
                data-testid="input-title"
            >
            <span class="form-hint" data-testid="hint-title">A catchy title for your post</span>
        </div>

        <div class="form-group" data-testid="form-group-content">
            <label for="content" class="form-label form-label-required" data-testid="label-content">
                Content
            </label>
            <textarea
                id="content"
                name="content"
                rows="12"
                placeholder="Write your post content here..."
                required
                data-testid="textarea-content"
            >{% if post %}{{ post.content }}{% endif %}</textarea>
            <span class="form-hint" data-testid="hint-content">The main content of your post. Markdown is supported.</span>
        </div>
        
        <div class="form-group" data-testid="form-group-tags">
            <label for="tags" class="form-label" data-testid="label-tags">
                Tags
            </label>
            <input 
                type="text" 
                id="tags" 
                name="tags" 
                class="input"
                value="{% if post %}{{ post.tags|join(', ') }}{% endif %}"
                placeholder="python, fastapi, tutorial"
                data-testid="input-tags"
            >
            <span class="form-hint" data-testid="hint-tags">Comma-separated list of tags</span>
        </div>
        
    </div>
    
    <div class="card-footer" data-testid="form-post-footer">
        <div class="flex justify-between items-center" data-testid="form-actions">
            <a href="{% if is_edit %}/web/posts/{{ post.slug }}{% else %}/web/{% endif %}" class="btn" data-testid="btn-cancel">
                Cancel
            </a>
            
            <div class="flex gap-2" data-testid="form-submit-actions">
                <button type="submit" name="action" value="draft" class="btn" data-testid="btn-save-draft">
                    Save as Draft
                </button>
                <button type="submit" name="action" value="publish" class="btn btn-primary" data-testid="btn-publish-post">
                    {% if is_edit %}Update Post{% else %}Publish Post{% endif %}
                </button>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script src="/static/js/easymde.min.js" data-testid="easymde-script"></script>
<script>
(function() {
    'use strict';
    var easyMDE = new EasyMDE({
        element: document.getElementById('content'),
        spellChecker: false,
        status: false,
        minHeight: '300px',
        placeholder: 'Write your post content here...',
        toolbar: [
            'bold', 'italic', 'heading', '|',
            'code', 'quote', 'unordered-list', 'ordered-list', '|',
            'link', 'image', 'table', 'horizontal-rule', '|',
            'preview', 'side-by-side', 'fullscreen', '|',
            'guide'
        ]
    });
    var form = document.querySelector('form[data-testid="form-post"]');
    if (form) {
        form.addEventListener('submit', function() {
            easyMDE.toTextArea();
        });
    }
})();
</script>
{% endblock %}