<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- ══════════════════════════════════════════════════════
         BLOG LIST PAGE
         Route: /v2/blog
         ══════════════════════════════════════════════════════ -->
    <template id="v2_blog_list" name="V2 Blog List">
        <t t-call="website.layout">
            <t t-set="head">
                <title t-out="page_title"/>
                <meta name="description" content="Read the latest insights on luxury weddings, event design, multicultural celebrations, and creative inspiration from the Aakriti Events team."/>
            </t>

            <div id="wrap" class="oe_structure" style="background-color: var(--v2-cream); font-family: var(--v2-font-body);">

                <style>
                    /* Blog Grid */
                    .v2-blog-section {
                        max-width: 1320px;
                        margin: 0 auto;
                        padding: 80px 24px;
                    }
                    .v2-blog-grid {
                        display: grid;
                        gap: 32px;
                        grid-template-columns: 1fr;
                    }
                    @media (min-width: 768px) {
                        .v2-blog-grid {
                            grid-template-columns: repeat(2, 1fr);
                        }
                    }
                    @media (min-width: 1024px) {
                        .v2-blog-grid {
                            grid-template-columns: repeat(3, 1fr);
                        }
                    }
                    /* Blog Card */
                    .v2-blog-card {
                        background: var(--v2-white);
                        border-radius: 18px;
                        overflow: hidden;
                        box-shadow: 0 10px 40px rgba(30,18,8,0.06);
                        border: 1px solid var(--v2-border);
                        transition: transform 0.3s ease, box-shadow 0.3s ease;
                        display: flex;
                        flex-direction: column;
                    }
                    .v2-blog-card:hover {
                        transform: translateY(-6px);
                        box-shadow: 0 20px 50px rgba(30,18,8,0.12);
                    }
                    .v2-blog-card-img-wrap {
                        position: relative;
                        overflow: hidden;
                        height: 240px;
                    }
                    .v2-blog-card-img-wrap img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.6s ease;
                    }
                    .v2-blog-card:hover .v2-blog-card-img-wrap img {
                        transform: scale(1.06);
                    }
                    .v2-blog-card-category {
                        position: absolute;
                        top: 16px;
                        left: 16px;
                        background: var(--v2-gold);
                        color: var(--v2-white);
                        font-size: 0.68rem;
                        font-weight: 700;
                        text-transform: uppercase;
                        letter-spacing: 0.1em;
                        padding: 4px 12px;
                        border-radius: 4px;
                    }
                    .v2-blog-card-body {
                        padding: 28px 24px 24px;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                    }
                    .v2-blog-card-meta {
                        font-size: 0.78rem;
                        color: var(--v2-muted);
                        margin-bottom: 12px;
                        display: flex;
                        gap: 14px;
                        align-items: center;
                    }
                    .v2-blog-card-meta span {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                    }
                    .v2-blog-card-title {
                        font-family: var(--v2-font-display);
                        font-size: 1.4rem;
                        font-weight: 600;
                        color: var(--v2-text);
                        line-height: 1.25;
                        margin-bottom: 12px;
                        text-decoration: none;
                        display: block;
                    }
                    .v2-blog-card-title:hover {
                        color: var(--v2-gold);
                    }
                    .v2-blog-card-excerpt {
                        font-size: 0.88rem;
                        color: var(--v2-muted);
                        line-height: 1.7;
                        flex: 1;
                        margin-bottom: 24px;
                    }
                    .v2-blog-card-link {
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                        font-size: 0.8rem;
                        font-weight: 700;
                        color: var(--v2-gold);
                        text-decoration: none;
                        text-transform: uppercase;
                        letter-spacing: 0.08em;
                        transition: gap 0.2s ease;
                    }
                    .v2-blog-card-link:hover {
                        gap: 10px;
                        color: var(--v2-gold-dark);
                    }
                    @media (max-width: 767px) {
                        .v2-blog-section {
                            padding: 48px 20px;
                        }
                    }
                </style>

                <!-- Inner Banner -->
                <section class="v2-inner-banner" style="background-image: url('/theme_aakriti_v2/static/src/img/inner-banner/4.webp');">
                    <div class="v2-inner-banner-content">
                        <h1 class="v2-inner-banner-title" style="font-family: var(--v2-font-display);">Our Blog</h1>
                        <div class="v2-inner-banner-breadcrumb">
                            <a href="/">Home</a> / <span class="v2-active">Blog</span>
                        </div>
                    </div>
                </section>

                <!-- Blog Grid -->
                <div class="v2-blog-section">
                    <div style="text-align:center; margin-bottom:56px;">
                        <div style="font-size:0.75rem; font-weight:700; color:#C9973A; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:12px;">
                            <span style="height:1px; width:40px; background:#C9973A; display:inline-block;"></span>
                            INSIGHTS &amp; INSPIRATION
                            <span style="height:1px; width:40px; background:#C9973A; display:inline-block;"></span>
                        </div>
                        <h2 style="font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2rem,3.5vw,3rem); color:#1a1206; font-weight:600; margin:0;">
                            Stories from the Studio
                        </h2>
                    </div>

                    <div class="v2-blog-grid">
                        <t t-foreach="posts" t-as="post">
                            <article class="v2-blog-card">
                                <div class="v2-blog-card-img-wrap">
                                    <img t-att-src="post['image']" t-att-alt="post['title']"/>
                                    <span class="v2-blog-card-category" t-out="post['category']"/>
                                </div>
                                <div class="v2-blog-card-body">
                                    <div class="v2-blog-card-meta">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
                                            <t t-out="post['date']"/>
                                        </span>
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                            <t t-out="post['read_time']"/>
                                        </span>
                                    </div>
                                    <a t-attf-href="/blog/#{post['slug']}" class="v2-blog-card-title" t-out="post['title']"/>
                                    <p class="v2-blog-card-excerpt" t-out="post['excerpt']"/>
                                    <a t-attf-href="/blog/#{post['slug']}" class="v2-blog-card-link">
                                        Read Article
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                    </a>
                                </div>
                            </article>
                        </t>
                    </div>
                </div>

            </div>
        </t>
    </template>


    <!-- ══════════════════════════════════════════════════════
         BLOG DETAIL PAGE
         Route: /v2/blog/<slug>
         ══════════════════════════════════════════════════════ -->
    <template id="v2_blog_detail" name="V2 Blog Detail">
        <t t-call="website.layout">
            <t t-set="head">
                <title t-out="page_title"/>
                <meta t-att-name="'description'" t-att-content="post['excerpt']"/>
            </t>

            <div id="wrap" class="oe_structure" style="background-color: var(--v2-cream); font-family: var(--v2-font-body);">

                <style>
                    /* ── Blog Detail Page ── */



                    .v2-detail-meta {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px;
                        font-size: 0.82rem;
                        color: rgba(255,255,255,0.8);
                    }
                    .v2-detail-meta span {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                    }
                    /* Article Layout */
                    .v2-detail-layout {
                        max-width: 1320px;
                        margin: 0 auto;
                        padding: 64px 24px;
                        display: grid;
                        gap: 60px;
                        grid-template-columns: 1fr;
                    }
                    @media (min-width: 1024px) {
                        .v2-detail-layout {
                            grid-template-columns: 1fr 340px;
                        }
                    }
                    /* Article Body */
                    .v2-article-body {
                        font-size: 1rem;
                        color: var(--v2-text);
                        line-height: 1.85;
                    }
                    .v2-article-body h3 {
                        font-family: var(--v2-font-display);
                        font-size: 1.6rem;
                        font-weight: 600;
                        color: var(--v2-text);
                        margin: 40px 0 16px;
                        line-height: 1.2;
                    }
                    .v2-article-body p {
                        margin-bottom: 20px;
                    }
                    .v2-article-body strong {
                        color: var(--v2-text);
                        font-weight: 600;
                    }
                    .v2-article-body a {
                        color: var(--v2-gold);
                        text-decoration: underline;
                    }
                    .v2-article-body a:hover {
                        color: var(--v2-gold-dark);
                    }
                    .v2-article-body em {
                        font-style: italic;
                    }
                    /* Author Card */
                    .v2-author-card {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        background: var(--v2-white);
                        border: 1px solid var(--v2-border);
                        border-radius: 12px;
                        padding: 24px;
                        margin-top: 48px;
                    }
                    .v2-author-avatar {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        background: var(--v2-gold);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-family: var(--v2-font-display);
                        font-size: 1.6rem;
                        color: var(--v2-white);
                        font-weight: 600;
                        flex-shrink: 0;
                    }
                    .v2-author-info h4 {
                        font-family: var(--v2-font-display);
                        font-size: 1.2rem;
                        color: var(--v2-text);
                        font-weight: 600;
                        margin: 0 0 4px;
                    }
                    .v2-author-info p {
                        font-size: 0.8rem;
                        color: var(--v2-muted);
                        text-transform: uppercase;
                        letter-spacing: 0.08em;
                        margin: 0;
                    }
                    /* Tags */
                    .v2-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;
                        margin-top: 32px;
                    }
                    .v2-tag {
                        font-size: 0.75rem;
                        color: var(--v2-gold);
                        border: 1px solid var(--v2-gold);
                        padding: 4px 14px;
                        border-radius: 100px;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 0.06em;
                    }
                    /* Sidebar */
                    .v2-sidebar {}
                    .v2-sidebar-card {
                        background: var(--v2-white);
                        border: 1px solid var(--v2-border);
                        border-radius: 16px;
                        padding: 32px 28px;
                        margin-bottom: 32px;
                    }
                    .v2-sidebar-title {
                        font-family: var(--v2-font-display);
                        font-size: 1.25rem;
                        font-weight: 600;
                        color: var(--v2-text);
                        margin-bottom: 20px;
                        padding-bottom: 12px;
                        border-bottom: 1px solid var(--v2-border);
                    }
                    .v2-recent-post {
                        display: flex;
                        gap: 14px;
                        align-items: flex-start;
                        padding: 14px 0;
                        border-bottom: 1px solid var(--v2-border);
                        text-decoration: none;
                    }
                    .v2-recent-post:last-child {
                        border-bottom: none;
                        padding-bottom: 0;
                    }
                    .v2-recent-post-img {
                        width: 72px;
                        height: 60px;
                        border-radius: 8px;
                        object-fit: cover;
                        flex-shrink: 0;
                    }
                    .v2-recent-post-info h5 {
                        font-size: 0.88rem;
                        font-weight: 600;
                        color: var(--v2-text);
                        line-height: 1.35;
                        margin: 0 0 4px;
                        transition: color 0.2s;
                    }
                    .v2-recent-post:hover .v2-recent-post-info h5 {
                        color: var(--v2-gold);
                    }
                    .v2-recent-post-info span {
                        font-size: 0.75rem;
                        color: var(--v2-muted);
                    }
                    .v2-cta-sidebar {
                        background: linear-gradient(135deg, var(--v2-dark) 0%, var(--v2-dark2) 100%);
                        border-radius: 16px;
                        padding: 36px 28px;
                        text-align: center;
                    }
                    .v2-cta-sidebar h3 {
                        font-family: var(--v2-font-display);
                        font-size: 1.5rem;
                        color: var(--v2-white);
                        font-weight: 600;
                        margin-bottom: 12px;
                        line-height: 1.25;
                    }
                    .v2-cta-sidebar p {
                        font-size: 0.88rem;
                        color: rgba(255,255,255,0.7);
                        margin-bottom: 24px;
                        line-height: 1.6;
                    }
                    @media (max-width: 767px) {
                        .v2-detail-layout {
                            padding: 40px 20px;
                        }
                    }
                </style>

                <!-- Inner Banner -->
                <section class="v2-inner-banner" style="background-image: url('/theme_aakriti_v2/static/src/img/inner-banner/5.webp');">
                    <div class="v2-inner-banner-content">
                        <h1 class="v2-inner-banner-title" style="font-family: var(--v2-font-display);" t-out="post['title']"/>
                        <div class="v2-inner-banner-breadcrumb">
                            <a href="/">Home</a> / <a href="/blog">Blog</a> / <span class="v2-active" t-out="post['category']"/>
                        </div>
                    </div>
                </section>

                <!-- Article Layout -->
                <div class="v2-detail-layout">

                    <!-- Main Content -->
                    <div>
                        <!-- Breadcrumb -->
                        <div style="font-size:0.78rem; color: var(--v2-muted); margin-bottom:32px; text-transform:uppercase; letter-spacing:0.06em;">
                            <a href="/" style="color: var(--v2-muted); text-decoration:none;">Home</a>
                            <span style="margin:0 8px;">·</span>
                            <a href="/blog" style="color: var(--v2-muted); text-decoration:none;">Blog</a>
                            <span style="margin:0 8px;">·</span>
                            <span style="color: var(--v2-gold);" t-out="post['category']"/>
                        </div>

                        <!-- Article Body -->
                        <div class="v2-article-body">
                            <t t-out="post['content']"/>
                        </div>

                        <!-- Tags -->
                        <div class="v2-tags">
                            <t t-foreach="post.get('tags', [])" t-as="tag">
                                <span class="v2-tag" t-out="tag"/>
                            </t>
                        </div>

                        <!-- Author Card -->
                        <div class="v2-author-card">
                            <div class="v2-author-avatar">
                                <t t-out="post['author'][0]"/>
                            </div>
                            <div class="v2-author-info">
                                <h4 t-out="post['author']"/>
                                <p t-out="post['author_title']"/>
                            </div>
                        </div>

                        <!-- Back Link -->
                        <div style="margin-top:48px;">
                            <a href="/blog" style="display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color: var(--v2-gold); text-transform:uppercase; letter-spacing:0.08em; text-decoration:none;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
                                Back to All Articles
                            </a>
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <aside class="v2-sidebar">
                        <!-- Recent Posts -->
                        <div class="v2-sidebar-card">
                            <div class="v2-sidebar-title">More Articles</div>
                            <t t-foreach="recent_posts" t-as="rp">
                                <a t-attf-href="/blog/#{rp['slug']}" class="v2-recent-post">
                                    <img t-att-src="rp['image']" t-att-alt="rp['title']" class="v2-recent-post-img"/>
                                    <div class="v2-recent-post-info">
                                        <h5 t-out="rp['title']"/>
                                        <span t-out="rp['date']"/>
                                    </div>
                                </a>
                            </t>
                        </div>

                        <!-- CTA Card -->
                        <div class="v2-cta-sidebar">
                            <h3>Ready to Create Your Dream Event?</h3>
                            <p>Let's talk about your vision. We'd love to bring it to life.</p>
                            <a href="/contactus" style="display:inline-flex; align-items:center; gap:8px; background: var(--v2-gold); color: var(--v2-white); padding:12px 24px; border-radius:4px; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; text-decoration:none; transition:background 0.3s;">
                                Book a Consultation
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                            </a>
                        </div>
                    </aside>

                </div>

            </div>
        </t>
    </template>

</odoo>
