{% extends "base.html" %}

{% block title %}{{ post.title }} - FastDjango Blog{% endblock %}

{% block content %}
<article class="max-w-3xl mx-auto">
    <!-- Post Header -->
    <header class="mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">{{ post.title }}</h1>
        <div class="flex items-center text-gray-500 space-x-4">
            {% if post.author %}
            <span>By {{ post.author.username }}</span>
            {% endif %}
            <span>{{ post.created_at|datetime('%B %d, %Y') }}</span>
            <span>{{ post.views }} views</span>
        </div>
    </header>

    <!-- Post Content -->
    <div class="prose prose-lg max-w-none bg-white rounded-lg shadow-md p-8 mb-8">
        {{ post.content|safe }}
    </div>

    <!-- Comments Section -->
    <section class="bg-white rounded-lg shadow-md p-8" x-data="comments()">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Comments</h2>

        <!-- Comment List -->
        <div class="space-y-6 mb-8">
            {% for comment in comments %}
            <div class="border-b pb-4 last:border-b-0">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-gray-800">{{ comment.name }}</span>
                    <span class="text-sm text-gray-500">{{ comment.created_at|datetime('%b %d, %Y') }}</span>
                </div>
                <p class="text-gray-600">{{ comment.content }}</p>
            </div>
            {% else %}
            <p class="text-gray-500">No comments yet. Be the first!</p>
            {% endfor %}
        </div>

        <!-- New Comment Form -->
        <form @submit.prevent="submitComment()" class="space-y-4">
            <h3 class="text-lg font-semibold text-gray-800">Leave a Comment</h3>

            <div class="grid grid-cols-2 gap-4">
                <input
                    type="text"
                    x-model="form.name"
                    placeholder="Your name"
                    required
                    class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                <input
                    type="email"
                    x-model="form.email"
                    placeholder="Your email"
                    required
                    class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
            </div>

            <textarea
                x-model="form.content"
                placeholder="Your comment..."
                required
                rows="4"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
            ></textarea>

            <button
                type="submit"
                :disabled="submitting"
                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
            >
                <span x-show="!submitting">Post Comment</span>
                <span x-show="submitting">Posting...</span>
            </button>

            <p x-show="success" class="text-green-600">Comment submitted! Awaiting approval.</p>
            <p x-show="error" class="text-red-600" x-text="error"></p>
        </form>
    </section>
</article>

<script>
function comments() {
    return {
        form: { name: '', email: '', content: '' },
        submitting: false,
        success: false,
        error: '',

        async submitComment() {
            this.submitting = true;
            this.success = false;
            this.error = '';

            try {
                const response = await fetch('/blog/api/posts/{{ post.slug }}/comments', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.form),
                });

                if (response.ok) {
                    this.success = true;
                    this.form = { name: '', email: '', content: '' };
                } else {
                    const data = await response.json();
                    this.error = data.detail || 'An error occurred';
                }
            } catch (e) {
                this.error = 'Failed to submit comment';
            }

            this.submitting = false;
        }
    };
}
</script>
{% endblock %}