{% extends "_base.html" %}
{% load static %}


    {% block title %}<title>{% if blog.meta_title %}{{ blog.meta_title }}{% else %}{{ blog.title }} | TUPY Pipe Fittings{% endif %}</title>{% endblock %}

    {% block meta %}

    <!-- Meta Description -->

    <meta name="description" content="{% if blog.meta_description %}{{ blog.meta_description }}{% else %}{{ blog.excerpt|striptags|truncatechars:160 }}{% endif %}">

    <!-- Meta Keywords -->

    {% if blog.meta_keywords %}
    <meta name="keywords" content="{{ blog.meta_keywords }}">
    {% endif %}

    <!-- Canonical -->

    <link rel="canonical" href="{% if blog.canonical_url %}{{ blog.canonical_url }}{% else %}https://tupyfittings.com{{ request.path_info }}{% endif %}">

    <!-- Robots -->

    <meta name="robots" content="index, follow">

    <!-- Author -->

    <meta name="author" content="{{ blog.author.get_full_name|default:blog.author.username }}">

    <!-- Open Graph (Facebook, LinkedIn, Telegram) -->

    <meta property="og:type" content="article">
    <meta property="og:title" content="{% if blog.meta_title %}{{ blog.meta_title }}{% else %}{{ blog.title }}{% endif %}">
    <meta property="og:description" content="{% if blog.meta_description %}{{ blog.meta_description }}{% else %}{{ blog.excerpt|striptags|truncatechars:160 }}{% endif %}">
    <meta property="og:url" content="https://tupyfittings.com{{ request.path_info }}">

    {% if blog.thumbnail %}
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ blog.thumbnail.url }}">
    {% endif %}

    <meta property="og:site_name" content="TUPY Pipe Fittings">
    <meta property="og:locale" content="en">

    <!-- Twitter Card -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{% if blog.meta_title %}{{ blog.meta_title }}{% else %}{{ blog.title }}{% endif %}">
    <meta name="twitter:description" content="{% if blog.meta_description %}{{ blog.meta_description }}{% else %}{{ blog.excerpt|striptags|truncatechars:160 }}{% endif %}">

    {% if blog.thumbnail %}
    <meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ blog.thumbnail.url }}">
    {% endif %}

    <!-- Article Schema (JSON-LD) -->

    <script type="application/ld+json">
    {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "{{ blog.title|escapejs }}",
    "description": "{% if blog.meta_description %}{{ blog.meta_description|escapejs }}{% else %}{{ blog.excerpt|striptags|truncatechars:160|escapejs }}{% endif %}",
    "image": [
        "{% if blog.thumbnail %}{{ request.scheme }}://{{ request.get_host }}{{ blog.thumbnail.url }}{% endif %}"
    ],
    "author": {
        "@type": "Person",
        "name": "{{ blog.author.get_full_name|default:blog.author.username|escapejs }}"
    },
    "publisher": {
        "@type": "Organization",
        "name": "TUPY Pipe Fittings Middle East",
        "logo": {
        "@type": "ImageObject",
        "url": "{{ request.scheme }}://{{ request.get_host }}{% static 'img/logo.png' %}"
        }
    },
    "datePublished": "{{ blog.published_at|date:'c' }}",
    "dateModified": "{{ blog.updated_at|date:'c' }}",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://tupyfittings.com{{ request.path_info }}"
    }
    }
    </script>

        <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
        { "@type": "ListItem", "position": 2, "name": "Blog", "item": "{{ request.scheme }}://{{ request.get_host }}/blog" },
        { "@type": "ListItem", "position": 3, "name": "{{ blog.title|escapejs }}" }
      ] }
    </script>

