{% extends 'generic/object_list.html' %}
{% load helpers %}

{% block extra_styles %}
    <style>
        tr a.job_run {
            display: inline-flex;
            gap: 0.625rem; /* 10px */
        }

        tr a.job_run .btn {
            align-self: flex-start;
            margin-block: -0.09375rem; /* -1.5px */
        }

        tr :last-child {
            margin-bottom: 0;
        }

        tr.disabled td {
            color: var(--bs-secondary-color);
        }

        tr.disabled a.job_run {
            cursor: not-allowed;
            opacity: 0.65;
        }

        tr.disabled a.job_run .btn {
            cursor: inherit;
        }

        tr.disabled p {
            color: inherit;
        }
    </style>
{% endblock %}

{% block buttons %}
    <div class="btn-group" role="group">
        <a href="{% django_querystring display='list' %}"
           class="btn btn-primary{% if display == 'list' %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-view-sequential" aria-hidden="true"></span> List
        </a>
        {# djlint:off B123 #}
        <a href="{% django_querystring display='tiles' %}"
           class="btn btn-primary{% if display == 'tiles' %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-view-grid" aria-hidden="true"></span> Tiles
        </a>
        {# djlint:on B123 #}
    </div>

    <button
        aria-expanded="true"
        class="btn btn-secondary"
        data-nb-toggle="collapse-all"
        data-nb-target="#job_accordion .collapse"
        type="button"
        {% if display == "tiles" %}disabled{% endif %}
    >
        Collapse All Groups
    </button>
{% endblock %}