{% 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 text-center">

        <h1 class="font-weight-800 text-primary">
            {{ category.name }}
        </h1>

        <ul class="list-unstyled">
            <li><a href="{% url 'home' %}">HOME</a></li>
            <li>{{ category.name }} → {{ subcategory.name }} → Project Demos Videos</li>
        </ul>
    </div>
</section>




<section class="py-5">
    <div class="container">
        <div class="row g-4">

            {% for p in projects %}
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card shadow p-3 text-center h-100">

                    {% if p.demo_video %}
                        <video controls autoplay muted playsinline 
                               style="width:100%; height:200px; object-fit:cover; border-radius:5px;">
                            <source src="{{ p.demo_video.url }}" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    {% else %}
                        <div style="width:100%; height:200px; background:#d83c5e; border-radius:5px; display:flex; align-items:center; justify-content:center;">
                            <span class="text-muted">No Preview</span>
                        </div>
                    {% endif %}

                    <h5 class="fw-bold mt-3">{{ p.title }}</h5>

                    <a href="{% url 'project-detail' p.id %}" class="btn btn-dark mt-2 w-100">
                        View Details
                    </a>

                </div>
            </div>
            {% endfor %}

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

{% endblock %}