{% extends 'portfolio/base.html' %}

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

{% block content %}
<!-- Article Header -->
<article class="py-20 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <div class="flex items-center gap-2 text-gray-600 mb-8" data-aos="fade-right">
            <a href="{% url 'portfolio:home' %}" class="hover:text-purple-600 transition">Home</a>
            <i class="fas fa-chevron-right text-sm"></i>
            <a href="{% url 'portfolio:blog_list' %}" class="hover:text-purple-600 transition">Blog</a>
            <i class="fas fa-chevron-right text-sm"></i>
            <span class="text-purple-600">{{ post.title }}</span>
        </div>
        
        <!-- Category & Date -->
        <div class="flex items-center gap-4 mb-4" data-aos="fade-up">
            <span class="bg-purple-100 text-purple-600 px-4 py-1 rounded-full text-sm font-semibold">
                {{ post.category.name }}
            </span>
            <span class="text-gray-500"><i class="far fa-calendar mr-2"></i>{{ post.published_date|date:"F d, Y" }}</span>
            <span class="text-gray-500"><i class="far fa-clock mr-2"></i>{{ post.read_time }} min read</span>
            <span class="text-gray-500"><i class="far fa-eye mr-2"></i>{{ post.views }} views</span>
        </div>
        
        <!-- Title -->
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6" data-aos="fade-up" data-aos-delay="100">
            {{ post.title }}
        </h1>
        
        <!-- Featured Image -->
        <div class="mb-8 rounded-2xl overflow-hidden shadow-2xl" data-aos="zoom-in" data-aos-delay="200">
            <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full hover:scale-105 transition-transform duration-500">
        </div>
        
        <!-- Content -->
        <div class="prose prose-lg max-w-none" data-aos="fade-up" data-aos-delay="300">
            {{ post.content|linebreaks }}
        </div>
        
        <!-- Tags -->
        {% if post.tags %}
        <div class="mt-8 pt-8 border-t" data-aos="fade-up">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Tags</h3>
            <div class="flex flex-wrap gap-2">
                {% for tag in post.get_tags_list %}
                <span class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm hover:bg-purple-100 hover:text-purple-600 transition cursor-pointer">
                    {{ tag }}
                </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <!-- Share -->
        <div class="mt-8 pt-8 border-t" data-aos="fade-up">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Share this post</h3>
            <div class="flex gap-3">
                <a href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}&text={{ post.title }}" target="_blank" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" target="_blank" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri }}&title={{ post.title }}" target="_blank" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                    <i class="fab fa-linkedin-in"></i>
                </a>
            </div>
        </div>
    </div>
</article>

<!-- Comments Section -->
<section class="py-12 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-8" data-aos="fade-up">Comments ({{ comments.count }})</h2>
        
        <!-- Comment Form -->
        <div class="bg-white p-8 rounded-2xl shadow-lg mb-8" data-aos="fade-up">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Leave a Comment</h3>
            <form method="post" class="space-y-4">
                {% csrf_token %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <input type="text" name="name" placeholder="Your Name *" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <input type="email" name="email" placeholder="Your Email *" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <textarea name="comment" rows="4" placeholder="Your Comment *" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
                <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 hover:scale-105 transition-all duration-300">
                    <i class="fas fa-paper-plane mr-2"></i> Submit Comment
                </button>
            </form>
        </div>
        
        <!-- Comments List -->
        {% if comments %}
        <div class="space-y-6">
            {% for comment in comments %}
            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300" data-aos="fade-up" data-aos-delay="{% cycle '0' '100' '200' %}">
                <div class="flex items-start gap-4">
                    <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user text-purple-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-bold text-gray-900">{{ comment.name }}</h4>
                            <span class="text-sm text-gray-500">{{ comment.created_at|date:"M d, Y" }}</span>
                        </div>
                        <p class="text-gray-600">{{ comment.comment }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500 text-center py-8">No comments yet. Be the first to comment!</p>
        {% endif %}
    </div>
</section>

<!-- Related Posts -->
{% if related_posts %}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-8" data-aos="fade-up">Related Posts</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for related in related_posts %}
            <a href="{% url 'portfolio:blog_detail' related.slug %}" class="group">
                <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-3" data-aos="zoom-in" data-aos-delay="{% cycle '0' '100' '200' %}">
                    <img src="{{ related.featured_image.url }}" alt="{{ related.title }}" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="p-6">
                        <span class="text-xs text-purple-600 font-semibold">{{ related.category.name }}</span>
                        <h3 class="text-lg font-bold text-gray-900 mt-2 group-hover:text-purple-600 transition-colors">{{ related.title }}</h3>
                        <p class="text-gray-600 text-sm mt-2">{{ related.excerpt|truncatewords:15 }}</p>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
{% endblock %}