{% extends 'shared/base.html' %}
{% block title %}{{ cause.name }} | Seva Daan{% endblock %}
{% block content %}
<section class="detail-page">
  <div class="container pt-4 pt-lg-5">
    {% set img = cause.images|first %}
    <div class="detail-banner seva-daan-banner {% if not img %}detail-banner-fallback{% endif %}">
      {% if img %}<img src="{{ img.file_path }}" alt="{{ img.alt_text or cause.name }}">{% endif %}
      <div class="detail-banner-shade"></div>
      <div class="detail-banner-content">
        <div class="eyebrow light">Seva Daan · {{ cause.cause_category.name }}</div>
        <h1>{{ cause.name }}</h1>
        <p>Give what you can. Help create what matters.</p>
      </div>
    </div>

    <div class="detail-content-card">
      <div class="row g-5">
        <div class="col-lg-8">
          <div class="eyebrow">The cause</div>
          <h3 class="mt-2">The need</h3>
          <div class="content-prose text-muted">{{ cause.problem_statement or 'Cause details will be updated shortly.' }}</div>
          {% if cause.contribution_enables %}<h4 class="mt-4">What your contribution enables</h4><div class="content-prose text-muted">{{ cause.contribution_enables }}</div>{% endif %}
          {% if cause.partner %}<h4 class="mt-4">Implementing partner</h4><p class="text-muted">{{ cause.partner.name }}</p>{% endif %}
        </div>
        <div class="col-lg-4">
          <div class="action-panel sticky-lg-top">
            <div class="eyebrow">Seva Daan</div>
            <h4>Support this cause</h4>
            {% if cause.fundraising_target %}<div class="fundraising-target"><span>Fundraising target</span><strong>₹{{ '{:,.0f}'.format(cause.fundraising_target) }}</strong></div>{% endif %}
            {% if cause.suggested_amounts %}<div class="d-grid gap-2 my-3">{% for item in cause.suggested_amounts|sort(attribute='sort_order') %}<div class="donation-option"><strong>₹{{ '{:,.0f}'.format(item.amount) }}</strong>{% if item.impact_text %}<div class="small text-muted">{{ item.impact_text }}</div>{% endif %}</div>{% endfor %}</div>{% endif %}
            {% if current_user.is_authenticated %}<button class="btn btn-primary w-100" disabled>Donation Payment Flow — Next Sprint</button><div class="small text-muted mt-2">The approved payment gateway will be connected here.</div>{% else %}<a href="{{ url_for('auth.login') }}" class="btn btn-primary w-100">Employee Login to Donate</a>{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}