{% load i18n %}
{% load static %}
{% load bootstrap_icons %}
{% if request.user.is_superuser %}
    <a href="#addvol" type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal">{% bs_icon 'plus' %} {% trans "Add disk" %}</a>

    {# one form: a card per disk source, the fields of the chosen one (the others hidden and disabled, so not sent); the source chooses the form's action #}
    <div class="modal fade" id="addvol" tabindex="-1" role="dialog" aria-labelledby="addInstanceVolumeLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable modal-fullscreen-sm-down">
            <form class="modal-content" id="addvol-form" method="post" action="{% url 'instances:add_new_vol' instance.id %}"
                  data-new="{% url 'instances:add_new_vol' instance.id %}" data-existing="{% url 'instances:add_existing_vol' instance.id %}"
                  aria-label="{% trans "Add disk form" %}">{% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="addInstanceVolumeLabel">{% trans "Add disk" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
                </div>
                <div class="modal-body">
                    <fieldset class="mb-3">
                        <legend class="form-label fs-6">{% trans "Disk source" %}</legend>
                        <div class="row row-cols-1 row-cols-sm-2 g-2">
                            {% trans "New disk" as title %}{% trans "An empty disk of the size you set, made in a pool." as help %}
                            {% include "radio_card.html" with name="disk_source" value="new" chosen="new" %}
                            {% trans "Existing volume" as title %}{% trans "A volume already in a pool of the host." as help %}
                            {% include "radio_card.html" with name="disk_source" value="existing" chosen="new" %}
                        </div>
                    </fieldset>

                    <fieldset data-kinds="new">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label class="form-label" for="addvol-storage">{% trans "Storage pool" %}</label>
                                <select id="addvol-storage" name="storage" class="form-select">
                                    {% for storage in storages_host %}
                                    <option value="{{ storage }}">{{ storage }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" for="addvol-name">{% trans "Name" %}</label>
                                <input id="addvol-name" type="text" class="form-control" name="name" required pattern="[a-zA-Z0-9\.\-_]+" aria-describedby="addvol-name-help">
                                <div class="form-text" id="addvol-name-help">{% trans "Letters, digits, dot, dash and underscore." %}</div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" for="addvol-size">{% trans "Size" %}</label>
                                <div class="input-group">
                                    <input id="addvol-size" type="text" class="form-control" name="size" value="10" maxlength="5" required pattern="[0-9]+" inputmode="numeric" aria-describedby="addvol-size-unit">
                                    <span class="input-group-text" id="addvol-size-unit">GiB</span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" for="addvol-format">{% trans "Format" %}</label>
                                <select id="addvol-format" name="format" class="form-select">
                                    {% for format in instance.formats %}
                                    <option value="{{ format }}"{% if format == default_format %} selected{% endif %}>{% trans format %}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="addvol-prealloc" name="meta_prealloc" value="true">
                                    <label class="form-check-label" for="addvol-prealloc">{% trans "Preallocate metadata (qcow2)" %}</label>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset data-kinds="existing">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label class="form-label" for="selected_storage">{% trans "Storage pool" %}</label>
                                <select id="selected_storage" name="selected_storage" class="form-select" required
                                        data-volumes-url="{% url 'volumes' instance.compute.id '__pool__' %}">
                                    <option value="" selected disabled>{% trans "Choose a pool" %}</option>
                                    {% for storage in storages_host %}
                                    <option value="{{ storage }}">{{ storage }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" for="vols">{% trans "Volume" %}</label>
                                <select id="vols" name="vols" class="form-select" required>
                                    <option value="" selected disabled>{% trans "Choose a pool first" %}</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>

                    <div class="row g-3 mt-0">
                        <div class="col-sm-6">
                            <label class="form-label" for="addvol-bus">{% trans "Bus" %}</label>
                            <select id="addvol-bus" name="bus" class="form-select">
                                {% for bus in bus_host %}
                                <option value="{{ bus }}"{% if bus == default_bus %} selected{% endif %}>{% trans bus %}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="addvol-cache">{% trans "Cache mode" %}</label>
                            <select id="addvol-cache" name="cache" class="form-select">
                                {% for mode, name in instance.cache_modes %}
                                <option value="{{ mode }}"{% if mode == default_cache %} selected{% endif %}>{% trans name %}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary">{% trans "Add disk" %}</button>
                </div>
            </form>
        </div>
    </div>
    <script src="{% static 'js/choice_dialog.js' %}"></script>
{% endif %}