{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load bootstrap_icons %}

{% block title %}{% trans "Create new instance" %} - {% trans "Machine" %}{% endblock %}

{% block page_heading%}
{% blocktrans with host=compute.name %}New instance on {{ host }} {% endblocktrans %}
{% endblock page_heading %}

{% block content %}
    {% include 'pleasewaitdialog.html' %}
    <div>
        {% include "create_steps.html" with step=2 %}

        <section class="card mb-3" aria-labelledby="machine-heading">
            <div class="card-body">
                <h2 class="h5 card-title" id="machine-heading">{% trans "Machine" %}</h2>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="select_archs">{% trans "Architecture" %}</label>
                        <select class="form-select" id="select_archs" name="archs">
                            {% for hpv in hypervisors %}
                            <option value="{{ hpv }}"{% if hpv == default_arch %} selected{% endif %}>{{ hpv }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="select_chipset">{% trans "Machine type" %}</label>
                        <select class="form-select" id="select_chipset" name="chipset" aria-describedby="chipset_help"
                                data-machines-url="{% url 'machines' compute.id '__arch__' %}" data-default="{{ default_machine }}"></select>
                        <div id="chipset_help" class="form-text">{% trans "The host's machine types for this architecture." %}</div>
                    </div>
                </div>
            </div>
        </section>

        <div class="d-flex flex-wrap gap-2 justify-content-end mb-4">
            <a class="btn btn-link" href="{% url 'instances' compute.id %}">{% trans "Cancel" %}</a>
            <button class="btn btn-primary" type="button" id="next" disabled
                    data-create-url="{% url 'instances:create_instance' compute.id '__arch__' '__machine__' %}">{% trans "Next" %}</button>
        </div>

        <section class="accordion mb-3" aria-labelledby="xml-heading">
            <div class="accordion-item">
                <h2 class="accordion-header" id="xml-heading">
                    <button class="accordion-button{% if not xml_error %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
                            aria-expanded="{% if xml_error %}true{% else %}false{% endif %}" aria-controls="from-xml">
                        {% trans "Or define it from XML" %}
                    </button>
                </h2>
                <div class="accordion-collapse collapse{% if xml_error %} show{% endif %}" id="from-xml">
                    <form method="post" class="accordion-body" aria-label="{% trans "Create instance from XML" %}" data-please-wait>{% csrf_token %}
                        {% if xml_error %}<div class="alert alert-danger form-errors" role="alert">{{ xml_error }}</div>{% endif %}
                        <input type="hidden" name="dom_xml" value="{{ xml }}">
                        <div class="xmlheight mb-3"><textarea id="editor" aria-label="{% trans "Domain XML" %}">{{ xml }}</textarea></div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary" name="create_xml">
                                {% trans "Create VM" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block script %}
<script src="{% static "js/ace/ace.js" %}"></script>
<script src="{% static "js/create_machine.js" %}"></script>
{% endblock %}