{% load bootstrap %}
{% load i18n %}

<!-- kick fleet member modal -->
<div class="modal fade" id="kick-fleet-member" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title fs-5">
                    {% translate "Kick member from fleet" %}
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>

            <div class="modal-body">
                <p>
                    {% translate "Are you sure you want to kick this member from the fleet?" %}
                </p>

                <p>
                    <strong id="kick-fleet-member-character-name"></strong>
                </p>

                <p class="aa-callout aa-callout-danger modal-kick-fleet-member-error d-none">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    {% translate "Error" %}
                    <br>
                    <span class="modal-kick-fleet-member-error-message"></span>
                </p>
            </div>

            <div class="modal-footer">
                <button id="modal-button-cancel-kick-fleet-member" type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    <i class="fa-regular fa-hand"></i>
                    {% translate "Cancel" %}
                </button>

                <button id="modal-button-confirm-kick-fleet-member" type="button" class="btn btn-success btn-sm">
                    <i class="fa-solid fa-check"></i>
                    {% translate "Confirm" %}
                </button>
            </div>
        </div>
    </div>
</div>