<?xml version="1.0"?>
<t name="Blogs Bar Template" t-name="website_blog.blogs_nav">
    <t t-set="wblog_nav_offcanvas" t-value="len(blogs) &gt; 4"/>
    <t t-set="wblog_all_title_string">All Blogs</t>

    <nav t-attf-class="navbar navbar-expand-lg navbar-light pt-4 pb-0 px-0 #{additionnal_classes}">
        <div t-attf-class="container gap-2 w-100 #{wblog_nav_offcanvas and 'flex-nowrap' or 'flex-wrap flex-sm-nowrap'}">
            <!-- Desktop -->
            <ul t-if="len(blogs) &gt; 1" class="navbar-nav d-none d-lg-flex flex-wrap">
                <li class="nav-item">
                    <span class="nav-link disabled ps-0">Blogs:</span>
                </li>
                <li class="nav-item">
                    <a href="/blog" t-attf-class="nav-link fw-bold #{(not blog) and 'active'}">All</a>
                </li>
                <li class="nav-item" t-foreach="blogs" t-as="nav_blog">
                    <a t-attf-href="/blog/#{slug(nav_blog)}" t-cache="nav_blog,blog and nav_blog.id == blog.id" t-attf-class="nav-link #{(blog and nav_blog.id == blog.id) and 'active' or ''}">
                        <b t-field="nav_blog.name"/>
                    </a>
                </li>
            </ul>
            <!-- Mobile -->
            <div t-if="len(blogs) &gt; 1" t-attf-class="order-2 d-lg-none #{not wblog_nav_offcanvas and 'dropdown flex-grow-1 flex-sm-grow-0 min-w-0'}">
                <t t-if="wblog_nav_offcanvas">
                    <a class="btn btn-light" role="button" t-att-title="blog.name if blog else wblog_all_title_string" data-bs-toggle="offcanvas" data-bs-target="#o_wblog_offcanvas" aria-controls="o_wblog_offcanvas">
                        <i class="fa fa-navicon" role="img"/>
                    </a>
                    <div id="o_wblog_offcanvas" class="offcanvas offcanvas-end d-lg-none">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title my-0">Blogs</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
                        </div>
                        <div class="offcanvas-body">
                            <ul class="nav navbar-nav">
                                <li class="nav-item">
                                    <a href="/blog" t-attf-class="nav-link #{(not blog) and 'active'}" t-att-title="wblog_all_title_string">All</a>
                                </li>
                                <li t-foreach="blogs" t-as="nav_blog" class="nav-item">
                                    <a t-attf-href="/blog/#{slug(nav_blog)}" t-attf-class="nav-link #{(blog and nav_blog.id == blog.id) and 'active' or ''}" t-att-title="nav_blog.name">
                                        <span t-field="nav_blog.name"/>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </t>
                <t t-else="">
                    <a class="btn btn-light dropdown-toggle d-flex align-items-center justify-content-between" role="button" t-att-title="blog.name if blog else wblog_all_title_string" data-bs-toggle="dropdown" aria-expanded="false">
                        <span t-if="blog" class="text-truncate" t-out="blog.name"/>
                        <span t-else="" class="text-truncate">All</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <a href="/blog" t-attf-class="dropdown-item #{(not blog) and 'active'}" title="All Blogs">All</a>
                        </li>
                        <li t-foreach="blogs" t-as="nav_blog">
                            <a t-attf-href="/blog/#{slug(nav_blog)}" t-attf-class="dropdown-item #{(blog and nav_blog.id == blog.id) and 'active' or ''}" t-att-title="nav_blog.name">
                                <span t-field="nav_blog.name"/>
                            </a>
                        </li>
                    </ul>
                </t>
            </div>
            <!-- 'Search Box' -->
            <t t-call="website.website_search_box_input">
                <t t-set="_form_classes" t-valuef="#{not len(blogs) &gt; 1 and 'ms-auto'} flex-grow-1 flex-lg-grow-0"/>
                <t t-set="search_type" t-valuef="blogs"/>
                <t t-set="action" t-value="blog_url(tag=tag,search=search)"/>
                <t t-set="display_description" t-valuef="true"/>
                <t t-set="display_detail" t-valuef="false"/>
                <input type="hidden" name="tag" t-att-value="tag"/>
                <input type="hidden" name="date_begin" t-att-value="date_begin"/>
                <input type="hidden" name="date_end" t-att-value="date_end"/>
            </t>
        </div>
    </nav>
</t>

