<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="blog_page" name="Blog Page">
            <t t-call="website.layout">
                <div id="wrap" class="oe_structure">
                    
                    <!-- Page Banner -->
                    <section class="s_page_title o_colored_level" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/about-banner-new.png'); background-size: cover; background-position: center; padding: 100px 0; position: relative; overflow: hidden;">
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container text-center text-white position-relative" style="z-index: 2;">
                            <h1 class="display-3 fw-bold mb-3" style="letter-spacing: 1px;">BLOG</h1>
                            <nav aria-label="breadcrumb" class="d-flex justify-content-center">
                                <ol class="breadcrumb mb-0" style="background: transparent; font-size: 14px; text-transform: uppercase; font-weight: 600;">
                                    <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none" style="opacity: 0.8;">Home</a></li>
                                    <li class="breadcrumb-item active" style="color: #e5b945;" aria-current="page">Blog</li>
                                </ol>
                            </nav>
                         </div>
                    </section>

                    <!-- Blog Listing Section -->
                    <section class="s_blog_listing o_colored_level pt96 pb96" style="background-color: #F9F6F0;">
                        <div class="container">
                            <!-- Header -->
                            <div class="row mb-5">
                                <div class="col-12 text-center">
                                    <h6 class="d-flex align-items-center justify-content-center mb-3" style="color: #e5b945; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                                        BLOG
                                    </h6>
                                    <h2 class="display-4 fw-bold mb-4" style="color: #04121D; font-size: 48px;">News &amp; Articles</h2>
                                </div>
                            </div>

                            <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3">
                                <t t-foreach="blog_posts" t-as="blog">
                                    <div class="col">
                                        <div class="blog-card border-0 h-100 shadow-sm overflow-hidden bg-white" style="border-radius: 0px; transition: transform 0.3s ease;">
                                            <div class="blog-img-wrapper position-relative overflow-hidden" style="height: 280px;">
                                                <a t-attf-href="/blog/#{blog.get('slug')}">
                                                    <img t-att-src="blog.get('image')" t-att-alt="blog.get('title')" class="img-fluid w-100 h-100" style="object-fit: cover; transition: transform 0.5s ease;"/>
                                                </a>
                                                <div class="date-badge position-absolute" style="bottom: 10px; left: 15px; width: 50px; height: 65px; background: #e5b945; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; line-height: 1.1; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 5;">
                                                    <span style="font-size: 22px; display: block;" t-esc="blog.get('day')"/>
                                                    <span style="font-size: 11px; text-transform: uppercase;" t-esc="blog.get('month')"/>
                                                </div>
                                            </div>
                                            <div class="blog-body p-4 pt-5">
                                                <div class="d-flex align-items-center mb-3 text-muted small" style="font-weight: 600;">
                                                    <span class="text-uppercase" style="letter-spacing: 0.5px;" t-esc="'Category: ' + (blog.get('category') or '')"/>
                                                </div>
                                                <h4 class="mb-3">
                                                    <a t-attf-href="/blog/#{blog.get('slug')}" class="text-decoration-none fw-bold" style="color: #04121D; line-height: 1.3; font-size: 22px;" t-esc="blog.get('title')"/>
                                                </h4>
                                                <p class="blog-excerpt text-muted mb-4" style="font-size: 14px; line-height: 1.7;" t-esc="blog.get('excerpt')"/>
                                                <a t-attf-href="/blog/#{blog.get('slug')}" class="fw-bold text-decoration-none" style="color: #04121D; font-size: 14px; border-bottom: 1px solid #04121D; padding-bottom: 2px;">Read More</a>
                                            </div>
                                        </div>
                                    </div>
                                </t>
                            </div>

                            <!-- Pagination -->
                            <div class="d-flex justify-content-center mt-5" t-if="pager and pager.get('page_count', 0) > 1">
                                <t t-call="website.pager"/>
                            </div>
                        </div>
                    </section>

                </div>
            </t>
        </template>
    </data>
</odoo>



