create_post.html

{% extends "base.html" %}

{% block title %}Create Post - Blog{% endblock %}

{% block content %}
<div class="create-post-container">
    <h1>Create New Post</h1>
    
    <div id="message" class="message" style="display: none;"></div>
    
    <form id="createPostForm" class="post-form">
        <div class="form-group">
            <label for="title">Post Title</label>
            <input type="text" id="title" name="title" class="form-input" required>
        </div>
        
        <div class="form-group">
            <label for="content">Post Content</label>
            <textarea id="content" name="content" class="form-textarea" rows="10" required></textarea>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Create Post</button>
            <a href="{{ url_for('index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('createPostForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const title = document.getElementById('title').value;
        const content = document.getElementById('content').value;
        const messageDiv = document.getElementById('message');
        
        if (!title || !content) {
            showMessage('Please fill in all fields', 'error');
            return;
        }
        
        try {
            const response = await fetch('/api/posts', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    title: title,
                    content: content
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                showMessage('Post created successfully! Redirecting...', 'success');
                setTimeout(() => {
                    window.location.href = '/';
                }, 1500);
            } else {
                showMessage('Error: ' + data.message, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showMessage('An error occurred. Please try again.', 'error');
        }
    });
    
    function showMessage(message, type) {
        const messageDiv = document.getElementById('message');
        messageDiv.textContent = message;
        messageDiv.className = `message ${type}`;
        messageDiv.style.display = 'block';
        
        if (type === 'success') {
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        }
    }
</script>
{% endblock %}