{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container my-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Membership Categories</h2>
                    
                    <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
                        {% for category in membership_categories %}
                        <div class="col">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">{{ category.name }}</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">K{{ category.fee }} per year</h6>
                                    <p class="card-text">{{ category.description }}</p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="text-center">
                        {% if user.is_authenticated %}
                            {% if membership %}
                                {% if membership.is_active %}
                                    <a href="{% url 'membership_profile' %}" class="btn btn-primary">View My Membership</a>
                                {% elif membership.membership_status == 'pending' %}
                                    <a href="{% url 'membership_profile' %}" class="btn btn-primary">View Application Status</a>
                                {% elif membership.membership_status == 'expired' %}
                                    <a href="{% url 'membership_profile' %}" class="btn btn-warning">Renew Membership</a>
                                {% elif membership.membership_status == 'rejected' %}
                                    <a href="{% url 'membership_application' %}" class="btn btn-primary">Submit New Application</a>
                                {% endif %}
                            {% else %}
                                <a href="{% url 'membership_application' %}" class="btn btn-primary">Apply for Membership</a>
                            {% endif %}
                        {% else %}
                            <a href="{% url 'login' %}?next={% url 'membership' %}%3Ffrom%3Dlogin" class="btn btn-primary">Login to Apply</a>
                            <p class="mt-3">
                                Don't have an account? 
                                <a href="{% url 'register' %}">Register here</a> to start your application.
                            </p>
                        {% endif %}
                    </div>

                    {% if user.is_authenticated and not membership %}
                    <div class="mt-4">
                        <h4 class="text-center mb-3">Application Process</h4>
                        <div class="d-flex justify-content-center">
                            <ul class="list-unstyled">
                                <li class="mb-2">1. Complete membership application form</li>
                                <li class="mb-2">2. Upload required documents (Profile Picture, CV, Certificates)</li>
                                <li class="mb-2">3. Submit payment proof</li>
                                <li>4. Wait for admin verification</li>
                            </ul>
                        </div>
                    </div>
                    {% endif %}

                    {% if not user.is_authenticated %}
                    <div class="mt-4">
                        <h4 class="text-center mb-3">How to Join</h4>
                        <div class="d-flex justify-content-center">
                            <ul class="list-unstyled">
                                <li class="mb-2">1. Create an account or login</li>
                                <li class="mb-2">2. Fill out the membership application</li>
                                <li class="mb-2">3. Upload required documents</li>
                                <li class="mb-2">4. Make payment and upload proof</li>
                                <li>5. Wait for admin verification</li>
                            </ul>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}