{% extends 'shared/base.html' %}
{% block title %}{{ activity.title }} | Seva Bhaav{% endblock %}
{% block content %}
<section class="detail-page">
  <div class="container pt-4 pt-lg-5">
    {% set img = (activity.images|selectattr('is_primary')|list|first) or (activity.images|first) %}
    <div class="detail-banner {% if not img %}detail-banner-fallback{% endif %}">
      {% if img %}<img src="{{ img.file_path }}" alt="{{ img.alt_text or activity.title }}">{% endif %}
      <div class="detail-banner-shade"></div>
      <div class="detail-banner-content">
        <div class="eyebrow light">Seva Bhaav · {{ activity.cause_category.name }} · {{ activity.city.name }}</div>
        <h1>{{ activity.title }}</h1>
        <p>{{ activity.short_impact_statement }}</p>
      </div>
    </div>

    <div class="detail-summary-grid">
      <div class="detail-summary-item"><span>Date</span><strong>{{ activity.start_datetime.strftime('%d %b %Y') }}</strong></div>
      <div class="detail-summary-item"><span>Time</span><strong>{{ activity.start_datetime.strftime('%I:%M %p') }} - {{ activity.end_datetime.strftime('%I:%M %p') }}</strong></div>
      <div class="detail-summary-item"><span>Location</span><strong>{{ activity.meeting_point or activity.city.name }}</strong></div>
      <div class="detail-summary-item"><span>Availability</span><strong>{% if remaining is none %}Open{% else %}{{ remaining }} spot{{ '' if remaining == 1 else 's' }} remaining{% endif %}</strong></div>
    </div>

    <div class="detail-content-card">
      <div class="row g-5">
        <div class="col-lg-8">
          <div class="eyebrow">About this opportunity</div>
          <h3 class="mt-2">About the initiative</h3>
          <div class="content-prose text-muted">{{ activity.description or 'Details will be shared shortly.' }}</div>
          {% if current_user.is_authenticated %}
            {% if activity.what_you_will_do %}<h4 class="mt-4">What will you be doing?</h4><div class="content-prose text-muted">{{ activity.what_you_will_do }}</div>{% endif %}
            {% if activity.what_to_carry %}<h4 class="mt-4">What should you carry?</h4><div class="content-prose text-muted">{{ activity.what_to_carry }}</div>{% endif %}
            {% if activity.eligibility_requirements %}<h4 class="mt-4">Participation requirements</h4><div class="content-prose text-muted">{{ activity.eligibility_requirements }}</div>{% endif %}
            {% if activity.safety_instructions %}<h4 class="mt-4">Safety & logistics</h4><div class="content-prose text-muted">{{ activity.safety_instructions }}</div>{% endif %}
          {% else %}
            <div class="alert alert-light border mt-4">Employee-only participation instructions, eligibility and logistics are available after login.</div>
          {% endif %}
        </div>
        <div class="col-lg-4">
          <div class="action-panel sticky-lg-top">
            <div class="eyebrow">Take part</div>
            <h4>Ready to participate?</h4>
            {% if registration %}
              <p class="text-muted">You already have a registration for this activity.</p>
              <span class="badge text-bg-info">{{ registration.status.replace('_',' ').title() }}</span>
              <div class="mt-3"><a href="{{ url_for('employee.my_seva') }}" class="btn btn-primary w-100">View My Seva</a></div>
            {% elif current_user.is_authenticated %}
              <p class="text-muted">Nomination will use your employee profile and may require manager approval for working-hours activities.</p>
              {% if remaining == 0 %}<button class="btn btn-secondary w-100" disabled>Activity Full</button>{% else %}<a href="{{ url_for('seva_bhaav.register', activity_id=activity.id) }}" class="btn btn-primary w-100">Nominate Myself</a>{% endif %}
            {% else %}
              <p class="text-muted">Basic activity information is public. Piramal Finance employees can log in to nominate themselves.</p>
              <a href="{{ url_for('auth.login') }}" class="btn btn-primary w-100">Employee Login to Nominate</a>
            {% endif %}
            {% if activity.partner %}<div class="action-panel-meta"><span>Implementation partner</span><strong>{{ activity.partner.name }}</strong></div>{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}