{% load django_htmx phoxtail_design_tags %}
<div class="phoxtail-modal-overlay"
     onclick="closeModal()"
     data-modal-animation="slide-right"
     data-animation-duration="300ms">
    <div class="phoxtail-modal-drawer phoxtail-drawer--glass"
         style="--phoxtail-drawer-width: 480px;"
         onclick="event.stopPropagation()">
        <div class="phoxtail-drawer__scroll">
            <div class="phoxtail-drawer__header">
                <div class="phoxtail-drawer__title-row">
                    <h2 class="phoxtail-drawer__title">Edit Remote</h2>
                    <button class="phoxtail-close-btn"
                            onclick="closeModal()"
                            aria-label="Close"
                            type="button">
                        {% icon "close" %}
                    </button>
                </div>
            </div>
            <div class="phoxtail-drawer__body">
                <div class="phoxtail-form-stack">
                    <div id="edit-remote-form-body">
                        <form id="edit-remote-form"
                              hx-post="{% url 'remotes:edit' remote.pk %}"
                              hx-target="#core-modal-placeholder-wrapper"
                              hx-swap="none">
                            {% csrf_token %}
                            <div class="phoxtail-form-stack">
                                {% include "phoxtail_remotes/admin/remotes/partials/forms/edit/form_body.html" %}
                            </div>
                        </form>
                    </div>
                    <div id="rga-edit-delete-csrf" style="display:none;">{% csrf_token %}</div>
                    <div class="phoxtail-danger-section">
                        <div class="phoxtail-danger-section__header">
                            <div>
                                <h3 class="phoxtail-danger-section__title">Disconnect Remote</h3>
                                <p class="phoxtail-danger-section__text">
                                    Removes this connection. Installed variants are not affected.
                                </p>
                            </div>
                        </div>
                        <button class="phoxtail-btn phoxtail-btn--danger phoxtail-btn--full"
                                type="button"
                                hx-post="{% url 'remotes:delete' remote.pk %}"
                                hx-include="#rga-edit-delete-csrf"
                                hx-swap="none"
                                hx-confirm="Disconnect '{{ remote.name }}'? This cannot be undone.">
                            <span>Disconnect</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="phoxtail-drawer__footer">
            <button class="phoxtail-btn phoxtail-btn--secondary"
                    onclick="closeModal()"
                    type="button">Cancel</button>
            <button class="phoxtail-btn phoxtail-btn--primary"
                    type="submit"
                    form="edit-remote-form">Save</button>
        </div>
    </div>
</div>