{% extends 'template.html' %}
{% set page = "Settings" %}
{% set settings_active = "active" %}
{% block title  %} {{ page }} {% endblock %}
{% block header %} {{ page }} {% endblock %}
{% block OIDC_NAV_DROPDOWN %} {{ OIDC_NAV_DROPDOWN}} {% endblock %}
{% block OIDC_NAV_MOBILE %}   {{ OIDC_NAV_MOBILE  }} {% endblock %}

{% block content %}
<div class="row"><br>
    <div class="col s0 m0 l0 xl3"></div>
    <div class="col s12 m12 l12 xl6">
      <div class="card hoverable">
        <div class="card-content">
          <span class="card-title">Server Information</span>
          <div class="input-field">
            <i class="material-icons prefix">vpn_key</i>
            <input id="api_key" type="password">
            <label for="api_key">API Key</label>
          </div>
        </div>
        <div class="card-action">
          <a href="#test_modal"         class="modal-trigger" onclick="save_key()">Save</a>
          <a href="#test_modal"         class="modal-trigger" onclick='test_key()'>Test</a>
          <a href="#instructions_modal" class="modal-trigger">Instructions</a>
        </div>
      </div>
    </div>
    <div class="col s0 m0 l0 xl3"></div>
  </div>
  <div class="row">
    <div class="col s0 m0 l0 xl3"></div>
    <div class="col s12 m12 l12 xl6">
      <div class="card hoverable">
        <div class="card-content">
          <span class="card-title">About</span>
          <table class="striped">
            <tbody>
              <tr><td>Compatibility</td><td><a href="https://github.com/juanfont/headscale">Headscale {{ HS_VERSION }}</a></td></tr>
              <tr><td>App Version</td><td>{{ APP_VERSION }}</td></tr>
              <tr><td>Build Date</td><td> {{ BUILD_DATE }}</td></tr>
              <tr><td>Git Commit</td><td>{{ GIT_COMMIT }}</td></tr>
              <tr><td>Git Branch</td><td>{{ GIT_BRANCH }}</td></tr>
              <tr><td>Source Code</td><td><a href="https://github.com/iFargle/headscale-webui">Github</a></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col s0 m0 l0 xl3"></div>
  </div>
<!-- Modals -->
    <div id="instructions_modal" class="modal">
        <div class="modal-content">
            <h4>Instructions</h4>
            <ul class="browser-default">
                <li>To generate your API key, run the command <a class="{{ COLOR_BTN }} white-text">headscale apikeys create</a> on your control server.  Once you generate your first key, this UI will automatically renew the key near expiration.</li>
                <li>The Headscale server is configured via the <a class="{{ COLOR_BTN }} white-text">HS_SERVER</a> environment variable in Docker. Current server:  <a class="{{ COLOR_BTN }} white-text"> {{url}} </a></li>
                <li>You must configure an encryption key via the <a class="{{ COLOR_BTN }} white-text">KEY</a> environment variable in Docker.  One can be generated with the command <a class="{{ COLOR_BTN }} white-text">openssl rand -base64 32</a></li>
                <li>Enter the API key generated by headscale, press "Save" then "Test". Saving before using the "Test" button is important.</li>
            </ul>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close btn-flat">Close</a>
        </div>
    </div>
    <div id="test_modal" class="modal">
        <div class="modal-content">
            <h4>Headscale API key Test</h4>
            <span id="test_modal_results"></span>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close btn-flat">Close</a>
        </div>
    </div>
    <div id="theme_modal" class="modal">
        <div class="modal-content">
            <h4>Web UI Theme Settings</h4>
            <span id="theme_modal_body"></span>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close btn-flat">Close</a>
        </div>
    </div>
{% endblock %}