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

    {% block title %}<title>Pipe Fitting Guides and Articles | TUPY Blog</title>{% endblock %}

    {% block meta %}

    <meta name="description" content="Guides to selecting, installing and buying pipe fittings. Technical articles on malleable cast iron fittings, the difference between BSP and NPT threads, galvanised and black fittings, and international standards.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Pipe Fitting Guides and Articles | TUPY Blog">
    <meta property="og:description" content="Guides to selecting, installing and buying pipe fittings. Technical articles on malleable cast iron fittings, the difference between BSP and NPT threads, galvanised and black fittings, and international standards.">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/cover.png' %}">

        <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" }
      ] }
    </script>

{% endblock %}


    {% block content %}
    
    <!-- Tupy List Blog -->

    <section class="bg-[#0a1223] py-14 tablet:py-8">
        <div class="max-w-[1720px] 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">
                <span class="hover:text-slate-200 cursor-pointer">Home</span>
                <span class="text-slate-600">›</span>
                <span class="text-slate-200">Blog</span>
            </div>

            <!-- Title -->

            <div class="mb-10 tablet:mb-6">
                <h1 class="text-[#6ecff6] font-YekanExtraBold font-extrabold text-5xl desktop:text-4xl tablet:text-3xl mobile:text-2xl mb-4">TUPY Pipe Fittings Blog</h1>
                <p class="text-slate-400 font-YekanMedium text-lg tablet:text-base">News, products, standards, installation guides and events from TUPY and its Middle East agent.</p>
            </div>
        
            <!-- Bordered wrapper -->

            <div class="border border-slate-700/60 rounded-3xl p-8 desktop:p-6 tablet:p-4 mobile:p-3">
        
                <!-- Toolbar: search (left) + filter tabs (right) -->

                <div class="flex items-center justify-between gap-4 mb-8 laptop:flex-col laptop:items-stretch">
            
                    <!-- Search -->

                    <form method="get" class="relative w-[340px] shrink-0 laptop:w-full">

                        {% if request.GET.category %}
                            <input type="hidden" name="category" value="{{ request.GET.category }}">
                        {% endif %}

                        <input
                            type="text"
                            name="search"
                            value="{{ request.GET.search }}"
                            placeholder="Search the blog..."
                            class="w-full bg-[#0d1830] font-YekanRegular border border-slate-700/60 rounded-full py-3 pr-5 pl-12 text-sm text-slate-200 placeholder:text-slate-500 outline-none focus:border-blue-500 transition"
                        />

                        <button type="submit" class="absolute left-4 top-1/2 -translate-y-1/2">
                            <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/>
                            </svg>
                        </button>

                    </form>
            
                    <!-- Filter tabs -->

                    <div class="flex items-center child:font-YekanMedium gap-3 flex-wrap laptop:justify-start">
                       
                        {% for category in categories %}

                        <a href="?category={{ category.slug }}" class="px-5 py-2.5 rounded-full bg-[#0d1830] border border-slate-700/60 text-slate-300 text-sm font-medium whitespace-nowrap hover:border-slate-500 transition flex items-center gap-2">
                            {{ category.name }}

                            {% comment %} <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg> {% endcomment %}
                        </a>

                        {% endfor %}
                        
                    </div>
                </div>
            
                <!-- Content: sidebar (left) + main grid (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="?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">→</span>
                        </a>
            
                    </aside>
            
                    <!-- Main: cards grid -->

                    <main class="flex-1 min-w-0 laptop:order-1">
                        <div class="grid grid-cols-3 gap-6 desktop:grid-cols-2 tablet:grid-cols-1">
                
                            {% for blog in blogs %}

                            <!-- Card 1 -->

                            <article class="bg-white rounded-2xl overflow-hidden flex flex-col">
                                <div class="relative h-52">
                                    <img src="{{ blog.thumbnail.url }}" alt="{{ blog.title }}" class="w-full h-full object-cover bg-slate-800" />
                                    <span class="absolute bottom-3 font-YekanLight right-3 bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full">{{ blog.category.name }}</span>
                                </div>
                                <div class="p-5 flex flex-col gap-2 flex-1">
                                    <h3 class="text-slate-900 font-YekanBold text-lg leading-snug">{{ blog.title }}</h3>
                                    <p class="text-slate-500 font-YekanMedium text-sm line-clamp-2 flex-1">{{ blog.excerpt }}</p>
                                    <div class="flex items-center font-YekanLight gap-1.5 text-xs text-slate-400">
                                        <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.created_at|date:"j F Y" }}
                                    </div>
                                    <a href="{{ blog.get_absolute_url }}" class="text-blue-600 font-YekanRegular text-sm font-semibold flex flex-row  items-center gap-1 mt-1">
                                        Read more
                                        <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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                                    </a>
                                </div>
                            </article>
                
                            {% endfor %}
                
                        </div>
            
                        <!-- Pagination -->

                        <div class="flex items-center justify-center child:font-YekanRegular gap-2 mt-10">

                            {% if blogs.has_previous %}
                            <a href="?{{ query_params }}&page={{ blogs.previous_page_number }}"
                            class="w-10 h-10 flex items-center justify-center rounded-lg border border-slate-700/60 text-slate-400 hover:border-slate-500 transition">
                                ←
                            </a>
                            {% endif %}


                            {% for num in blogs.paginator.page_range %}

                                {% if blogs.number == num %}

                                <span class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-600 text-white font-semibold">
                                    {{ num }}
                                </span>

                                {% else %}

                                <a href="?{{ query_params }}&page={{ num }}"
                                class="w-10 h-10 flex items-center justify-center rounded-lg border border-slate-700/60 text-slate-300 hover:border-slate-500 transition">
                                    {{ num }}
                                </a>

                                {% endif %}

                            {% endfor %}


                            {% if blogs.has_next %}
                            <a href="?{{ query_params }}&page={{ blogs.next_page_number }}"
                            class="w-10 h-10 flex items-center justify-center rounded-lg border border-slate-700/60 text-slate-400 hover:border-slate-500 transition">
                                →
                            </a>
                            {% endif %}

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

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

    {% endblock content %}