{% extends 'template.html' %}
{% set page = "Settings" %}
{% set settings_active = "active" %}
{% block title  %} {{ page }} {% endblock %}
{% block header %} {{ page }} {% 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>
            <p>Developed with Flask, Python, MaterializeCSS, and jQuery.</p>
            <p>Version: {{ APP_VERSION }}</p>
            <p>Commit:  {{ GIT_COMMIT }}</p>
            <p>Tested on Headscale {{ HS_VERSION }}</p>
            <p>Repository: <a href="https://github.com/iFargle/headscale-webui">Github</a>.</p>
        </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>
            </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 %}