{% extends 'base.html' %}

{% block title %}Support Application{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4 p-lg-5">
                    <h4 class="fw-bold mb-2">Donation Form</h4>
                    <p class="text-muted mb-4">
                        Share your details and we will follow up with you regarding bursary or scholarship support.
                    </p>

                    <form method="post">
                        {% csrf_token %}
                        {{ form.non_field_errors }}

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name</label>
                                {{ form.full_name }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                {{ form.email }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone</label>
                                {{ form.phone }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Support Type</label>
                                {{ form.support_type }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Amount Supported</label>
                                {{ form.amount_supported }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Preferred Contact Method</label>
                                {{ form.preferred_contact_method }}
                            </div>
                            <div class="col-12">
                                <label class="form-label">Church Branch</label>
                                {{ form.church_branch }}
                            </div>
                            <div class="col-12">
                                <label class="form-label">Reason for Remarks</label>
                                {{ form.remarks }}
                            </div>
                        </div>

                        <div class="mt-4 d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-success">Submit Application</button>
                            <a href="{% url 'core:home' %}" class="btn btn-outline-secondary">Back Home</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}