{% extends 'website/base.html' %}
{% load static %}

{% block title %}{{ post.meta_title|default:post.title }} | {{ settings.site_name }}{% endblock %}

{% block extra_head %}
    {# Meta tags, Open Graph, Twitter Card, JSON-LD (same as before) #}
    <meta name="description" content="{{ post.meta_description|default:post.excerpt|striptags }}">
    <meta name="author" content="{{ post.author|default:settings.site_name }}">
    <link rel="canonical" href="{{ request.build_absolute_uri }}">
    
    <meta property="og:title" content="{{ post.meta_title|default:post.title }}">
    <meta property="og:description" content="{{ post.meta_description|default:post.excerpt|striptags }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:site_name" content="{{ settings.site_name }}">
    {% if post.featured_image %}
        <meta property="og:image" content="{{ post.featured_image.url }}">
        <meta property="og:image:alt" content="{{ post.title }}">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
    {% endif %}
    {% if post.published_at %}
        <meta property="article:published_time" content="{{ post.published_at|date:'c' }}">
        <meta property="article:modified_time" content="{{ post.updated_at|date:'c' }}">
    {% endif %}
    <meta property="article:author" content="{{ post.author|default:settings.site_name }}">
    <meta property="article:section" content="{{ post.category.name|default:'Blog' }}">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ post.meta_title|default:post.title }}">
    <meta name="twitter:description" content="{{ post.meta_description|default:post.excerpt|striptags }}">
    {% if post.featured_image %}
        <meta name="twitter:image" content="{{ post.featured_image.url }}">
    {% endif %}
    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "{{ post.title|escapejs }}",
        "description": "{{ post.excerpt|default:post.meta_description|striptags|escapejs }}",
        {% if post.featured_image %}"image": "{{ post.featured_image.url }}",{% endif %}
        "datePublished": "{{ post.published_at|date:'c' }}",
        "dateModified": "{{ post.updated_at|date:'c' }}",
        "author": {
            "@type": "Person",
            "name": "{{ post.author|default:'Admin'|escapejs }}"
        },
        "publisher": {
            "@type": "Organization",
            "name": "{{ settings.site_name|escapejs }}",
            "logo": {"@type": "ImageObject", "url": "{% static 'img/logo.png' %}"}
        },
        "mainEntityOfPage": {"@type": "WebPage", "@id": "{{ request.build_absolute_uri }}"}
    }
    </script>

    <style>
    /* ============================================
       BLOG POST STYLES – COMPATIBLE WITH FIXED HEADER
    ============================================ */
    
    :root {
        --color-primary: #c9720f;
        --color-primary-dark: #1f3a5f;
        --color-primary-light: #eef1f6;
        --color-text: #101828;
        --color-text-light: #3f4759;
        --color-bg: #ffffff;
        --color-bg-alt: #f4f5f7;
        --color-border: #e7e9ed;
        --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.05);
        --shadow-focus: 0 0 0 3px rgba(46, 125, 94, 0.3);
        --radius-card: 32px;
        --radius-button: 60px;
        --transition: all 0.2s ease;
        --header-height: 80px;  /* adjust if your header height differs */
    }
    
    /* Main section – extra padding to clear fixed header */
    .blog-post-section {
        background: #c9720f;
        padding: calc(var(--header-height) + 40px) 0 80px;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Ensure any anchor links (like #comment-123) don't hide under header */
    *:target {
        scroll-margin-top: calc(var(--header-height) + 20px);
    }
    
    /* Main Content Card */
    .post-card {
        background: var(--color-bg);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        padding: 0 32px 48px;
        transition: var(--transition);
    }
    
    @media (max-width: 768px) {
        .post-card {
            padding: 0 20px 40px;
        }
        .blog-post-section {
            padding-top: calc(var(--header-height) + 20px);
        }
    }
    
    /* Featured Image */
    .post-featured-image {
        margin: 0 -32px 40px;
        overflow: hidden;
    }
    @media (max-width: 768px) {
        .post-featured-image {
            margin: 0 -20px 32px;
        }
    }
    .post-featured-image img {
        width: 100%;
        height: auto;
        max-height: 550px;
        object-fit: cover;
        display: block;
    }
    
    /* Meta, Title, Excerpt – same as before */
    .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 18px;
    }
    .post-meta li {
        font-size: 0.9rem;
        color: var(--color-text-light);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .post-meta i {
        color: var(--color-primary);
        font-size: 0.95rem;
        width: 18px;
    }
    
    .post-title {
        font-size: clamp(28px, 5vw, 44px);
        font-weight: 700;
        color: #0a0f1a;
        margin-bottom: 20px;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }
    
    .post-excerpt {
        font-size: 1.2rem;
        color: #3b6ea5;
        border-left: 4px solid var(--color-primary);
        padding-left: 24px;
        margin: 24px 0 32px;
        font-weight: 450;
        line-height: 1.5;
    }
    
    .post-body {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--color-text);
    }
    .post-body img {
        max-width: 100%;
        height: auto;
        border-radius: 20px;
        margin: 24px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    .post-body p { margin-bottom: 1.5rem; }
    .post-body h2, .post-body h3, .post-body h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: #1f3a5f;
    }
    .post-body blockquote {
        border-left: 5px solid var(--color-primary);
        background: var(--color-primary-light);
        padding: 20px 30px;
        margin: 28px 0;
        border-radius: 18px;
        font-style: italic;
        color: #1f3a5f;
    }
    .post-body code {
        background: var(--color-primary-light);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.9em;
        color: #1f3a5f;
    }
    .post-body pre {
        background: #101828;
        color: #e7e9ed;
        padding: 18px;
        border-radius: 20px;
        overflow-x: auto;
    }
    .post-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 28px 0;
        overflow-x: auto;
        display: block;
    }
    .post-body th, .post-body td {
        border: 1px solid #d7dce3;
        padding: 12px 16px;
    }
    
    /* Gallery */
    .post-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin: 40px 0;
    }
    .gallery-item {
        border-radius: 24px;
        overflow: hidden;
        transition: transform 0.25s ease;
    }
    .gallery-item:hover { transform: scale(1.02); }
    .gallery-item img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }
    
    /* Tags & Share */
    .post-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin: 48px 0 32px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
        gap: 20px;
        background: #ffffff;
    }
    .tags-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .tags-list span {
        font-weight: 600;
        margin: 0;
        color: #0a0f1a;
    }
    .tags-list a {
        background: var(--color-primary-light);
        padding: 6px 18px;
        border-radius: 40px;
        font-size: 0.85rem;
        text-decoration: none;
        color: #1f3a5f;
        transition: var(--transition);
    }
    .tags-list a:hover, .tags-list a:focus {
        background: var(--color-primary);
        color: white;
        outline: none;
    }
    .share-buttons {
        display: flex;
        gap: 12px;
    }
    .share-buttons a, .share-buttons__copy {
        background: var(--color-primary-light);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #1f3a5f;
        font-size: 1.1rem;
        transition: var(--transition);
        text-decoration: none;
        cursor: pointer;
        border: none;
    }
    .share-buttons a:hover, .share-buttons a:focus,
    .share-buttons__copy:hover, .share-buttons__copy:focus {
        background: var(--color-primary);
        color: white;
        transform: translateY(-2px);
        outline: none;
    }
    
    /* Post Navigation */
    .post-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin: 40px 0 20px;
        padding: 28px 0 10px;
        border-top: 1px solid var(--color-border);
    }
    .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        background: #f4f5f7;
        padding: 12px 24px;
        border-radius: var(--radius-button);
        transition: var(--transition);
        flex: 1;
        max-width: 45%;
    }
    .nav-link:hover, .nav-link:focus {
        background: #eef1f6;
        outline: none;
    }
    .nav-icon {
        background: #e7e9ed;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--color-primary);
    }
    .nav-title {
        font-size: 0.95rem;
        margin: 0;
        font-weight: 500;
        color: #1f3a5f;
        line-height: 1.4;
    }
    @media (max-width: 680px) {
        .post-navigation { flex-direction: column; }
        .nav-link { max-width: 100%; justify-content: center; }
        .divider { display: none; }
    }
    
    /* Comments Section */
    .comments-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: #1f3a5f;
        margin: 48px 0 24px;
        border-left: 5px solid var(--color-primary);
        padding-left: 20px;
    }
    .comment {
        display: flex;
        gap: 20px;
        background: #ffffff;
        padding: 22px 20px;
        border-radius: 24px;
        margin-bottom: 24px;
        border: 1px solid #eef1f6;
        flex-wrap: wrap;
    }
    .comment-avatar {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }
    .comment-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .comment-content { flex: 1; }
    .comment-author {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 5px;
        color: #101828;
    }
    .comment-date {
        font-size: 0.8rem;
        color: var(--color-text-light);
        margin-bottom: 8px;
    }
    .comment-text {
        margin: 6px 0;
        color: #3f4759;
        font-size: 0.95rem;
    }
    .comment-reply {
        background: transparent;
        border: 1px solid #d7dce3;
        padding: 6px 18px;
        border-radius: 40px;
        font-size: 0.8rem;
        text-decoration: none;
        color: #1f3a5f;
        transition: var(--transition);
    }
    .comment-reply:hover, .comment-reply:focus {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: white;
    }
    
    /* Comment Form */
    .comment-form {
        background: #f4f5f7;
        padding: 36px 32px;
        border-radius: 28px;
        margin-top: 40px;
        border: 1px solid #e7e9ed;
    }
    .comment-form-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f3a5f;
        margin-bottom: 28px;
    }
    .form-group { margin-bottom: 20px; }
    .comment-form input, .comment-form textarea {
        width: 100%;
        border: 1px solid #d7dce3;
        background: white;
        padding: 14px 20px;
        border-radius: 60px;
        font-size: 0.95rem;
        transition: var(--transition);
    }
    .comment-form textarea {
        border-radius: 28px;
        resize: vertical;
        min-height: 120px;
    }
    .comment-form input:focus, .comment-form textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: var(--shadow-focus);
    }
    .btn-submit {
        background: var(--color-primary-dark);
        border: none;
        padding: 12px 32px;
        border-radius: var(--radius-button);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        font-size: 1rem;
    }
    .btn-submit:hover, .btn-submit:focus {
        background: #101828;
        transform: translateY(-2px);
        outline: none;
    }
    
    /* Back to Top Button */
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: var(--color-primary);
        color: white;
        border: none;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }
    .back-to-top:hover, .back-to-top:focus {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
        outline: none;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .post-footer { flex-direction: column; align-items: flex-start; }
        .comment { flex-direction: column; }
        .comment-avatar { margin-bottom: 8px; }
    }
    
    /* Print */
    @media print {
        .blog-post-section {
            background: white;
            padding: 0;
        }
        .post-card { box-shadow: none; padding: 0; }
        .share-buttons, .comment-form, .back-to-top, .post-navigation { display: none; }
        .post-featured-image { margin: 0 0 20px; }
        a { text-decoration: none; color: black; }
    }
    </style>
{% endblock %}

