{% sw_extends '@Storefront/storefront/page/content/listing.html.twig' %}

{% block page_content %}
    <div class="category-page-wrapper">
        {# Breadcrumb #}
        <div class="category-breadcrumb">
            {% block page_content_breadcrumb %}
                {{ parent() }}
            {% endblock %}
        </div>

        {# Category Header #}
        <div class="category-header">
            {% block cms_breadcrumb_headline %}
                <h1 class="category-title">{{ page.header.navigation.name }}</h1>
            {% endblock %}
        </div>

        <div class="category-content-wrapper">
            {# Left Sidebar Filters #}
            <aside class="category-sidebar">
                <div class="sidebar-inner">
                    <div class="sidebar-header">
                        <h2 class="sidebar-title">Filters</h2>
                        <button class="sidebar-close d-lg-none" type="button" aria-label="Close filters">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                    </div>

                    {% block page_content_listing_sidebar %}
                        <div class="filter-panel-wrapper-sidebar">
                            {{ parent() }}
                        </div>
                    {% endblock %}
                </div>
            </aside>

            {# Mobile Filter Toggle #}
            <div class="mobile-filter-toggle d-lg-none">
                <button class="btn btn-filter-toggle" type="button">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M4 6h12M4 10h12M4 14h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    Filter & Sort
                </button>
            </div>

            {# Main Content Area #}
            <main class="category-main">
                {# Toolbar with sorting and view options #}
                <div class="listing-toolbar">
                    <div class="toolbar-left">
                        <span class="product-count">
                            {{ page.listing.total }} Products
                        </span>
                    </div>
                    <div class="toolbar-right">
                        {% block page_content_listing_sorting %}
                            {{ parent() }}
                        {% endblock %}
                    </div>
                </div>

                {# Active Filters Display #}
                <div class="active-filters">
                    {% block page_content_listing_active_filters %}
                        {# Active filter tags will appear here #}
                    {% endblock %}
                </div>

                {# Product Grid #}
                <div class="product-listing-wrapper">
                    {% block page_content_listing %}
                        {{ parent() }}
                    {% endblock %}
                </div>

                {# Pagination #}
                <div class="listing-pagination">
                    {% block page_content_listing_pagination %}
                        {{ parent() }}
                    {% endblock %}
                </div>
            </main>
        </div>
    </div>

    {# Overlay for mobile sidebar #}
    <div class="sidebar-overlay d-lg-none"></div>
{% endblock %}