{% load i18n %}
<div class="tab-pane" id="access" role="tabpanel" aria-label="{% trans "Instance access options" %}">
    {# two ways into a VM: its screen, and root's login, which reaches the guest on its disk or through its agent #}
    <div class="card">
        <div class="card-body">
            <section aria-labelledby="access-screen-heading">
                <h2 class="h6" id="access-screen-heading">{% trans "Screen" %}</h2>
                {% if not can_open_console %}
                <p class="mb-0">{% trans "Only the owners of this instance and administrators can open its console." %}</p>
                {% elif instance.status == 1 or instance.status == 3 %}
                {# one window per VM: opening it again reloads it; a paused VM shows its last screen #}
                <div class="d-flex flex-wrap align-items-center gap-2 gap-sm-3">
                    <button type="button" class="btn btn-primary" id="console_button"
                            data-url="{% url 'console' compute.id instance.uuid %}" data-window="console-{{ instance.uuid }}">{% trans "Open console" %}</button>
                    <span class="small text-body-secondary">{% trans "Opens the VM's screen in a new window." %}</span>
                </div>
                {% if vdi_reachable %}
                <div class="row g-2 align-items-center mt-2">
                    <label for="vdi_url_input" class="col-12 col-sm-3 col-lg-2 col-form-label">{% trans "Remote viewer" %}</label>
                    <div class="col-12 col-sm">
                        <input id="vdi_url_input" class="form-control" type="text" readonly aria-describedby="vdi-help">
                    </div>
                    <div class="col-12 col-sm-auto d-flex gap-2">
                        <a href="#" class="btn btn-outline-secondary" id="vdi_url">{% trans "Open" %}</a>
                        <a href="{% url 'instances:getvvfile' instance.id %}" class="btn btn-outline-secondary">{% trans "Download .vv file" %}</a>
                    </div>
                </div>
                <p class="small text-body-secondary mt-1 mb-0" id="vdi-help">{% trans "For virt-viewer or another VNC or SPICE client on your computer." %}</p>
                {% else %}
                <p class="small text-body-secondary mt-2 mb-0">{% trans "A remote viewer cannot reach this console: it listens on the host only, or it is a serial one." %}</p>
                {% endif %}
                {% else %}
                <p class="mb-0">{% trans "Start the VM to open its console." %}</p>
                {% endif %}
            </section>
            {% if can_change %}{% if app_settings.SHOW_ACCESS_ROOT_PASSWORD == 'True' or app_settings.SHOW_ACCESS_SSH_KEYS == 'True' %}
            <section class="border-top mt-4 pt-3" aria-labelledby="access-root-heading">
                <h2 class="h6" id="access-root-heading">{% trans "Log in as root" %}</h2>
                <p class="d-flex align-items-center gap-2 small mb-3" id="access-root-route">
                    {% if instance.status == 5 %}
                    <span class="power-dot bg-success" aria-hidden="true"></span>{% trans "Written to the VM's disk while it is off." %}
                    {% elif guest_access_ready %}
                    <span class="power-dot bg-success" aria-hidden="true"></span>{% trans "Sent to the running VM through its guest agent." %}
                    {% elif instance.status == 1 %}
                    <span class="power-dot" aria-hidden="true"></span><span class="text-body-secondary">{% trans "The guest agent is not connected: connect it, or shut the VM down." %}</span>
                    {% else %}
                    <span class="power-dot" aria-hidden="true"></span><span class="text-body-secondary">{% trans "Shut the VM down, or run it with its guest agent." %}</span>
                    {% endif %}
                </p>
                {% if app_settings.SHOW_ACCESS_ROOT_PASSWORD == 'True' %}
                <form action="{% url 'instances:rootpasswd' instance.id %}" method="post">{% csrf_token %}
                    <fieldset class="row g-2 align-items-center mb-2" aria-describedby="access-root-route"{% if not guest_access_ready %} disabled{% endif %}>
                        <label for="root-passwd" class="col-12 col-sm-3 col-lg-2 col-form-label">{% trans "Password" %}</label>
                        <div class="col-12 col-sm">
                            <input id="root-passwd" name="passwd" type="password" class="form-control" autocomplete="new-password" required>
                        </div>
                        <div class="col-12 col-sm-auto">
                            <button type="submit" name="rootpasswd" class="btn btn-outline-primary access-act">{% trans "Reset password" %}</button>
                        </div>
                    </fieldset>
                </form>
                {% endif %}
                {% if app_settings.SHOW_ACCESS_SSH_KEYS == 'True' %}
                <form action="{% url 'instances:add_public_key' instance.id %}" method="post">{% csrf_token %}
                    <fieldset class="row g-2 align-items-center" aria-describedby="access-root-route"{% if not publickeys or not guest_access_ready %} disabled{% endif %}>
                        <label for="root-sshkey" class="col-12 col-sm-3 col-lg-2 col-form-label">{% trans "SSH key" %}</label>
                        <div class="col-12 col-sm">
                            <select id="root-sshkey" name="sshkeyid" class="form-select">
                                {% for key in publickeys %}<option value="{{ key.id }}">{{ key.keyname }}</option>{% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-sm-auto">
                            <button type="submit" name="addpublickey" class="btn btn-outline-primary access-act">{% trans "Add key" %}</button>
                        </div>
                    </fieldset>
                    {% if not publickeys %}
                    <p class="small text-body-secondary mt-1 mb-0">{% trans "You have no saved public key." %} <a href="{% url 'accounts:profile' %}">{% trans "Add one in your profile." %}</a></p>
                    {% endif %}
                </form>
                {% endif %}
            </section>
            {% endif %}{% endif %}
        </div>
    </div>
</div>