{% block content %}
<article class="blog-post-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-8">
                <div class="post-card">
                    
                    {% if post.featured_image %}
                        <figure class="post-featured-image" data-aos="fade-up">
                            <img class="lightbox-trigger" src="{{ post.featured_image.url }}" 
                                 alt="{{ post.featured_image.alt|default:post.title }}"
                                 loading="eager"
                                 width="1200" height="630">
                        </figure>
                    {% endif %}
                    
                    <div class="post-content">
                        <ul class="post-meta">
                            <li><i class="fa-regular fa-calendar"></i> <time datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"F j, Y" }}</time></li>
                            <li><i class="fa-regular fa-user"></i> {{ post.author|default:"Admin" }}</li>
                            {% if post.category %}
                                <li><i class="fa-regular fa-folder"></i> <a href="{% url 'blog_category' post.category.slug %}">{{ post.category.name }}</a></li>
                            {% endif %}
                        </ul>
                        
                        <h1 class="post-title">{{ post.title }}</h1>
                        
                        {% if post.excerpt %}
                            <div class="post-excerpt">{{ post.excerpt|safe }}</div>
                        {% endif %}
                        
                        <div class="post-body">{{ post.body|safe }}</div>
                        
                        {% if post.gallery_images %}
                            <div class="post-gallery">
                                {% for img in post.gallery_images %}
                                    <div class="gallery-item" data-aos="zoom-in">
                                        <img class="lightbox-trigger" src="{{ img.url }}" alt="{{ img.alt|default:post.title }}" loading="lazy">
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <footer class="post-footer">
                            {% if post.tags.all %}
                                <div class="tags-list">
                                    <span>Tags:</span>
                                    {% for tag in post.tags.all %}
                                        <a href="{% url 'blog_tag' tag.slug %}">{{ tag.name }}</a>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <div class="share-buttons">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri|urlencode }}&text={{ post.title|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share on Twitter"><i class="fa-brands fa-twitter"></i></a>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                                <button class="share-buttons__copy" data-url="{{ request.build_absolute_uri }}" aria-label="Copy link"><i class="fa-regular fa-copy"></i></button>
                            </div>
                        </footer>
                        
                        <nav class="post-navigation" aria-label="Post navigation">
                            {% if previous_post %}
                                <a href="{% url 'blog_post' previous_post.slug %}" class="nav-link prev-post">
                                    <div class="nav-icon"><i class="fa-solid fa-arrow-left"></i></div>
                                    <div class="nav-title">{{ previous_post.title|truncatechars:50 }}</div>
                                </a>
                            {% else %}
                                <div></div>
                            {% endif %}
                            {% if next_post and previous_post %}
                                <div class="divider" aria-hidden="true"></div>
                            {% endif %}
                            {% if next_post %}
                                <a href="{% url 'blog_post' next_post.slug %}" class="nav-link next-post">
                                    <div class="nav-title">{{ next_post.title|truncatechars:50 }}</div>
                                    <div class="nav-icon"><i class="fa-solid fa-arrow-right"></i></div>
                                </a>
                            {% endif %}
                        </nav>
                    </div>
                    
                   
                </div>
            </div>
        </div>
    </div>
</article>

<button class="back-to-top" aria-label="Back to top"><i class="fa-solid fa-arrow-up"></i></button>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    // Copy link
    const copyBtns = document.querySelectorAll('.share-buttons__copy');
    copyBtns.forEach(btn => {
        btn.addEventListener('click', async function() {
            const url = this.dataset.url;
            try {
                await navigator.clipboard.writeText(url);
                const original = this.innerHTML;
                this.innerHTML = '<i class="fa-solid fa-check"></i>';
                setTimeout(() => { this.innerHTML = original; }, 2000);
            } catch { alert('Could not copy link.'); }
        });
    });
    
    // Back to top
    const backBtn = document.querySelector('.back-to-top');
    if (backBtn) {
        window.addEventListener('scroll', () => {
            backBtn.classList.toggle('visible', window.scrollY > 500);
        });
        backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
    }
    
    // Reply: fill textarea and scroll smoothly (now respects fixed header)
    const replyBtns = document.querySelectorAll('.comment-reply');
    const msgField = document.querySelector('textarea[name="message"]');
    if (replyBtns.length && msgField) {
        replyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const author = btn.dataset.author;
                msgField.value = `@${author} `;
                msgField.focus();
                document.querySelector('.comment-form').scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        });
    }
    
    // Basic form validation
    const form = document.querySelector('.comment-form form');
    if (form) {
        form.addEventListener('submit', (e) => {
            const msg = form.querySelector('textarea[name="message"]');
            const name = form.querySelector('input[name="name"]');
            const email = form.querySelector('input[name="email"]');
            if (!msg.value.trim() || !name.value.trim() || !email.value.trim()) {
                e.preventDefault();
                alert('Please fill all required fields.');
            }
        });
    }
})();
</script>
{% endblock %}