<div id="main">
    <div class="header">
        <h1>Services</h1>
    </div>

    <div class="content">
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="card">
            <h1>
              Syslog
              <div id="syslog-spinner" class="spinner spinner-small"></div>
            </h1>
            <form action="#" id="Syslog-form" class="pure-form" hidden>
              <div class="form-horizontal">
                <label>Enable syslog</label>
                <input type="checkbox" name="syslog_enable"/>
              </div>
              <br>
              <legend>Syslog settings</legend>
              <div class="pure-form-stacked">
                <label>Syslog Host</label>
                <input type="text" name="syslog_host" />
                <div class="popup">Use server [hostname:port] as UDP Syslog server</div>
              </div>
              <div class="pure-form-stacked">
                <label>Min Heap</label>
                <input type="text" name="syslog_minheap" />
                <label>Filter</label>
                <select name="syslog_filter" href="#">
                  <option value="0">EMERG</option>
                  <option value="1">ALERT</option>
                  <option value="2">CRIT</option>
                  <option value="3">ERR</option>
                  <option value="4">WARNING</option>
                  <option value="5">NOTICE</option>
                  <option value="6">INFO</option>
                  <option value="7">DEBUG</option>
                </select>
              </div>
              <div class="form-horizontal">
                <label>Show ESP &#xb5;C Ticker in log message</label>
                <input type="checkbox" name="syslog_showtick" />
              </div>
              <div class="form-horizontal">
                <label>Show date in log message</label>
                <input type="checkbox" name="syslog_showdate" />
                <div class="popup">Synology does a log rotate if timestamp is in the past so disable to prevent this</div>
              </div>
              <button id="Syslog-button" type="submit" class="pure-button button-primary">
                Update Syslog settings!
              </button>
            </form>
          </div>
          <div class="card">
            <h1>
              mDNS
              <div id="mdns-spinner" class="spinner spinner-small"></div>
            </h1>
            <form action="#" id="mDNS-form" class="pure-form" hidden>
              <div class="form-horizontal">
                <input type="checkbox" name="mdns_enable"/>
                <label>Enable mDNS</label>
              </div>
              <br>
              <legend>mDNS server settings</legend>
              <div class="pure-form-stacked">
                <label>Server Name</label>
                <input type="text" name="mdns_servername"/>
              </div>
              <button id="mDNS-button" type="submit" class="pure-button button-primary">
                Update mDNS settings!
              </button>
            </form>
          </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="card">
            <h1>
              SNTP
              <div id="sntp-spinner" class="spinner spinner-small"></div>
            </h1>
            <form action="#" id="SNTP-form" class="pure-form" hidden>
              <legend>SNTP server settings</legend>
              <div class="pure-form-stacked">
                <label>Timezone Offset</label>
                <input type="text" name="timezone_offset" />
                <label>SNTP Server</label>
                <input type="text" name="sntp_server" />
              </div>
              <button id="SNTP-button" type="submit" class="pure-button button-primary">
                Update SNTP settings!
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="services.js"></script>
<script type="text/javascript">
onLoad(function() {
  fetchServices();
  bnd($("#Syslog-form"), "submit", changeServices);
  bnd($("#SNTP-form"), "submit", changeServices);
  bnd($("#mDNS-form"), "submit", changeServices);
});
</script>
</body></html>