{% load i18n %}

<div class="aasrp-datatable-filters">
    <p class="mb-1 fw-bold">{% translate "Filter your SRP requests by" %}:</p>
    <div class="align-items-center d-flex flex-wrap gap-3 mb-3">
{#        <div class="d-flex align-items-center gap-2">#}
        <div>
            <label for="filter-character" class="col-auto">{% translate "Character" %}</label>
            <select id="filter-character" class="form-select w-auto">
                <option value="">{% translate "All characters" %}</option>

                {% for character_name, character_id in characters %}
                    <option value="{{ character_id }}">{{ character_name }}</option>
                {% endfor %}
            </select>
        </div>

{#        <div class="d-flex align-items-center gap-2">#}
        <div>
            <label for="filter-ship" class="col-auto">{% translate "Ship" %}</label>
            <select id="filter-ship" class="form-select w-auto">
                <option value="">{% translate "All ships" %}</option>

                {% for ship in ships %}
                    <option value="{{ ship.id }}">{{ ship.name }}</option>
                {% endfor %}
            </select>
        </div>

{#        <div class="d-flex align-items-center gap-2">#}
        <div>
            <label for="filter-request-status" class="col-auto">{% translate "Request status" %}</label>
            <select id="filter-request-status" class="form-select w-auto">
                <option value="">{% translate "All requests" %}</option>
                <option value="Pending">{% translate "Pending requests" %}</option>
                <option value="Approved">{% translate "Approved requests" %}</option>
                <option value="Rejected">{% translate "Rejected requests" %}</option>
            </select>
        </div>
    </div>
</div>