{% load i18n %}

<div class="card card-default">
    <div class="card-header">
        <div class="card-title mb-0">
            {% translate "SRP requests" %}

            <div class="float-end">
                {% translate "Filter by request status" %}

                <div class="btn-group btn-group-sm ms-2 btn-group-aasrp-request-status-filter" role="group" aria-label="{% translate 'Filter by request status' %}">
                    <input
                        type="radio"
                        class="btn-check"
                        id="aasrp-srp-request-filter-all"
                        name="btn-srp-status-filter"
                        autocomplete="off"
                        checked
                    >
                    <label
                        for="aasrp-srp-request-filter-all"
                        class="btn btn-outline-primary"
                    >
                        {% translate "All" %}
                    </label>

                    <input
                        type="radio"
                        class="btn-check"
                        id="aasrp-srp-request-filter-pending"
                        name="btn-srp-status-filter"
                        autocomplete="off"
                    >
                    <label
                        for="aasrp-srp-request-filter-pending"
                        class="btn btn-outline-primary"
                    >
                        {% translate "Pending" %}
                    </label>

                    <input
                        type="radio"
                        class="btn-check"
                        id="aasrp-srp-request-filter-approved"
                        name="btn-srp-status-filter"
                        autocomplete="off"
                    >
                    <label
                        for="aasrp-srp-request-filter-approved"
                        class="btn btn-outline-primary"
                    >
                        {% translate "Approved" %}
                    </label>

                    <input
                        type="radio"
                        class="btn-check"
                        id="aasrp-srp-request-filter-rejected"
                        name="btn-srp-status-filter"
                        autocomplete="off"
                    >
                    <label
                        for="aasrp-srp-request-filter-rejected"
                        class="btn btn-outline-primary"
                    >
                        {% translate "Rejected" %}
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-aasrp table-srp-requests table-vertical-middle w-100" id="tab_aasrp_srp_requests">
                <thead>
                    <tr>
                        <th class="w-auto">{% translate "Request time" %}</th>
                        <th class="w-auto">{% translate "Requestor" %}</th>
                        <th class="w-auto">{% translate "Character" %}</th>
                        <th class="w-auto">{% translate "Request code" %}</th>
                        <th class="w-auto">{% translate "Ship" %}</th>
                        <th class="w-auto">{% translate "ISK lost" %}</th>
                        <th class="w-auto">
                            {% translate "SRP payout" %}
                            <i
                                class="fa-solid fa-circle-question fa-fw"
                                data-bs-tooltip="aa-srp"
                                title="{% translate 'Click on the value to edit, Enter to save, ESC to cancel.' %}"
                            ></i>
                        </th>
                        <th class="w-auto">{% translate "Status" %}</th>
                        <th class="w-auto">{% translate "Actions" %}</th>
                        <th class="w-auto"><!-- {% translate "Bulk actions" %} --></th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
