{{ extends "../_layouts/default" }}
{{ import "../_modules/form" }}

{{ block script() }}
<script>$(() => new Swirl.Volume.NewPage())</script>
{{ end }}

{{ block body() }}
<section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-2 is-uppercase">{{ i18n("volume.title") }}</h1>
      <h2 class="subtitle is-5">{{ i18n("volume.description") }}</h2>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="title">Create volume</h2>
    <hr>
    <form id="form-volume" method="post" action="create" data-form="ajax-json" data-url="/volume/">
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control">
              <input name="name" class="input" placeholder="Name" data-v-rule="native" required>
            </div>
          </div>
        </div>
      </div>
      <div id="drivers" class="field">
        <label class="label">Driver</label>
        <div class="field is-grouped is-grouped-multiline">
        <div class="control">
          {{ yield radio(name="driver", value="local", label="Local", checked="local") }}
          {{ yield radio(name="driver", value="other", label="Other") }}
        </div>
        <div class="control">
          <input id="txt-custom-driver" name="custom_driver" class="input is-small" disabled>
        </div>
        </div>
      </div>
      <fieldset>
        <legend class="lead is-5">Driver Options</legend>
        {{ yield options(name="option") }}
      </fieldset>
      <fieldset>
        <legend class="lead is-5">Labels</legend>
        {{ yield options(name="label") }}
      </fieldset>
      <div class="field is-grouped">
          <div class="control">
            <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
          </div>
          <div class="control">
            <a href="/volume/" class="button is-link">{{ i18n("button.cancel") }}</a>
          </div>
        </div>
    </form>
  </div>
</section>
{{ end }}