{% 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>
            Category List
        </div>
        <div class="card-body">
            <table id="datatablesSimple">
                <thead >
                    <tr>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
                <tbody>
                    {% for category in categories %}
                        <tr>
                            <td>{{ category.name }}</td>  
                            <td>
                                <a class="btn btn-secondary col-1 mx-3" href="{% url 'category_edit' pk=category.pk %}" role="button">Edit</a>
                                <a class="btn btn-danger col-1 mx-3" href="delete/{{category.id}}" role="button" onclick="return confirm('Are you sure you want to delete ?')">Delete</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div>
                <a class="btn btn-primary col-1 mx-3" href="{% url 'category_new' %}" role="button">Add Category</a>
            </div>
        </div>
    </div>  
</div>

{% endblock content%}

<!-- <td>
    <a class="btn btn-secondary col-2 mx-2" href="{% url 'librarian_edit' pk=librarian.pk %}" 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> -->

<!-- <div>
    <a class="btn btn-primary col-2 mx-3" href="{% url 'librarian_new' %}" role="button">Add a Librarian</a>
    <a class="btn btn-primary col-2 mx-3" href="{% url 'librarian_login_history' %}" role="button">Librarian Login History</a>
</div> -->