{% endblock %}



    {% block content %}

    <!-- Tupy Detail Blog -->

    <section class="bg-[#0a1223] py-14 tablet:py-8">
        <div class="container mx-auto px-6 laptop:px-5 tablet:px-4">
        
            <!-- Breadcrumb -->

            <div class="flex items-center child:font-YekanRegular gap-2 text-sm text-slate-400 mb-6 flex-wrap">
                <a href="/" class="hover:text-slate-200 cursor-pointer">Home</a>
                <span class="text-slate-600">›</span>
                <a href="/blog" class="hover:text-slate-200 cursor-pointer">Blog</a>
                <span class="text-slate-600">›</span>
                <span class="text-slate-200">{{ blog.title }}</span>
            </div>
        
            <!-- Content: sidebar (left) + main article (right) -->

            <div class="flex items-start gap-8 laptop:flex-col">
        
                <!-- Sidebar -->

                <aside class="w-[340px] shrink-0 flex flex-col gap-6 laptop:w-full laptop:order-2">
        
                    <!-- Categories -->

                    <div class="bg-[#0d1830] border border-slate-700/60 rounded-2xl p-6">
                        <h3 class="text-white font-YekanBold text-lg mb-5">Categories</h3>
                        <ul class="flex flex-col child:font-YekanMedium gap-1">

                            {% for category in categories %}

                            <a href="/blog?category={{ category.slug }}" class="flex flex-row items-center justify-between py-3 border-b border-slate-800 text-slate-300 hover:text-white cursor-pointer transition">
                                <span class="flex flex-row-reverse items-center gap-2"><span class="text-slate-600">›</span> {{ category.name }}</span>
                                <span class="bg-blue-600/20 text-blue-400 text-xs font-bold px-2.5 py-1 rounded-full">{{ category.blog_count }}</span>
                            </a>

                            {% endfor %}
                            
                        </ul>
                    </div>
            
                    <!-- Popular posts -->

                    <div class="bg-[#0d1830] border border-slate-700/60 rounded-2xl p-6">
                        <h3 class="text-white font-YekanBold text-lg mb-5">Most read articles</h3>
                        <ul class="flex flex-col child:font-YekanMedium gap-4">

                            {% for blog in popular_blogs %}

                            <a href="{{ blog.get_absolute_url }}" class="flex items-center gap-3 cursor-pointer group">
                                <img src="{{ blog.thumbnail.url }}" alt="{{ blog.title }}" class="w-16 h-16 rounded-xl object-cover bg-slate-800 shrink-0" />
                                <div>
                                <p class="text-slate-200 text-sm font-semibold leading-snug group-hover:text-blue-400 transition">{{ blog.title }}</p>
                                <span class="text-slate-500 text-xs">{{ blog.published_at|date:"j F Y" }}</span>
                                </div>
                            </a>

                            {% endfor %}
                            
                        </ul>
                    </div>
            
                    <!-- LinkedIn -->

                    <a href="https://ae.linkedin.com/company/amini-building-materials-trading-l-l-c" target="_blank" rel="noopener" class="bg-[#0d1830] border border-slate-700/60 rounded-2xl p-6 flex items-center justify-between gap-3">
                        <div class="flex items-center gap-3">
                        <div class="w-11 h-11 rounded-full bg-gradient-to-tr from-sky-400 to-blue-700 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5.001zM3 8.98h4v12.02H3zM9 8.98h3.8v1.64h.05c.53-.98 1.83-2.02 3.77-2.02 4.03 0 4.78 2.5 4.78 5.76v6.64h-4v-5.89c0-1.4-.03-3.2-1.95-3.2-1.96 0-2.26 1.5-2.26 3.1v6h-4z"/></svg>
                        </div>
                        <div>
                            <p class="text-slate-200 text-sm font-YekanBold font-semibold">Follow us on LinkedIn</p>
                            <span class="text-slate-500 text-xs">Amini Building Materials Trading L.L.C</span>
                        </div>
                        </div>
                        <span class="text-slate-500">&rarr;</span>
                    </a>
        
                </aside>
            
                <!-- Main: article detail -->

                <main class="flex-1 min-w-0 laptop:order-1">
            
                    <!-- Category badge -->

                    <a href="#" class="inline-block font-YekanMedium bg-blue-600/15 text-blue-400 text-xs font-semibold px-3 py-1.5 rounded-full mb-4 hover:bg-blue-600/25 transition">{{ blog.category }}</a>
            
                    <!-- Title -->

                    <h1 class="text-white font-YekanExtraBold text-4xl desktop:text-3xl tablet:text-2xl mobile:text-xl leading-snug mb-5">
                        {{ blog.title }}
                    </h1>
            
                    <!-- Meta row -->

                    <div class="flex items-center gap-5 flex-wrap text-sm text-slate-400 pb-6 mb-6 border-b border-slate-800">
                        <span class="flex font-YekanLight items-center gap-1.5">
                            <svg class="w-4 h-4" 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"/></svg>
                            {{ blog.published_at|date:"j F Y" }}
                        </span>
                        <span class="flex font-YekanLight items-center gap-1.5">
                            <svg class="w-4 h-4" 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"/></svg>
                            TUPY content team
                        </span>
                        {% comment %} <span class="flex font-YekanLight items-center gap-1.5">
                            <svg class="w-4 h-4" 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"/></svg>
                            4 min read
                        </span> {% endcomment %}
                        <span class="flex font-YekanLight items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 01-4-.8L3 20l1.3-3.9A7.96 7.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                            {{ comments.count }} comments
                        </span>
                    </div>
            
                    <!-- Featured image -->

                    <div class="rounded-2xl overflow-hidden mb-8">
                    <img src="{{ blog.thumbnail.url }}" alt="{{ blog.title }}" class="w-full h-[420px] desktop:h-[320px] tablet:h-[220px] object-cover bg-[#0d1830]" />
                    </div>
            
                    <!-- Article body -->

                    <article class="blog-content flex flex-col gap-5 text-slate-300 leading-8 text-[15px]">

                        {{ blog.content|safe }}
                
                    </article>
            
                    <!-- Tags -->

                    <div class="flex items-center child:font-YekanRegular gap-3 flex-wrap mt-10 pt-8 border-t border-slate-800">
                        <span class="text-slate-400 text-sm font-semibold shrink-0">Tags:</span>

                        {% for tag in blog.tags.all %}

                        <a href="#" class="px-4 py-1.5 rounded-full bg-[#0d1830] border border-slate-700/60 text-slate-300 text-xs font-medium hover:border-blue-500 hover:text-blue-400 transition">{{ tag.name }}</a>

                        {% endfor %}

                    </div>
            
                    <!-- Related fittings : internal links to product pages -->

                    {% if related_fittings %}
                    <div class="bl-rel" data-anim="up">
                      <style>
                      .bl-rel{direction:ltr;margin-top:48px;padding-top:32px;border-top:1px solid #173059}
                      .bl-rel h3{color:#fff;font-size:19px;margin:0 0 8px;position:relative;display:inline-block;padding-bottom:9px}
                      .bl-rel h3:after{content:"";position:absolute;bottom:0;left:0;width:34px;height:2px;background:#6ecff6;border-radius:2px}
                      .bl-rel .sub{color:#8fa3b8;font-size:13.5px;line-height:1.9;margin:0 0 22px}
                      .bl-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
                      .bl-rel-i{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#061b3e;border:1px solid #1d3c68;border-radius:16px;text-decoration:none;transition:border-color .25s ease,transform .25s ease}
                      .bl-rel-i:hover{border-color:#6ecff6;transform:translateY(-2px)}
                      .bl-rel-i .im{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:#03142f;display:flex;align-items:center;justify-content:center}
                      .bl-rel-i .im img{max-width:36px;max-height:36px;object-fit:contain}
                      .bl-rel-i .nm{display:block;color:#fff;font-size:13.5px;line-height:1.5}
                      .bl-rel-i .fg{display:block;color:#8fa3b8;font-size:11.5px;margin-top:3px}
                      .bl-rel-i:hover .nm{color:#6ecff6}
                      .bl-rel-more{display:inline-block;margin-top:20px;color:#6ecff6;font-size:14px;text-decoration:none}
                      .bl-rel-more:hover{text-decoration:underline}
                      @media(max-width:900px){.bl-rel-grid{grid-template-columns:repeat(2,1fr)}}
                      @media(max-width:560px){.bl-rel-grid{grid-template-columns:1fr}}
                      </style>
                      <h3 class="font-YekanExtraBold">Related TUPY fittings</h3>
                      <p class="sub font-YekanRegular">Technical specifications, dimensions and the figure number of each fitting are on its own page.</p>
                      <div class="bl-rel-grid">
                        {% for f in related_fittings %}
                        <a class="bl-rel-i" data-anim="up" style="--d:{% cycle '0s' '.06s' '.12s' '.18s' %}" href="{{ f.get_absolute_url }}" title="{{ f.name }} — TUPY">
                          <span class="im">{% if f.image %}<img src="{{ f.image.url }}" alt="{{ f.name }} — TUPY malleable cast iron fitting" loading="lazy">{% endif %}</span>
                          <span>
                            <span class="nm font-YekanRegular">{{ f.name }}</span>
                            <span class="fg font-YekanRegular">Figure {{ f.figure }}</span>
                          </span>
                        </a>
                        {% endfor %}
                      </div>
                      <a class="bl-rel-more font-YekanRegular" href="/products#fittings">View all TUPY threaded fittings →</a>
                    </div>
                    {% endif %}

                    <!-- Comments -->

                    <div class="mt-12 pt-8 border-t border-slate-800">
                        <h3 class="text-white font-YekanBold text-xl mb-7">Comments ({{ blog.comments.count }})</h3>
                
                        <div class="flex flex-col gap-6">
                
                            {% for comment in blog.comments.all  %}

                            <!-- Comment 1 -->

                            <div class="flex gap-4">
                                <div class="w-11 h-11 rounded-full bg-blue-600/20 text-blue-400 font-bold flex items-center justify-center shrink-0">
                                    <svg class="w-6 h-6">
                                        <use href="#user"></use>
                                    </svg>
                                </div>                                

                                <div class="flex-1 child:font-YekanMedium bg-[#0d1830] border border-slate-700/60 rounded-2xl p-5">
                                    <div class="flex items-center justify-between mb-2 flex-wrap gap-1">
                                    <span class="text-slate-200 font-semibold text-sm">{{ comment.name }}</span>
                                    <span class="text-slate-500 text-xs">{{ comment.created_at|date:"j F Y" }}</span>
                                    </div>
                                    <p class="text-slate-400 text-sm leading-7">{{ comment.comment }}</p>
                                </div>

                            </div>
                

                            {% if comment.replay %}

                            <!-- Comment 1 reply -->

                            <div class="flex gap-4 pl-16 tablet:pl-8">
                                <div class="w-10 h-10 rounded-full bg-slate-700/40 text-slate-300 font-bold flex items-center justify-center shrink-0 text-sm">
                                    <svg class="w-6 h-6">
                                        <use href="#team"></use>
                                    </svg>
                                </div>
                                <div class="flex-1 child:font-YekanMedium bg-[#0d1830]/60 border border-slate-800 rounded-2xl p-5">
                                    <div class="flex items-center justify-between mb-2 flex-wrap gap-1">
                                    <span class="text-slate-200 font-semibold text-sm">Reply from the TUPY team</span>
                                    </div>
                                    <p class="text-slate-400 text-sm leading-7">{{ comment.replay }}</p>
                                </div>
                            </div>

                            {% endif %}
                            
                            {% endfor %}
                
                
                        </div>
                
                        <!-- Comment form -->
                        
                        <div class="bg-[#0d1830] child:font-YekanMedium border border-slate-700/60 rounded-2xl p-6 tablet:p-4 mt-8">
                            <form action="" method="post">
                                {% csrf_token %}
                                <h4 class="text-white font-bold text-lg mb-5">Leave a comment</h4>
                                <div class="grid grid-cols-2 gap-4 tablet:grid-cols-1 mb-4">
                                <input required name="name" type="text" placeholder="Your name"
                                    class="w-full bg-[#0a1223] border border-slate-700/60 rounded-xl py-3 px-4 text-sm text-slate-200 placeholder:text-slate-500 outline-none focus:border-blue-500 transition" />
                                <input required name="email" type="email" placeholder="Your email"
                                    class="w-full bg-[#0a1223] border border-slate-700/60 rounded-xl py-3 px-4 text-sm text-slate-200 placeholder:text-slate-500 outline-none focus:border-blue-500 transition" />
                                </div>
                                <textarea required name="comment" rows="4" placeholder="Your comment..."
                                class="w-full bg-[#0a1223] border border-slate-700/60 rounded-xl py-3 px-4 text-sm text-slate-200 placeholder:text-slate-500 outline-none focus:border-blue-500 transition resize-none mb-4"></textarea>
                                <button type="submit" class="bg-blue-600 hover:bg-blue-500 transition text-white text-sm font-semibold px-6 py-3 rounded-xl">
                                Post comment
                                </button>
                            </form>
                        </div>

                        {% if messages %}
                            {% for message in messages %}
                                <script>
                                    window.message = "{{ message|escapejs }}";
                                </script>
                            {% endfor %}
                        {% endif %}

                    </div>
            
                </main>
        
            </div>
        </div>
    </section>

    {% endblock %}

    {% block js %}

    <script src="{% static 'js/blog.js' %}"></script>
    
    {% endblock %}