{{ 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">SETTINGS</h1>
      <h2 class="subtitle is-5">
        Manage swirl settings.
      </h2>      
    </div>
  </div>
  <div class="hero-foot">
    <div class="container">
      <nav class="tabs is-boxed">
        <ul>
          <li>
            <a href="/system/role/">Roles</a>
          </li>
          <li>
            <a href="/system/user/">Users</a>
          </li>
          <li class="is-active">
            <a href="/system/setting/">Settings</a>
          </li>
          <li>
            <a href="/system/event/">Events</a>
          </li>          
        </ul>
      </nav>
    </div>
  </div>  
</section>

<section class="section">
  <div class="container">
    <h2 class="title">Settings</h2>
    <hr>
    <form method="post" data-form="ajax-json" data-message="The settings have been successfully modified">
      <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">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="Address">
              </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">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Login name attribute</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.login_attr" value="{{ .Setting.LDAP.LoginAttr }}" class="input" type="text" placeholder="Login name">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Username attribute</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.name_attr" value="{{ .Setting.LDAP.NameAttr }}" class="input" type="text" placeholder="Username">
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Email attribute</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input name="ldap.email_attr" value="{{ .Setting.LDAP.EmailAttr }}" class="input" type="text" placeholder="Email">
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset id="fs-ldap">
        <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">
                <input name="tz.name" value="{{ .Setting.TimeZone.Name }}" class="input" type="text" placeholder="Location name">
                <div class="icon is-left">
                  <i class="fa fa-globe"></i>
                </div>
              </div>
              <div class="control">
                <input name="tz.offset" value="{{ .Setting.TimeZone.Offset }}" class="input" type="text" placeholder="Offset in seconds" data-type="integer">
              </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="fa fa-language"></i>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <hr>
      <div class="field">
        <p class="control">
          <button class="button is-primary" type="submit">Save</button>
        </p>
      </div>
    </form>
    </div>
</section>
{{ end }}