{% extends 'schasite/authenticated_base.html' %}
{% load static  %}

{% block pagetitle %}
<title>Create Post | SCHA</title>
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="display-6">Create New Post</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'posts' %}">Community Posts</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Create Post</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-pencil me-2"></i>New Community Post</h3>
                    </div>
                    <div class="card-body">
                        <form id="createPostForm" method="POST" action='{% url "posts_create" %}' class="needs-validation" novalidate>
                            {% csrf_token %}
                            {% if community_post.errors %}
                                <div class="alert alert-danger">
                                    <i class="bi bi-info-circle-fill me-2"></i>
                                    <p> Need to fix the following errors</p>
                                    {{ community_post.errors | safe }}
                                </div>
                                {% endif %}
                            <div class="mb-3">
                                <label for="title" class="form-label">Title*</label>
                                
                                <input type="text" class="form-control" value='{{ community_post.title.value|default_if_none:"" }}' name="title" id="title" required>
                                <div class="invalid-feedback">
                                    Please provide a title for your post.
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="category" class="form-label">Category*</label>
                                <select class="form-select" name="category" id="category" required>
                                    <option value='{{ community_post.category.value|default_if_none:"" }}' selected disabled>Select a category</option>
                                    <option>Announcement</option>
                                    <option>Discussion</option>
                                    <option>For Sale</option>
                                    <option>Help Needed</option>
                                    <option>Event</option>
                                    <option>Other</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a category.
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="content" class="form-label">Content*</label>
                                <textarea class="form-control" value='{{ community_post.content.value|default_if_none:"" }}' name="content" id="content" rows="6" required></textarea>
                                <div class="invalid-feedback">
                                    Please provide content for your post.
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="postImage" class="form-label">Image (optional)</label>
                                <input class="form-control" type="file" id="postImage" accept="image/*">
                                <div class="form-text">
                                    Maximum file size: 5MB. Allowed formats: JPG, PNG, GIF.
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="notifyMembers">
                                    <label class="form-check-label" for="notifyMembers">
                                        Notify all members via email about this post
                                    </label>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a href="posts_create" class="btn btn-outline-secondary me-md-2">Cancel</a>
                                <button type="submit" class="btn btn-success">Post to Community</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Form validation
        const form = document.getElementById('createPostForm');
        
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            if (form.checkValidity()) {
                // In a real implementation, this would submit the post
                alert('Post created successfully (simulated)');
                window.location.href = "../index.html";
            }
            
            form.classList.add('was-validated');
        }, false);
        
        // Image preview functionality would go here
    });
</script>
{% endblock %}