{% extends 'base/layout.html' %}
{% load django_tables2 %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">{{ page_title }}</h1>
    {% if add_url %}
    <a href="{% url add_url %}" class="btn btn-primary">
        <i class="mdi mdi-plus-thick"></i> Add
    </a>
    {% endif %}
</div>

{% if filter_form %}
<div class="card mb-3">
    <div class="card-header">
        <strong><i class="mdi mdi-filter-outline"></i> Filter</strong>
    </div>
    <div class="card-body">
        <form method="get">
            <div class="row g-2">
                {% for field in filter_form %}
                <div class="col-md-3">
                    <label class="form-label">{{ field.label }}</label>
                    {{ field }}
                </div>
                {% endfor %}
                <div class="col-12">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="mdi mdi-magnify"></i> Filter
                    </button>
                    <a href="?" class="btn btn-outline-secondary btn-sm ms-1">
                        <i class="mdi mdi-close"></i> Clear
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-body p-0">
        {% render_table table %}
    </div>
</div>

{% endblock %}