<!DOCTYPE html>
<html lang="en" class="uk-height-1-1">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyTicker - Dashboard</title>
    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
    <!-- CSS FILES -->
    <link rel="stylesheet" type="text/css" href="css/uikit.min.css">
    <!-- JS FILES -->
    <script src="js/uikit.min.js"></script>
    <script src="js/uikit-icons.min.js"></script>
  </head>
  <body class="uk-background-muted uk-padding-small">
    <div class="uk-flex uk-flex-center uk-flex-middle">
      <div class="uk-width-large">
        <div class="uk-width-1-1 uk-text-center">
          <p class="uk-text-large">🚀 TinyTicker Dashboard 🚀</p>
        </div>
        {% if update_available %}
        <div class="uk-background-default uk-alert uk-padding-small uk-margin-small">
          <div class="uk-width-1-1 uk-text-center">
            <p class="uk-text-large">🥳 Update available 🥳</p>
          </div>
          <form class="uk-form-stacked" action="/command">
            <button type="submit" name="command" value="update" class="uk-button uk-button-primary uk-width-expand uk-margin-small-bottom">Update</button>
          </form>
        </div>
        {% endif %}
        <div class="uk-width-large">
          <p class="uk-text-large">Config</p>
          <form action="/set_hostname">
            <label class="uk-form-label" for="hostname">Hostname: </label>
            <input class="uk-input uk-width-1-3 uk-width-1-2@m" type="text" id="hostname" name="hostname" value="{{hostname}}">
            <input class="uk-button-small" type="submit" value="Set & Reboot">
          </form>
          <hr>
          <form class="uk-form-stacked" action="/config">
            <div class="uk-grid uk-grid-small">
              <div class="uk-width-1-1">
                <label class="uk-form-label" for="epd_model">ePaper display model</label>
                <div class="uk-flex uk-flex-middle">
                  <span uk-icon="icon: tv; ratio: 2" class="uk-padding-small uk-padding-remove-vertical" style="width: 40px;"></span>
                  <select class="uk-select uk-text-small" id="epd_model" name="epd_model">
                    {%- for epd_model_option in epd_model_options %}
                    {%- if epd_model_option.name == epd_model %}
                    <option value="{{epd_model_option.name}}" selected>{{epd_model_option.desc}}</option>
                    {%- else %}
                    <option value="{{epd_model_option.name}}">{{epd_model_option.desc}}</option>
                    {%- endif %}
                    {%- endfor %}
                  </select>
                  <label class="uk-form-label uk-flex-none uk-margin-left" for="flip"><input class="uk-checkbox uk-margin-small-right" type="checkbox" id="flip" name="flip" {% if flip | default(False) %}checked{% endif %}>Flip display</label>
                </div>
                <label class="uk-form-label" for="api_key"><a href="https://min-api.cryptocompare.com/pricing">CryptoCompare</a> API key</label>
                <div class="uk-inline uk-width-1-1">
                  <a class="uk-form-icon" href="#" uk-icon="icon: lock"></a>
                  <input class="uk-input uk-text-small" type="text" id="api_key" name="api_key" {% if api_key %} value="{{api_key}}" {% endif %}>
                </div>
                <h4>Tickers</h4>
                <div uk-sortable="handle: .ticker-handle" class="container uk-background-secondary uk-flex uk-flex-row uk-flex-middle uk-padding uk-flex-left uk-flex-center@m" style="overflow-x: auto; position: relative; box-sizing: border-box; width:100vw; left: calc(-50vw + 50%);">
                {%- for ticker in tickers %}
                  <div class="ticker uk-card uk-card-default uk-flex-none uk-margin-right uk-padding-small uk-border-rounded">
                    <div style="float: right">
                      <button class="ticker-handle" type="button" uk-icon="icon: table"></button>
                      <button class="ticker-close" type="button" uk-close onclick="remove_ticker(this)"></button>
                    </div>
                    <label class="uk-form-label" for="symbol_type">Symbol type</label>
                    <select class="uk-select" id="symbol_type" name="symbol_type">
                      {%- for symbol_type_option in symbol_type_options %}
                      {%- if symbol_type_option == ticker.symbol_type %}
                      <option value="{{symbol_type_option}}" selected>{{symbol_type_option}}</option>
                      {%- else %}
                      <option value="{{symbol_type_option}}">{{symbol_type_option}}</option>
                      {%- endif %}
                      {%- endfor %}
                    </select>
                    <label class="uk-form-label" for="symbol">Symbol</label>
                    <input class="uk-input" type="text" id="symbol" name="symbol" value="{{ticker.symbol}}">
                    <label class="uk-form-label" for="interval">Interval</label>
                    <select class="uk-select" id="interval" name="interval">
                      {%- for interval_option in interval_options %}
                      {%- if interval_option == ticker.interval %}
                      <option value="{{interval_option}}" selected>{{interval_option}}</option>
                      {%- else %}
                      <option value="{{interval_option}}">{{interval_option}}</option>
                      {%- endif %}
                      {%- endfor %}
                    </select>
                    <label class="uk-form-label" for="plot_type">Plot type</label>
                    <select class="uk-select" id="plot_type" name="plot_type">
                      {%- for plot_type_option in plot_type_options %}
                      {%- if plot_type_option == ticker.plot_type %}
                      <option value="{{plot_type_option}}" selected>{{plot_type_option}}</option>
                      {%- else %}
                      <option value="{{plot_type_option}}">{{plot_type_option}}</option>
                      {%- endif %}
                      {%- endfor %}
                    </select>
                    <label class="uk-form-label" for="lookback">Lookback</label>
                    {%- if ticker.lookback is none %}
                    {#- If the look back is None then it hasn't been set so use the default lookback for the interval #}
                    <input class="uk-input" inputmode="numeric" id="lookback" name="lookback" min="1" placeholder="{{interval_lookbacks[ticker.interval]}}">
                    {%- else %}
                    <input class="uk-input" inputmode="numeric" id="lookback" name="lookback" min="1" value="{{ticker.lookback}}">
                    {%- endif %}
                    <label class="uk-form-label" for="wait_time">Wait time (s)</label>
                    {%- if ticker.wait_time is none %}
                    {#- If the wait_time is None then it hasn't been set so use the default wait_time for the interval #}
                    <input class="uk-input" inputmode="numeric" id="wait_time" name="wait_time" min="1" placeholder="{{interval_wait_times[ticker.interval]}}">
                    {%- else %}
                    <input class="uk-input" inputmode="numeric" id="wait_time" name="wait_time" min="1" value="{{ticker.wait_time}}">
                    {%- endif %}
                    <label class="uk-form-label" for="mav">Moving average</label>
                    {%- if ticker.mav is none %}
                    <input class="uk-input" inputmode="numeric" id="mav" name="mav" min="1" placeholder="3">
                    {%- else %}
                    <input class="uk-input" inputmode="numeric" id="mav" name="mav" min="1" value="{{ticker.mav}}">
                    {%- endif %}
                    <label class="uk-form-label" for="volume">Show trade volume 
                      {% if ticker.volume | default(False) %}
                      <input type="hidden" name="volume" value="1">
                      {% else %}
                      <input type="hidden" name="volume" value="0">
                      {% endif %}
                      <input class="uk-checkbox" type="checkbox" {% if ticker.volume | default(False) %}checked{% endif %} onclick="this.previousElementSibling.value=1-this.previousElementSibling.value">
                    </label>
                  </div>
                {%- endfor %}
                  <div class="uk-card uk-card-primary uk-flex-none uk-margin-right uk-padding-small uk-button uk-border-rounded uk-animation-fade" onclick="add_ticker()">
                    <span uk-icon="plus"></span>
                  </div>
                </div>
              </div>
              <div class="uk-width-1-1 uk-margin">
                <button type="submit" value="submit" class="uk-button uk-button-primary uk-width-expand">Apply</button>
              </div>
            </div>
          </form>
        </div>
        <div class="uk-width-large uk-margin">
          <div class="uk-width-1-1">
            <p class="uk-text-large">Command</p>
            <form class="uk-form-stacked" action="/command">
              {% for command, desc in commands | items %}
              <button type="submit" name="command" value="{{command}}" class="uk-button uk-button-primary uk-width-expand uk-margin-small-bottom" uk-tooltip="{{desc}}">{{command.title()}}</button>
              {% endfor %}
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-text-center uk-position-small">
      <span class="uk-text-small uk-text-muted">TinyTicker v{{version}} - <span uk-icon="github"></span><a href="https://github.com/loiccoyle/tinyticker" title="tinyticker" target="_blank" data-uk-tooltip>TinyTicker</a> - <span uk-icon="file-text"></span><a href="/logfiles" title="log files" target="_blank" data-uk-tooltip>Log files</a></span>
    </div>
  </body>
  <script src="js/index.js"></script>
</html>
