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

{{ block script() }}
<script>$(() => new Swirl.Network.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">
        NETWORK
      </h1>
      <h2 class="subtitle is-5">
        Networks are user-defined networks that containers can be attached to.
      </h2>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="title">Create network</h2>
    <hr>
    <form id="form-network" method="post" action="create" data-form="ajax-json" data-url="/network/">
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
            <label class="label">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="overlay", label="Overlay", checked="overlay") }}
          {{ yield radio(name="driver", value="bridge", label="Bridge") }}
          {{ 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>
      <div class="field">
        {{ yield switch(name="internal", label="Restrict external access to the network") }}
      </div>
      <div class="field">
        {{ yield switch(name="attachable", label="Allow network attaching by regular containers") }}
      </div>
      <fieldset>
        <legend class="lead is-5">IPV4</legend>
        <div class="columns is-bottom-marginless">
          <div class="column is-4 is-bottom-paddingless">
            <div class="field">
              <label class="label">Subnet</label>
              <div class="control">
                <input name="ipv4.subnet" class="input" placeholder="e.g. 172.20.0.0/16">
              </div>
            </div>
          </div>
          <div class="column is-4 is-bottom-paddingless">
            <div class="field">
              <label class="label">Gateway</label>
              <div class="control">
                <input name="ipv4.gateway" class="input" placeholder="e.g. 172.20.10.11">
              </div>
            </div>
          </div>
          <div class="column is-4 is-bottom-paddingless">
            <div class="field">
              <label class="label">IP range</label>
              <div class="control">
                <input name="ipv4.ip_range" class="input" placeholder="e.g. 172.20.10.0/24">
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend class="lead is-5">IPV6</legend>
        <div class="field">
          {{ yield switch(id="ipv6_enabled", name="ipv6.enabled", label="Enable IPv6") }}
        </div>
        <div class="columns is-bottom-marginless">
          <div class="column is-4 is-bottom-paddingless">
            <div class="field">
              <label class="label">Subnet</label>
              <div class="control">
                <input id="ipv6_subnet" name="ipv6.subnet" class="input" placeholder="e.g. 2001:db8:abcd::/64" disabled>
              </div>
            </div>
          </div>
          <div class="column is-4 is-bottom-paddingless">
            <div class="field">
              <label class="label">Gateway</label>
              <div class="control">
                <input id="ipv6_gateway" name="ipv6.gateway" class="input" placeholder="e.g. 2001:db8:abcd::1011" disabled>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend class="lead is-5">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">Submit</button>
          </div>
          <div class="control">
            <a href="/network/" class="button is-link">Cancel</a>
          </div>
        </div>
    </form>
  </div>
</section>
{{ end }}