{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}Futa Mchango - {{ group.name }}{% endblock %}

{% block content %}
<div class="delete-container" style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;">
    <div class="delete-card" style="background: var(--white); max-width: 450px; width: 100%; padding: 2rem; border-radius: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.1); text-align: center;">
        <i class="fas fa-exclamation-triangle" style="font-size: 4rem; color: var(--danger); margin-bottom: 1rem;"></i>
        <h2 style="color: var(--danger); margin-bottom: 1rem;">Futa Mchango?</h2>
        <p>Je, una uhakika unafuta mchango wa <strong>Tsh {{ contribution.amount|floatformat }}</strong> wa <strong>{{ contribution.member.full_name }}</strong>?</p>
        
        {% if contribution.payment_month and contribution.payment_year %}
        <p style="font-size: 0.85rem; color: var(--gray);">
            <i class="fas fa-calendar"></i> Mwezi: {{ contribution.payment_month }}/{{ contribution.payment_year }}
        </p>
        {% endif %}
        
        {% if is_batch %}
        <div style="background: #fff3cd; padding: 0.8rem; border-radius: 0.5rem; margin: 1rem 0;">
            <i class="fas fa-exclamation-triangle" style="color: #856404;"></i>
            <strong style="color: #856404;">⚠️ ONYO:</strong>
            <p style="font-size: 0.8rem; color: #856404; margin: 0.5rem 0 0 0;">
                Mchango huu ni sehemu ya malipo ya miezi mingi ({{ contribution.reference_number }}). 
                Kuufuta kunaweza kuathiri usahihi wa rekodi za miezi mingine.
            </p>
        </div>
        {% endif %}
        
        <p style="font-size: 0.8rem;">Kitendo hiki hakiwezi kutenguliwa.</p>
        
        <form method="POST" style="display: inline;">
            {% csrf_token %}
            <button type="submit" style="background: var(--danger); color: var(--white); padding: 0.8rem 1.5rem; border-radius: 0.75rem; font-weight: 600; border: none; cursor: pointer; margin-right: 0.5rem;">
                <i class="fas fa-trash"></i> Ndio, Futa
            </button>
        </form>
        <a href="{% url 'group_detail' group.id %}" style="background: var(--gray); color: var(--white); padding: 0.8rem 1.5rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600;">
            <i class="fas fa-times"></i> Ghairi
        </a>
    </div>
</div>
{% endblock %}