{% 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>
            Librarian List
        </div>
        <div class="card-body">
            <table id="datatablesSimple">
                <thead >
                    <tr>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
                <tbody>
                    {% for librarian in librarian %}
                        <tr>
                            <td>{{ librarian.name }}</td>
                            <td>{{ librarian.user.username }}</td>
                            <td>{{ librarian.user.email }}</td>
                            <td>
                                <a class="btn btn-secondary col-2 mx-2" href="{% url 'librarian_edit' id=librarian.id %}" role="button">Edit</a>
                                <a class="btn btn-danger col-2 mx-2" href="delete/{{librarian.id}}" role="button" onclick="return confirm('Are you sure you want to delete {{book.title}}?')">Delete</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div>
                <a class="btn btn-primary col-1 mx-3" href="{% url 'librarian_new' %}" role="button">Add Librarian</a>
                <a class="btn btn-primary col-2 mx-3" href="{% url 'librarian_login_history' %}" role="button">Librarian Login History</a>
            </div>
        </div>
    </div>  
</div>

{% endblock content%}