{% load freeadmin %}<div data-dojo-type="dijit.layout.ContentPane" class="objrefresh" doLayout="false">
  <script type="dojo/method">
  var diskssizes = '{{ wizard.form.choices|escapejs }}';
  require([
    "dojo/dom-style",
    "dojo/json",
    "dojo/on",
    "dojo/query",
    "dijit/registry"
  ], function(
    domStyle,
    json,
    on,
    query,
    registry
  ) {
    diskssizes = json.parse(diskssizes);

    var estimatedSize = function(value) {
      if(diskssizes[value]) {
        domStyle.set(query(".wizardTotalSizeRow")[0], "display", "");
        query(".wizardTotalSize")[0].innerHTML = diskssizes[value][1];
        query(".wizardDisksFormat")[0].innerHTML = diskssizes[value][0].join(', ');
      } else {
        domStyle.set(query(".wizardTotalSizeRow")[0], "display", "none");
      }
    }

    {% if wizard.form.volume_type.data %}
    estimatedSize("{{ wizard.form.volume_type.data|escapejs }}");
    {% else %}
    estimatedSize("auto");
    {% endif %}

    query("input[name='volume-volume_type']").forEach(function(item) {
      var radio = registry.getEnclosingWidget(item);
      on(item, "change", function() {
         var value = radio.get('value');
         estimatedSize(value);
      });
    });
  });
  </script>
  <form data-dojo-type="dijit.form.Form" action="." enctype="multipart/form-data" method="post">{% csrf_token %}
    <script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
      {% block onSubmit %}
      doSubmit({
        form: this,
        event: e,
        url: '{{ request.path }}'
      });
      {% endblock %}
    </script>
  <table class="form">
    {% block form %}
    {% dojo_render wizard.management_form %}
    <tr>
      <td colspan="2">
        {{ wizard.form.volume_name.errors }}
        {{ wizard.form.volume_name.label_tag }} {{ wizard.form.volume_name }}
      </td>
    </tr>
    <tr>
      <td colspan="2">
    <fieldset>
      <legend>{% trans "Purpose" %}</legend>
        {{ wizard.form.volume_type.errors }}
        <ul>
        {% for cid, clabel in wizard.form.volume_type.field.choices %}
        <li><input data-dojo-type="dijit.form.RadioButton" name="{{ wizard.form.volume_type.html_name }}" type="radio" value="{{ cid }}" {% if cid not in wizard.form.types_avail %}disabled="disabled" class="dijitDisabled"{% endif %} {% if wizard.form.volume_type.data == cid %}checked="checked"{% else %}{% if not wizard.form.volume_type.data and wizard.form.volume_type.field.initial == cid %}checked="checked"{% endif %}{% endif %}/> {{ clabel }}
        {% endfor %}</li>
        </ul>
    </fieldset>
      </td>
    </tr>
    <tr class="wizardTotalSizeRow">
      <td colspan="2">
        {% trans "Estimated Total Size" %}: <span class="wizardTotalSize"></span><br />
        <span style="color: red;">{% trans "Disks to be formatted" %}: <span class="wizardDisksFormat"></span></span>
      </td>
    </tr>
    <tr>
    {% endblock %}
    <tr>
      <td colspan="2">
        <button id="btn_{% cls_name wizard.form %}_Ok" class="submitform" data-dojo-type="dijit.form.Button" type="submit" data-dojo-props="type:'submit'">
          {% block oklabel %}{% trans "Next" %}{% endblock %}
          <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
            this.set('label', '{% trans "Please wait..."|escapejs %}');
          </script>
        </button>

        <button id="btn_{% cls_name wizard.form %}_Cancel" class="submitform" data-dojo-type="dijit.form.Button">
          {% trans "Exit" %}
          <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
            cancelDialog(this);
          </script>
        </button>
      </td>
    </tr>
  </table>
  </form>
</div>
