{% for p in projects %}
<div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-4 text-center">
    <div class="portfolio-item">
        <div class="card shadow-sm p-2 text-center">
            {% if p.demo_video %}
            <video autoplay muted loop playsinline controls style="width:100%; height:160px; object-fit:cover; border-radius:10px;">
                <source src="{{ p.demo_video.url }}" type="video/mp4">
            </video>
            {% else %}
            <div class="no-preview p-5 text-muted">No Video</div>
            {% endif %}
            <h6 class="fw-bold mt-2">{{ p.title|truncatechars:25 }}</h6>
            <a href="{% url 'project-detail' p.id %}" class="btn btn-primary w-100 mt-1">View</a>
        </div>
    </div>
</div>
{% empty %}
<p class="text-center">No videos available in this category.</p>
{% endfor %}