<!-- -*- mode:jinja2 -*- -->
{% extends "standard.html" %}

{% block pagetitle %}
<i class="fa fa-cog"></i> <span class="ds-primary-title">{{config['DASHBOARD_APPNAME']}}</span> <span class="ds-secondary-title">{{title}}</span>
{% endblock %}

{% block content %}

<div class="container">

  <div>
    {% include "snippets/breadcrumbs.html" %}
  </div>


  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      <div class="">
        <br/>
        <br/>

      <form class="form-horizontal">
        <fieldset>

          <!-- Form Name -->
          <!-- <legend>Form Name</legend> -->


          <!-- Default Auto-Refresh Period -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="selectRefresh">Default Refresh Period</label>
            <div class="col-md-6">
              <select id="selectRefresh" name="selectRefresh" class="form-control"
                      onchange="dsSetPref('refresh', this.value)">
                {% for item in config['DASHBOARD_REFRESH_INTERVALS'] %}
                <option value="{{item[1]}}"
                        {% if item[1] == ctx.get_int('refresh', config['DEFAULT_REFRESH_INTERVAL']) %}
                  selected
                        {% endif %}
                        >{{item[0]}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default"
                      id="ds-reset-auto-refresh-button"
                      data-toggle="tooltip"
                      title="Reset to Default">
                <i class="fa fa-angle-double-down"></i>
              </button>
            </div>
          </div>

          <!-- Time Zone -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="selectTimeZone">Display Time Zone</label>
            <div class="col-md-6">
              <input type="hidden" id="selectTimeZone" name="selectTimeZone" class="form-control"
                      onchange="dsSetPref('timezone', this.value)">
              </input>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default"
                      id="ds-reset-time-zone-button"
                      data-toggle="tooltip"
                      title="Reset to Default">
                <i class="fa fa-angle-double-down"></i>
              </button>
            </div>
          </div>

          <!-- Graphite URL -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="textGraphiteURL">Graphite URL</label>
            <div class="col-md-6">
              <input type="text" id="textGraphiteURL" name="textGraphiteURL" class="form-control"
                     value="{{ctx.get_str('graphite_url', config.get('GRAPHITE_URL'))}}"
                     onchange="dsSetPref('graphite_url', this.value)">
              </input>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default"
                      id="ds-reset-graphite-url-button"
                      data-toggle="tooltip"
                      title="Reset to Default">
                <i class="fa fa-angle-double-down"></i>
              </button>
            </div>
          </div>

          <!-- Graphite Auth Settings -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="textGraphiteURL">Graphite HTTP Authentication</label>
            <div class="col-md-6">
              <input type="text" id="textGraphiteAUTH" name="textGraphiteAUTH" class="form-control"
                     value="{{ctx.get_str('graphite_auth', config.get('GRAPHITE_AUTH'))}}"
                     onchange="dsSetPref('graphite_auth', this.value)">
              </input>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default"
                      id="ds-reset-graphite-url-button"
                      data-toggle="tooltip"
                      title="Reset to Default">
                <i class="fa fa-angle-double-down"></i>
              </button>
            </div>
          </div>

          <hr/>

          <!-- Chart Renderer -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="chartRenderRadios">Chart Renderer</label>
            <div class="col-md-8" id="chart-renderers">
            </div>
          </div>

          <!-- Theme -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="themeRadios">Theme</label>
            <div class="col-md-8">

              {% for theme in themes %}
              <div class="radio">
                <label for="themeRadios-{{theme}}">
                  <input type="radio" name="themeRadios" id="themeRadios-{{theme}}" {% if ctx.prefs.theme==theme %} checked="checked" {% endif %} onclick="dsSetPref('theme', '{{theme}}')" value="{{theme}}|titleize">
                    {{theme|titleize}}
                </label>
              </div>
              {% endfor %}

            </div>
          </div>

          <hr/>

          <!-- Property Sheet Auto-Close Timeout -->
          <div class="form-group">
            <div class="col-md-4"
                 style="text-align:right">
              <label class="control-label" for="numberPropertySheetAutoClose">Property Sheet Auto-Close Time</label><br/>
              <small>In seconds. Set value to 0 to disable autoclose.</small>
            </div>
            <div class="col-md-6">
              <input type="number" step="1" id="numberPropertySheetAutoClose" name="numberPropertySheetAutoClose"
                     class="form-control"
                     value="{{ctx.get_int('propsheet_autoclose_seconds', config.get('DEFAULT_PROPSHEET_AUTOCLOSE_SECONDS',3))}}"
                     onchange="dsSetPref('propsheet_autoclose_seconds', this.value)">
              </input>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default"
                      id="ds-reset-propertysheet-timeout-button"
                      data-toggle="tooltip"
                      title="Reset to Default">
                <i class="fa fa-angle-double-down"></i>
              </button>
            </div>

          </div>

        </fieldset>
      </form>

      </div>
    </div>
  </div>


  <div class="row">
  </div>

</div> <!-- container -->

<script>
 dsSetPref = function(key, value) {
   window.location = URI(window.location)
         .query('')
         .setQuery(key, value)
         .href()
 }

 $('#selectRefresh').select2()

 $('#selectTimeZone').attr('value', ts.config.DISPLAY_TIMEZONE)

 $('#selectTimeZone').select2({
   data: moment.tz.names().map(function(name) {
     return {
       id: name,
       text: name
     }
   })
 })

   var renderers = ts.charts.renderers.list()
   for (var i = 0; i < renderers.length; i++) {
     $('#chart-renderers').append((ts.templates['ds-preferences-renderer-entry']({
       renderer: renderers[i],
       checked: ts.prefs.renderer === renderers[i].name
     })))
   }

 $("[data-toggle=tooltip]").tooltip({
   animation:false,
   container: 'body',
   delay: { show:300, hide:100}
 })

 $(document).on('click', '#ds-reset-auto-refresh-button', function(e) {
   $('#selectRefresh').select2('val', '{{config['DEFAULT_REFRESH_INTERVAL']}}', true)
   return false
 })

 $(document).on('click', '#ds-reset-time-zone-button', function(e) {
   $('#selectTimeZone').select2('val', '{{config['DISPLAY_TIMEZONE']}}', true)
   return false
 })

 $(document).on('click', '#ds-reset-graphite-url-button', function(e) {
   var e = $('#textGraphiteURL')[0]
   e.value = '{{config['GRAPHITE_URL']}}'
   dsSetPref('graphite_url', e.value)
   return false
 })

 $(document).on('click', '#ds-reset-propertysheet-timeout-button', function(e) {
   $('#numberPropertySheetAutoClose')[0].value = {{config.get('DEFAULT_PROPSHEET_AUTOCLOSE_SECONDS',3)}}
   dsSetPref('propsheet_autoclose_seconds', e.value)
   return false
 })


</script>

{% endblock %}
