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

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

{{ block body_content() }}
<div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
      <li><a href="/">{{ i18n("menu.home") }}</a></li>
      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
</div>
<section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">
      <h2 class="title is-2">{{ .Service.Name }}</h2>
    </div>
  </div>
</section>
<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/detail">{{ i18n("menu.detail") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/raw">{{ i18n("menu.raw") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/logs">{{ i18n("menu.log") }}</a>
      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Name}}/edit">{{ i18n("menu.edit") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/perm">{{ i18n("menu.perm") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/stats">{{ i18n("menu.stats") }}</a>
    </div>
  </div>
</nav>
<section class="section">
  <div class="container">
    <form method="post" data-form="ajax-json" data-url="/service/">
      <input name="version" value="{{ .Service.Version }}" type="hidden" data-type="integer">
      <div class="columns">
        <div class="column">
          <div class="field">
            <label class="label">{{ i18n("field.image") }}</label>
            <div class="control is-expanded">
              <input name="image" value="{{ .Service.Image }}" class="input" placeholder="" data-v-rule="native" required>
            </div>
          </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>
    {{ if .Stack }}
    <div class="notification is-warning" style="margin-top: 1.5em">{{ i18n("service.edit.warning", .Stack) }}</div>
    {{ end }}
  </div>
</section>
{{ yield dialog(name="secret", items=.Secrets) }}
{{ yield dialog(name="config", items=.Configs) }}
{{ end }}