{% extends "blog/base.html" %}
{% load blog_tags %}

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

{% block meta_description %}{{ post.meta_description|default:post.excerpt|default:"Read this blog post" }}{% endblock %}

{% block og_title %}{{ post.title }}{% endblock %}
{% block og_description %}{{ post.meta_description|default:post.excerpt|default:"Read this blog post" }}{% endblock %}
{% block twitter_title %}{{ post.title }}{% endblock %}
{% block twitter_description %}{{ post.meta_description|default:post.excerpt|default:"Read this blog post" }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            <!-- Article Header -->
            <article class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
                {% if post.featured_image %}
                    <div class="w-full h-64 md:h-96 bg-gray-200">
                        <img
                            src="{{ post.featured_image.url }}"
                            alt="{{ post.title }}"
                            class="w-full h-full object-cover"
                        >
                    </div>
                {% endif %}

                <div class="p-8">
                    <!-- Category -->
                    <div class="mb-4">
                        <a href="{{ post.category.get_absolute_url }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-primary-50 text-primary-700 hover:bg-primary-100 transition-colors">
                            {{ post.category.name }}
                        </a>
                    </div>

                    <!-- Title -->
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">
                        {{ post.title }}
                    </h1>

                    <!-- Meta Information -->
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-6 text-sm text-gray-600">
                        <div class="flex items-center space-x-6">
                            <!-- Author -->
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                <span class="font-medium">{{ post.author.get_full_name|default:post.author.username }}</span>
                            </div>

                            <!-- Date -->
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>{{ post.publish_date|date:"F j, Y" }}</span>
                            </div>

                            <!-- Reading Time -->
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>{{ post.content|reading_time }} min read</span>
                            </div>
                        </div>

                        <!-- View Count -->
                        {% view_counter post %}
                    </div>

                    <!-- Tags -->
                    {% if post.tags.all %}
                        <div class="flex flex-wrap gap-2 mb-6">
                            {% for tag in post.tags.all %}
                                <a href="{{ tag.get_absolute_url }}" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                                    #{{ tag.name }}
                                </a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </article>

            <!-- Article Content -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 mb-8">
                <div class="prose prose-lg max-w-none">
                    {{ post.content|ckeditor_content }}
                </div>
            </div>

            <!-- Social Sharing -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Share this post</h3>
                <div class="flex space-x-4">
                    <!-- Twitter -->
                    <a href="https://twitter.com/intent/tweet?text={{ post.title|urlencode }}&url={{ request.build_absolute_uri|urlencode }}"
                       target="_blank"
                       class="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                        </svg>
                        <span>Tweet</span>
                    </a>

                    <!-- LinkedIn -->
                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri|urlencode }}"
                       target="_blank"
                       class="flex items-center space-x-2 px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                        </svg>
                        <span>Share</span>
                    </a>
                </div>
            </div>

            <!-- Navigation -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                {% get_previous_post post as previous_post %}
                {% if previous_post %}
                    <a href="{{ previous_post.get_absolute_url }}" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-all group">
                        <div class="flex items-center space-x-3 text-primary-600 mb-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                            <span class="font-medium">Previous Post</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
                            {{ previous_post.title }}
                        </h3>
                    </a>
                {% endif %}

                {% get_next_post post as next_post %}
                {% if next_post %}
                    <a href="{{ next_post.get_absolute_url }}" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-all group text-right">
                        <div class="flex items-center space-x-3 justify-end text-primary-600 mb-2">
                            <span class="font-medium">Next Post</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
                            {{ next_post.title }}
                        </h3>
                    </a>
                {% endif %}
            </div>

            <!-- Comments Section -->
            {% if comments_enabled %}
                <div id="comments" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Comments ({{ comments|length }})</h3>

                    <!-- Comment Form -->
                    <div class="mb-8">
                        <form method="post" action="{% url 'blog:add_comment' post.id %}" class="space-y-4">
                            {% csrf_token %}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
                                    {{ comment_form.author_name }}
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                                    {{ comment_form.author_email }}
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Website (optional)</label>
                                {{ comment_form.author_website }}
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Comment *</label>
                                {{ comment_form.content }}
                            </div>
                            <button type="submit" class="bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors font-medium">
                                Post Comment
                            </button>
                        </form>
                    </div>

                    <!-- Comments List -->
                    {% if comments %}
                        <div class="space-y-6">
                            {% for comment in comments %}
                                <div class="border-l-4 border-primary-200 pl-4 py-2">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="font-semibold text-gray-900">{{ comment.author_name }}</h4>
                                        <span class="text-sm text-gray-500">{{ comment.created_at|date:"M j, Y" }}</span>
                                    </div>
                                    <p class="text-gray-700">{{ comment.content|linebreaks }}</p>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8 text-gray-500">
                            <p>No comments yet. Be the first to comment!</p>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="lg:w-1/3">
            {% blog_sidebar %}
        </div>
    </div>
</div>
{% endblock %}
