{% load app_extras %}

<button type="button"
        hx-get="/{{ modal_type }}_modal"
        hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}", "title": "{{ title|addslashes_double }}", "source": "{{ source }}", "media_type": "{{ media_type }}", "image": "{{ image }}", "media_id": "{{ media_id }}" {% if season_number != None %}, "season_number": "{{ season_number }}"{% endif %} {% if episode_number != None %}, "episode_number": "{{ episode_number }}"{% endif %}}'
        hx-target="#{{ modal_type }}-modal-{{ media_type }}_{{ media_id }}{% if season_number != None %}_{{ season_number }}{% endif %}{% if episode_number != None %}_{{ episode_number }}{% endif %}"
        hx-trigger="click once"
        title="{{ modal_type|title }}"
        class="btn btn-secondary open-{{ modal_type }}-btn"
        data-bs-toggle="modal"
        data-bs-target="#{{ modal_type }}-modal-{{ media_type }}_{{ media_id }}{% if season_number != None %}_{{ season_number }}{% endif %}{% if episode_number != None %}_{{ episode_number }}{% endif %}">
    {% if modal_type == "track" %}
        <i class="bi bi-pencil-square"></i>
    {% elif modal_type == "history" %}
        <i class="bi bi-hourglass-split"></i>
    {% elif modal_type == "lists" %}
        <i class="bi bi-collection"></i>
    {% endif %}
</button>

<div class="modal fade {{ modal_type }}-modal"
     id="{{ modal_type }}-modal-{{ media_type }}_{{ media_id }}{% if season_number != None %}_{{ season_number }}{% endif %}{% if episode_number != None %}_{{ episode_number }}{% endif %}"
     tabindex="-1"
     aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-grow" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>
