<form data-dojo-type="dijit.form.Form">
    <script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
        doSubmit({
          form: this,
          event: e,
          url: '{{ request.path }}',
          progressbar: true,
          onComplete: function(){zfswizardcheckings();}
        });
    </script>
    <table>
        {% if form.non_field_errors %}
        <tr>
            <td colspan="2">
                {{ form.non_field_errors }}
            </td>
        </tr>
        {% endif %}
        <tr>
            <td style="width:150px;">
                {% trans "Volume name" %}
            </td>
            <td>
                {{ form.volume_name.errors }}
                {{ form.volume_name }}
            </td>
        </tr>
        {% if form.volume_add %}
        <tr>
            <td style="width:150px;">
                {% trans "Volume to extend" %}
            </td>
            <td>
                {{ form.volume_add.errors }}
                {{ form.volume_add }}
            </td>
        </tr>
        {% endif %}
        <tr id="encrypt">
            <td style="width:150px;">
                {% trans "Encryption" %}
            </td>
            <td>
                {{ form.enc.errors }}
                {{ form.enc }}
            </td>
        </tr>
        <!--
        <tr id="encryptini">
            <td style="width:150px;">
                {% trans "Initialize Safely" %}
            </td>
            <td>
                {{ form.encini.errors }}
                {{ form.encini }}
            </td>
        </tr>
        -->
        <tr>
            <td>
                {% trans "Member disks" %} (<span id="wizard_num_disks">0</span>)
            </td>
            <td>
            {{ form.volume_disks.errors }}
            <select data-dojo-type="dijit.form.MultiSelect" id="wizarddisks" data-dojo-props="name: 'volume_disks', size: 6, multiple: true" multiple="true">
                <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
                    zfswizardcheckings(true);
                </script>
                {% for e in form.volume_disks.field.choices %}
                <option value="{{ e.0 }}" {% if e.0 in disks %}selected="selected"{% endif %}>{{ e.1 }}</option>
                {% empty %}
                {% endfor %}
            </select>
            </td>
        </tr>
        <tr id="zfsdedup" style="display: none">
            <td>{% trans "Deduplication" %}</td>
            <td>
                {% if not dedup %}
                Dedup feature not activated. Contact <a href="mailto:truenas-support@ixsystems.com?subject=ZFS Deduplication Activation">TrueNAS Support</a> for assistance.<br />
                {% endif %}
                {{ form.dedup.errors }}
                {{ form.dedup }}
            </td>
        </tr>
        <tr id="grpopt" {% if disks and disks|length >= 2 %}{% else %}style="display:none;"{% endif %}>
            <td style="width:200px;">
                {% trans "Group type" %}
            </td>
            <td style="width:250px;">
                {{ form.group_type.errors }}
                <span id="grpmirror">
                    <input type="radio" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: 'group_type', value: 'mirror'{% if form.data.group_type == "mirror" %}, checked: true{%endif%}, onClick: function() { zfswizardcheckings(true); }" />
                    mirror
                    <br />
                </span>
                <span id="grpstripe">
                    <input type="radio" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: 'group_type', value: 'stripe'{% if form.data.group_type == "stripe" %}, checked: true{%endif%}, onClick: function() { zfswizardcheckings(true); }" />
                    stripe
                    <br/>
                </span>
                <span id="grpraidz">
                    <input type="radio" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: 'group_type', value: 'raidz'{% if form.data.group_type == "raidz" %}, checked: true{%endif%}, onClick: function() { zfswizardcheckings(true); }" />
                    RAID-Z
                    <br />
                </span>
                <span id="grpraidz2">
                    <input type="radio" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: 'group_type', value: 'raidz2'{% if form.data.group_type == "raidz2" %}, checked: true{%endif%}, onClick: function() { zfswizardcheckings(true); }" />
                    RAID-Z2
                </span>
                <span id="grpraidz3">
                    <input type="radio" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: 'group_type', value: 'raidz3'{% if form.data.group_type == "raidz3" %}, checked: true{%endif%}, onClick: function() { zfswizardcheckings(true); }" />
                    RAID-Z3
                </span>
            </td>
        </tr>
        <tr id="zfsextra" style="display:none;">
            <td style="width:200px;">
                {% trans "ZFS Extra" %}
            </td>
            <td style="width:250px;" id="disks_unselected">
                <table>
                    <thead>
                        <tr>
                            <td>{% trans "Disk" %}</td>
                            <td>{% trans "None" %}</td>
                            <td>{% trans "Log" %}</td>
                            <td>{% trans "Cache" %}</td>
                            <td>{% trans "Spare" %}</td>
                        </tr>
                    </thead>
                    <tbody>
                    {% if zfsextra %}
                        {% for disk, name, val in zfsextra %}
                        <tr>
                            <td>{{ disk }}</td>
                            <td><input data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: '{{ name }}', value: 'none'{% if val == "none" %}, checked: true{% endif %}"/></td>
                            <td><input data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: '{{ name }}', value: 'log'{% if val == "log" %}, checked: true{% endif %}"/></td>
                            <td><input data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: '{{ name }}', value: 'cache'{% if val == "cache" %}, checked: true{% endif %}"/></td>
                            <td><input data-dojo-type="dijit.form.RadioButton" data-dojo-props="name: '{{ name }}', value: 'spare'{% if val == "spare" %}, checked: true{% endif %}"/></td>
                        </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <b style="color: red">{% trans "WARNING" %}</b>
            </td>
            <td style="width:250px;">
                {% trans "Please make sure that the disks are correctly setup by verifying the selected Member Disks field choices and ZFS Extra field choices before proceeding" %}
            </td>
        </tr>
    </table>
        <button data-dojo-type="dijit.form.Button" type="submit" data-dojo-props="type:'submit'" class="submitform">
    <script type="dojo/method">
        zfswizardcheckings(true, true);
    </script>
    {% trans "Add Volume" %}<br />
    <b style="color: red">{% trans "Existing data will be cleared" %}</b>
        </button>
        <button data-dojo-type="dijit.form.Button" type="button" class="cancelform">
            {% trans "Cancel" %}
            <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
                cancelDialog(this);
            </script>
        </button>
</form>
