{% extends "layouts/base.html" %}
{% block main %}


<div class="page-head">
    <div class="page-head__bg" style="background-image: url({{cat.image.url}})">
        <div class="page-head__title">{{cat.name}}</div>
        <div class="page-head__breadcrumb">
            <ul class="uk-breadcrumb">
                <li><a href="/">Home</a></li>
                <li><span> {{cat.name}} </span></li>
            </ul>
        </div>
    </div>
</div>
<div class="page-content">
    <section class="s-categories">
        <div class="uk-section uk-container uk-container-large">
           
            <div class="section-content">
                <div class="uk-grid uk-grid-medium" data-uk-grid>
                    

                        {% for sub in cat.subcategories.all %}
                        <div class="uk-width-1-3@m">
                            <a class="cat-item uk-width-1-1 uk-inline" href="/category/{{cat.slug}}/{{sub.slug}}">
                                <img class="uk-width-1-1" src="{{sub.image.url}}" alt="cat-item">
                                <div class="uk-overlay uk-position-bottom">
                                    <p class="uk-text-center">{{sub.name}}</p>
                                </div>
                            </a>
                        </div>
                        {% endfor %}
                
                    
                </div>
            </div>
        </div>
    </section>
</div>


{% endblock main %}