{% extends 'base.html' %}
{% block content%}

<div class="container-fluid px-4 pt-2">
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            Member List
        </div>
        <div class="card-body">
            <table id="datatablesSimple">
                <thead >
                    <tr class="bg-danger">
                        <th>Name</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Phone Number</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Phone Number</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
                <tbody>
                    {% for member in members %}
                        <tr>
                            <td>{{ member.name }}</td>
                            <td>{{ member.email }}</td>
                            <td>{{ member.address }}</td>
                            <td>{{ member.phone_number }}</td>
                            <td>
                                <a class="btn btn-secondary col-3 mx-2" href="edit/{{member.id}}" role="button">Edit</a>
                                <a class="btn btn-danger col-3 mx-3" href="delete/{{member.id}}" role="button" onclick="return confirm('Are you sure you want to delete {{ member.name }}')">Delete</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div>
                <a class="btn btn-primary col-1 mx-3" href="{% url 'member_new' %}" role="button">Add Member</a>
            </div>
        </div>
    </div>  
</div>

{% endblock content%}
