{% load i18n %}
{% load humanize %}
{% load static %}

<div id="switchSkillSetModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="switchSkillSetModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="switchSkillSetModalLabel">Skill Set Filter</h5>
            </div>
            <div class="modal-hint card-body">
                <span class="text-muted">Select the skills you want to filter for this character.<br>
                You can add multiple skills to the filter.<br>
                If no skills are selected, the filter will be disabled.</span>
            </div>
            <div class="modal-body">
                <!-- Add search field and list for selected items inside the modal -->
                <div class="mb-3">
                    <input type="text" id="skillSearch" class="form-control" placeholder="Search skills...">
                </div>
                <div class="mb-3">
                    <select id="skillSetSelect" class="form-select" multiple></select>
                </div>
                <ul id="selectedSkillsList" class="list-group"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="submitSkillSet" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
