{{ extends "_base" }}
{{ import "../_modules/service" }}

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

{{ block body_content() }}
<section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">
      <h2 class="title is-2">Create service</h2>
    </div>
  </div>
</section>
<section class="section">
  <div class="container">
    <form method="post" data-form="ajax-json" data-url="/service/">
      <div class="columns">
        <div class="column">
          <div class="field">
            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control">
              <input name="name" value="{{ .Service.Name }}" class="input" type="text" placeholder="" data-v-rule="native" required>
            </div>
          </div>
          <div class="field">
            <label class="label">{{ i18n("field.image") }}</label>
            <div class="field has-addons is-marginless">
              <div class="control">
                <span class="select">
                  <select id="cb-registry" name="registry">
                    <option value="">DockerHub</option>
                    {{ registry := .Service.Registry }}
                    {{ range .Registries }}
                    <option value="{{.ID}}" data-url="{{.URL}}"{{ if registry == .ID }} selected{{ end }}>{{.Name}}</option>
                    {{ end }}
                  </select>
                </span>
              </div>
              <p class="control">
                {{ if .Service.RegistryURL }}
                <a id="a-registry-url" class="button is-static" style="background-color: white">{{ .Service.RegistryURL }}</a>
                {{ else }}
                <a id="a-registry-url" class="button is-static" style="background-color: white; display: none"></a>
                {{ end }}
              </p>
              <div class="control is-expanded">
                <input name="image" value="{{ .Service.Image }}" class="input" type="text" placeholder="" data-v-rule="native" required>
              </div>
            </div>
            <p class="help">Do not enter registry host!</p>
          </div>
          {{ yield form_mode() }}
          {{ yield form_network() }}
        </div>
        <div class="is-divider-vertical" data-content=""></div>
        {{ yield form_main_right() }}
      </div>
      <fieldset>
        <legend class="lead is-5">Environments</legend>
        {{ yield options_table(name="env", items=.Service.Environments) }}
      </fieldset>
      <fieldset>
        <legend class="lead is-5">Service Labels</legend>
        {{ yield options_table(name="slabel", items=.Service.ServiceLabels) }}
      </fieldset>
      <fieldset>
        <legend class="lead is-5">Container Labels</legend>
        {{ yield options_table(name="clabel", items=.Service.ContainerLabels) }}
      </fieldset>
      {{ yield form_others() }}
      {{ yield form_submit(url="/service/") }}
    </form>
  </div>
</section>
{{ yield dialog(name="secret", items=.Secrets) }}
{{ yield dialog(name="config", items=.Configs) }}
{{ end }}