{% load i18n %}

<div class="aasrp-datatable-filters dt-container">
    <div class="row">
        <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>
                <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>
                <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.pk }}">{{ ship.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <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>
</div>