{% extends "base.html" %}

{% block title %}Members{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Members ({{ page_obj.paginator.count }})</h1>
    <a href="{% url 'member_create' %}" class="btn btn-primary">Add Member</a>
</div>

<!-- Search Form -->
<form method="get" class="mb-4">
    <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search members..." value="{{ query }}">
        <button class="btn btn-outline-secondary" type="submit">Search</button>
    </div>
</form>

<!-- Members Table -->
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Status</th>
                <th>Date Joined</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for member in page_obj %}
            <tr>
                <td>{{ member.member_id }}</td>
                <td>{{ member.full_name }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.email|default:"—" }}</td>
                <td>
                    <span class="badge bg-{% if member.membership_status == 'active' %}success{% else %}secondary{% endif %}">
                        {{ member.get_membership_status_display }}
                    </span>
                </td>
                <td>{{ member.date_joined|date:"M d, Y" }}</td>
                <td>
                    <a href="{% url 'member_detail' member.member_id %}" class="btn btn-sm btn-outline-primary">View</a>
                    <a href="{% url 'member_update' member.member_id %}" class="btn btn-sm btn-outline-secondary">Edit</a>
                    <a href="{% url 'member_delete' member.member_id %}" class="btn btn-sm btn-outline-danger">Delete</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" class="text-center">No members found.</td>
            </tr>
            {% endfor %}
           
        </tbody>
         
    </table>
    <a href="{% url 'dashboard' %}" class="btn btn-secondary my-3">
        Return to Dashboard
    </a>
</div>

{% endblock %}