{% extends "base.html" %}

{% block content %}
<div class="container mt-4">

    <h1>Member Report</h1>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5>Total Members: {{ total_members }}</h5>
                    <p>
                        Active Members:
                        <span class="badge bg-success">{{ active_members }}</span>
                    </p>
                    <p>
                        Inactive:
                        <span class="badge bg-warning">{{ inactive_members }}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for member in members %}
                <tr>
                    <td>{{ member.member_id }}</td>
                    <td>{{ member.full_name }}</td>
                    <td>{{ member.phone }}</td>
                    <td>{{ member.get_membership_status_display }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center">
                        No members found.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <a href="{% url 'reports_list' %}" class="btn btn-secondary mt-3">
        Back to Reports
    </a>

</div>
{% endblock %}