{% extends 'shared/base.html' %}
{% block title %}Seva Bhaav | Piramal Seva Setu{% endblock %}
{% block content %}
<section class="section-pad pt-5">
<div class="container">
  <div class="mb-4"><div class="eyebrow">Seva Bhaav</div><h1 class="fw-bold">Give your time. Create an impact.</h1><p class="text-muted">Browse published volunteering opportunities. Basic details are public; nomination is available to authenticated Piramal Finance employees.</p></div>
  <form class="row g-2 bg-white p-3 rounded-4 border mb-4" method="get">
    <div class="col-md-4"><input class="form-control" name="q" value="{{ request.args.get('q','') }}" placeholder="Search activities"></div>
    <div class="col-md-3"><select class="form-select" name="city_id"><option value="">All cities</option>{% for city in cities %}<option value="{{ city.id }}" {% if request.args.get('city_id')|int == city.id %}selected{% endif %}>{{ city.name }}</option>{% endfor %}</select></div>
    <div class="col-md-3"><select class="form-select" name="category_id"><option value="">All causes</option>{% for c in categories %}<option value="{{ c.id }}" {% if request.args.get('category_id')|int == c.id %}selected{% endif %}>{{ c.name }}</option>{% endfor %}</select></div>
    <div class="col-md-2 d-grid"><button class="btn btn-primary">Filter</button></div>
  </form>
  <div class="row g-4">
  {% for activity in activities %}
    <div class="col-md-6 col-lg-4"><div class="card seva-card">
      {% set img = (activity.images|selectattr('is_primary')|list|first) or (activity.images|first) %}
      {% if img %}<img src="{{ img.file_path }}" class="card-img-top" alt="{{ img.alt_text or activity.title }}">{% else %}<div class="placeholder-art">🤝</div>{% endif %}
      <div class="card-body"><span class="badge rounded-pill text-bg-light status-pill mb-2">{{ activity.cause_category.name }}</span><h5>{{ activity.title }}</h5><p class="text-muted">{{ activity.short_impact_statement or '' }}</p><div class="small text-muted mb-3">{{ activity.city.name }} · {{ activity.start_datetime.strftime('%d %b %Y, %I:%M %p') }}</div><a href="{{ url_for('seva_bhaav.detail', activity_id=activity.id) }}" class="btn btn-outline-primary">View Details</a></div>
    </div></div>
  {% else %}<div class="col-12"><div class="p-5 bg-white rounded-4 text-center"><h5>No matching opportunities right now.</h5><p class="text-muted mb-0">Try another city, cause or search term.</p></div></div>{% endfor %}
  </div>
</div>
</section>
{% endblock %}