{% extends 'base.html' %}
{% block content %}
<section class="page-header"><div class="container"><h1>Videos &amp; Property Tours</h1></div></section>
<section class="section"><div class="container">

  <div class="d-flex gap-2 flex-wrap mb-4">
    <a href="{% url 'videos:list' %}"
       class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-secondary{% endif %}">
      All Videos
    </a>
    {% for val, label in category_choices %}
    <a href="{% url 'videos:list' %}?category={{ val }}"
       class="btn btn-sm {% if selected_category == val %}btn-primary{% else %}btn-outline-secondary{% endif %}">
      {{ label }}
    </a>
    {% endfor %}
  </div>

  {% if page_obj.object_list %}
  <div class="row g-4">
    {% for v in page_obj.object_list %}
    <div class="col-md-6 col-lg-4">
      <a href="{{ v.get_absolute_url }}" class="video-card">
        {% if v.thumbnail %}<img src="{{ v.thumbnail.url }}" alt="{{ v.title }}">
        {% else %}<div class="video-placeholder"><i class="bi bi-play-circle"></i></div>{% endif %}
        <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
        <div class="video-info">
          <h6>{{ v.title }}</h6>
          <div class="d-flex align-items-center gap-2 mt-1">
            {% if v.duration %}<small>{{ v.duration }}</small>{% endif %}
            <span class="badge" style="font-size:.7rem;background:rgba(62,63,153,.75);color:#fff;">{{ v.get_category_display }}</span>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-center text-muted py-5">No videos found{% if selected_category %} in this category{% endif %}.</p>
  {% endif %}

</div></section>
{% endblock %}