{% extends "base.html" %}
{% load static %}

{% block content %}

 <section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary" data-overlay-dark="8" data-background="{% static 'img/banner/2.jpg' %}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 text-center">
                <h1> <span class="font-weight-800 text-primary">{{ category.name }}</span></h1>
                <ul class="list-unstyled">
                    <li><a href="index.html">HOME</a></li>
                    <li>{{ category.name }} → {{ subcategory.name }}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="line-animated">
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
    </div>
</section>

<section class="py-4">
    <div class="container-fluid py-5">
        <div class="row g-4 justify-content-center">

            {% for sub in subcategories %}
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 py-5">
                    <a href="{% url 'projects' sub.id %}" class="text-decoration-none">
                        <div class="card p-3 shadow-sm py-5">
                            <i class="{{ sub.icon }} m-2 p-2"></i>
                            <h5 class="text-center">{{ sub.name }}</h5>
                        </div>
                    </a>
                </div>
        

            {% empty %}
                <div class="col-12 text-center py-5">
                    <p class="text-muted">🚫 No Subcategories Found</p>
                </div>
            {% endfor %}

        </div>
    </div>
</section>



{% endblock %}