{% extends 'base.html' %}
{% block title %}Caretakers{% endblock %}

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

    <div class="d-flex justify-content-between mb-3">
        <h4><i class="bi bi-person-badge"></i> Caretakers</h4>

        <a href="{% url 'caretaker_add' %}" class="btn btn-dark">
            <i class="bi bi-plus-lg"></i> Add Caretaker
        </a>
    </div>

    <!-- ✅ MESSAGES -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <div class="card shadow-sm">
        <table class="table table-hover mb-0">
            <thead class="table-dark">
                <tr>
                    <th>Username</th>
                    <th>Phone</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                {% for c in caretakers %}
                <tr>
                    <td>{{ c.username }}</td>
                    <td>{{ c.phone_number }}</td>
                    <td class="d-flex gap-2">

                        <a href="{% url 'caretaker_edit' c.id %}" class="btn btn-sm btn-dark">Edit</a>

                        <a href="{% url 'caretaker_delete' c.id %}" class="btn btn-sm btn-danger">
                            Delete
                        </a>

                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="3" class="text-center">No caretakers found</td>
                </tr>
                {% endfor %}
            </tbody>

        </table>
    </div>

</div>
{% endblock %}