{% extends '_layout.jinja2' %}
{% block side %}
  <form class="form">
    <div class="tabbable tabs-left">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#main" data-toggle="tab">Main</a></li>
        {% for group in configs[0]._categories if group != 'Style' %}
          <li><a href="#{{ group }}" data-toggle="tab">{{ group }}</a></li>
        {% endfor %}
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="main">
          <legend>Main</legend>
          <div class="control-group tt" title="Chose the chart type">
            <label class="control-label" for="type">Type</label>
            <div class="controls">
              <select id="type">
                {% for name in charts_names %}
                  <option value="{{ name }}">{{ name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          
          <div class="control-group data tt" title="Enter the chart data">
            <label class="control-label" for="data">Data</label>
            <div class="controls form-inline">
              <input type="text" class="input-small serie-label" value="Serie" placeholder="Serie Name"/>
              <input type="text" class="input-small serie-value" value="1, 1, 3, 7, 21" placeholder="Values" />
              <button type="button" class="btn btn-small rem">-</button>
            </div>
            <button type="button" class="btn btn-small add">+</button>
          </div>

          <div class="control-group tt" title="Chose the chart style">
            <label class="control-label" for="style">Style</label>
            <div class="controls">
              <select id="style">
                {% for style in styles_names | sort(-1) %}
                  <option value="{{ style }}">{{ style.replace('_', ' ') | title }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="control-group tt" title="Add interpolation">
            <label class="control-label" for="interpolation">Interpolation</label>
            <div class="controls">
              <select id="interpolation">
                <option value=""></option>
                {% for interpolation in interpolations %}
                  <option value="{{ interpolation }}">{{ interpolation | title }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>

        {% for group, keys in configs | groupby('category') %}
          <div class="tab-pane" id="{{ group }}">
            <legend>{{ group }}</legend>
            {% for key in keys  if key.name not in ['js', 'css', 'style', 'interpolate'] %}
              {% set doc = 'title="' + key.doc + ' <br /><small>' +  key.subdoc + '</small>"' %}
              <div class="control-group tt" {{ doc }}>
                {% if key.is_boolean %}
                  <div class="controls">
                    <label class="checkbox" for="c-{{ key.name }}">
                      <input type="checkbox" id="c-{{ key.name }}" class="c-opts" {{ 'checked' if key.value }} />{{ key.name.replace('_', ' ') |title }}
                    </label>
                  </div>
                {% else %}
                  <label class="control-label" for="c-{{ key.name }}" > {{ key.name.replace('_', ' ') | title }}</label>
                  
                  <div class="controls">
                    {% if key.is_numeric %}
                      <input type="number" id="c-{{ key.name }}" class="c-opts" value="{{ key.value or ''}}" />
                    {% elif key.is_string %}
                      <input type="text" id="c-{{ key.name }}" class="c-opts" value="{{ key.value or ''}}" />
                    {% elif key.is_list %}
                      <input type="text" id="c-{{ key.name }}" class="c-opts list-of-{{ key.subtype }}" placeholder="value1, value2{{ ', ...' if key.name != 'range' }}" value="{{ key.value or ''}}" />
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>
  </form>
{% endblock side %}

{% block section %}
  <figure>
    <div></div>
    <figcaption></figcaption>
  </figure>
{% endblock section %}