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

{{ block script() }}
<script>$(() => new Swirl.Setting.IndexPage())</script>
{{ end }}

{{ block body() }}
<section class="hero is-dark">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-2 is-uppercase">{{ i18n("setting.title") }}</h1>
      <h2 class="subtitle is-5">{{ i18n("setting.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
    <div class="container">
      <nav class="tabs is-boxed">
        <ul>
          <li>
            <a href="/system/role/">{{ i18n("menu.role") }}</a>
          </li>
          <li>
            <a href="/system/user/">{{ i18n("menu.user") }}</a>
          </li>
          <li>
            <a href="/system/chart/">{{ i18n("menu.chart") }}</a>
          </li>
          <li class="is-active">
            <a href="/system/setting/">{{ i18n("menu.setting") }}</a>
          </li>
          <li>
            <a href="/system/event/">{{ i18n("menu.event") }}</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>  
</section>

<section class="section">
  <div class="container">
    <form method="post" data-form="ajax-json" data-message="The settings have been successfully modified">
      <fieldset id="fs-zone">
        <legend class="lead is-5 is-bordered">Time zone and language</legend>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Time zone</label>
          </div>
          <div class="field-body">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <div class="select">
                  <select name="tz.name">
                    {{ offset := .Setting.TimeZone.Offset }}
                    {{ range .TimeZones }}
                    <option value="{{ .Name }}"{{ if offset == .Offset }} selected{{ end }}>{{ .Name }}</option>
                    {{ end }}
                  </select>
                </div>
                <div class="icon is-left">
                  <i class="fas fa-globe"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div  class="field-label is-normal">
            <label class="label">Language</label>
          </div>
          <div class="field-body">
            <div class="control has-icons-left">
              <div class="select">
                <select name="lang">
                  {{ yield option(value="en", label="English", selected=.Setting.Language) }}
                  {{ yield option(value="zh", label="中文", selected=.Setting.Language) }}
                </select>
              </div>
              <div class="icon is-left">
                <i class="fas fa-language"></i>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset id="fs-ldap">
        <legend class="lead is-5 is-bordered">LDAP</legend>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            {*<label class="label">Enabled</label>*}
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                {{ yield switch(id="ldap-enabled", name="ldap.enabled", label="Enabled", checked=.Setting.LDAP.Enabled) }}
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">{{ i18n("field.address") }}</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.address" value="{{ .Setting.LDAP.Address }}" class="input" type="text" placeholder="e.g. 127.0.0.1:389">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Security</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                {{ yield radio(id="ldap.security-none", name="ldap.security", value="0", label="None", checked=.Setting.LDAP.Security) content}} data-type="integer"{{end}}
                {{ yield radio(id="ldap.security-tls", name="ldap.security", value="1", label="TLS", checked=.Setting.LDAP.Security) content}} data-type="integer"{{end}}
                {{ yield radio(id="ldap.security-starttls", name="ldap.security", value="2", label="StartTLS", checked=.Setting.LDAP.Security) content}} data-type="integer"{{end}}
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Authentication</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                {{ yield radio(id="ldap-auth-simple", name="ldap.auth", value="0", label="Simple", checked=.Setting.LDAP.Authentication) content}} data-type="integer"{{end}}
                {{ yield radio(id="ldap-auth-bind", name="ldap.auth", value="1", label="Bind", checked=.Setting.LDAP.Authentication) content}} data-type="integer"{{end}}
              </div>
            </div>
          </div>
        </div>
        <div id="div-auth-simple" class="field is-horizontal"{{ if .Setting.LDAP.Authentication == 1 }} style="display: none" {{ end }}>
          <div class="field-label is-normal">
            <label class="label">User DN</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.user_dn" value="{{ .Setting.LDAP.UserDN }}" class="input" type="text" placeholder="User DN template for direct binding, e.g. cn=%s,dc=xxx,dc=com">
              </div>
            </div>
          </div>
        </div>
        <div id="div-auth-bind" class="field is-horizontal"{{ if .Setting.LDAP.Authentication == 0 }} style="display: none" {{ end }}>
          <div class="field-label is-normal">
            <label class="label">Bind account</label>
          </div>
          <div class="field-body">
            <div class="field has-addons">
              <p class="control">
                <a class="button is-static">DN</a>
              </p>
              <div class="control is-expanded">
                <input name="ldap.bind_dn" value="{{ .Setting.LDAP.BindDN }}" class="input" type="text" placeholder="e.g. cn=search,dc=xxx,dc=com">
              </div>
            </div>
            <div class="field has-addons">
              <p class="control">
                <a class="button is-static">Password</a>
              </p>
              <div class="control is-expanded">
                <input name="ldap.bind_pwd" value="{{ .Setting.LDAP.BindPassword }}" class="input" type="password" autocomplete="new-password" placeholder="Bind DN password">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Base DN</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.base_dn" value="{{ .Setting.LDAP.BaseDN }}" class="input" type="text" placeholder="Base DN for searching user, e.g. dc=xxx,dc=com">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">User filter</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.user_filter" value="{{ .Setting.LDAP.UserFilter }}" class="input" type="text" placeholder="e.g. (&(objectClass=organizationalPerson)(sAMAccountName=%s))">
              </div>
            </div>
          </div>
        </div>

        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Attributes</label>
          </div>
          <div class="field-body">
            <div class="field has-addons">
              <p class="control">
                <a class="button is-static">Username</a>
              </p>
              <div class="control is-expanded">
                <input name="ldap.name_attr" value="{{ .Setting.LDAP.NameAttr }}" class="input" type="text" placeholder="e.g. displayName">
              </div>
            </div>
            <div class="field has-addons">
              <p class="control">
                <a class="button is-static">Email</a>
              </p>
              <div class="control is-expanded">
                <input name="ldap.email_attr" value="{{ .Setting.LDAP.EmailAttr }}" class="input" type="text" placeholder="e.g. mail">
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset id="fs-metrics">
        <legend class="lead is-5 is-bordered">Metrics</legend>
        <div class="field is-horizontal">
          <div  class="field-label is-normal">
            <label class="label">Prometheus address</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="metrics.prometheus" value="{{ .Setting.Metrics.Prometheus }}" class="input" type="text" placeholder="e.g. http://prometheus.xxx.com">
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <hr>
      <div class="field">
        <p class="control">
          <button class="button is-primary" type="submit">{{ i18n("button.save") }}</button>
        </p>
      </div>
      <div class="notification is-info">
        NOTICE: To activate modifications, you must restart swirl.
      </div>
    </form>
    </div>
</section>
{{ end }}