{{ header }}

<div class="fr-shop-page">

<section class="shop-hero">

    <div class="container">

        <nav class="franklin-breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
            <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
                {% if loop.last %}
                    {{ breadcrumb.text }}
                {% elseif loop.first %}
                    <a href="{{ breadcrumb.href }}">
                        <i class="bi bi-house-door-fill"></i> Home
                    </a>
                {% else %}
                    <a href="{{ breadcrumb.href }}">
                        {{ breadcrumb.text }}
                    </a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>

        <div class="shop-hero-content">

            <h1>{{ heading_title }}</h1>

            <p>{{ description }}</p>

            <form action="{{ action }}" method="get" class="shop-search">

                <input
                    type="hidden"
                    name="route"
                    value="product/search">

                <input
                    type="text"
                    name="search"
                    value="{{ search }}"
                    placeholder="Search herbal products...">

                <button type="submit">

                    <i class="bi bi-search"></i>

                </button>

            </form>

        </div>

    </div>

</section>

<!-- Category Section -->
<section class="shop-categories">

    <div class="container">

        <h2 class="section-title">

            Browse Categories

        </h2>

       <div class="row g-4">

{% for category in categories %}

<div class="col-lg-3 col-md-6">

    <a href="{{ category.href }}" class="category-card">

       <div class="category-image">
    <img src="{{ category.image }}" alt="{{ category.name }}" loading="lazy">

</div>

        <div class="category-content">

            <h3>{{ category.name }}</h3>

            <span class="category-count">

                {{ category.count }} Products

            </span>

            <span class="shop-link">

                Shop Now

                <i class="bi bi-arrow-right"></i>

            </span>

        </div>

    </a>

</div>

{% endfor %}

</div>

    </div>

</section>

</div>

{{ footer }}