{% load i18n %}
{% if doctrine_category_filter.items %}
<div class="d-flex flex-column gap-2 mb-3">
    <div class="small text-muted fw-semibold mb-1">{% translate "Filter / Doctrine categories" %}</div>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-2">

        <div class="col">
            <a class="btn btn-sm w-100 text-start doctrine-cat-kpi-btn doctrine-cat-btn-all {% if not doctrine_category_filter.selected_key %}active{% endif %}"
               href="{{ doctrine_category_filter.all_url }}"
               aria-current="{% if not doctrine_category_filter.selected_key %}true{% else %}false{% endif %}">
                <span class="d-block small fw-semibold">{% translate "All" %}</span>
                <span class="d-block fw-bold">{{ doctrine_category_filter.all_count }}</span>
            </a>
        </div>

        {% for item in doctrine_category_filter.items %}
        <div class="col">
            <a class="btn btn-sm w-100 text-start doctrine-cat-kpi-btn {% if item.is_selected %}active{% endif %}"
               {% if item.color %}style="--doctrine-cat-border: {{ item.color }}; --doctrine-cat-bg: {{ item.color }};"{% endif %}
               href="{{ item.url }}"
               data-bs-tooltip="aa-mastery"
               data-bs-title="{{ item.name }}"
               aria-current="{% if item.is_selected %}true{% else %}false{% endif %}">
                <span class="d-block small fw-semibold text-truncate">{{ item.name }}</span>
                <span class="d-block fw-bold">{{ item.count }}</span>
            </a>
        </div>
        {% endfor %}

    </div>
</div>

<style>
    .doctrine-cat-kpi-btn {
        --doctrine-cat-border: var(--bs-secondary);
        --doctrine-cat-bg: var(--bs-secondary);
        background-color: transparent !important;
        border: 1.5px solid var(--doctrine-cat-border);
        color: var(--doctrine-cat-border);
        transition: all 0.15s ease-in-out;
    }

    .doctrine-cat-kpi-btn > span {
        color: var(--doctrine-cat-border);
    }

    .doctrine-cat-kpi-btn:hover,
    .doctrine-cat-kpi-btn:focus {
        background-color: rgba(0, 0, 0, 0.05) !important;
        border-color: var(--doctrine-cat-border);
        color: var(--doctrine-cat-border);
    }

    .doctrine-cat-kpi-btn.active {
        background-color: var(--doctrine-cat-bg) !important;
        border-color: var(--doctrine-cat-border) !important;
        color: #fff;
    }

    .doctrine-cat-kpi-btn.active > span {
        color: #fff;
    }

    .doctrine-cat-btn-all {
        --doctrine-cat-border: var(--bs-secondary);
        --doctrine-cat-bg: var(--bs-secondary);
    }

    @media (prefers-color-scheme: dark) {
        .doctrine-cat-kpi-btn:hover,
        .doctrine-cat-kpi-btn:focus {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }
    }
</style>
{% endif %}