{% extends "phoxtail_core/modal_drawer.html" %}
{% comment %}
A remote (level 0), titled by its name: its fields, saved by the footer's Save, and
Disconnect. A refusal redraws the fields in place (#edit-remote-form); a save
or a disconnect closes the drawer, and the list redraws itself.
{% endcomment %}
{% load i18n phoxtail_design_tags %}
{% block title %}{{ remote.name }}{% endblock %}
{% block body %}
    <div class="phoxtail-form-stack">
        <form id="edit-remote-form"
              hx-disabled-elt="#base-modal .phoxtail-drawer__footer button"
              hx-post="{% url 'remotes:edit' remote.pk %}"
              hx-swap="none">
            {% csrf_token %}
            {% include 'phoxtail_remotes/admin/remotes/partials/forms/fields.html' %}
        </form>
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "danger" %}
                {% translate "Disconnect remote" %}
            </h3>
            <p class="phx-card__text">{% translate "Removes this connection. Installed variants are not affected." %}</p>
            <div id="remote-delete-csrf" hidden>{% csrf_token %}</div>
            <button class="phx-button phx-button--danger phx-button--full"
                    type="button"
                    hx-post="{% url 'remotes:delete' remote.pk %}"
                    hx-include="#remote-delete-csrf"
                    hx-swap="none"
                    hx-disabled-elt="this, #base-modal .phoxtail-drawer__footer button"
                    hx-confirm="{% blocktranslate with name=remote.name %}Disconnect '{{ name }}'? This cannot be undone.{% endblocktranslate %}">
                <span>{% translate "Disconnect" %}</span>
            </button>
        </div>
    </div>
{% endblock %}
{% block actions %}
    <button class="phx-button phx-button--primary" type="submit" form="edit-remote-form">
        <span>{% translate "Save" context "button" %}</span>
    </button>
{% endblock %}