{% extends '_layout.jinja2' %}
{% block side %}
  <ul class="nav nav-list">
    <li class="nav-header">Type</li>
    <li>
      <select id="type">
        {% for name in charts_names %}
          <option value="{{ name }}">{{ name }}</option>
        {% endfor %}
      </select>
    </li>
    <li class="divider"></li>
    <li class="nav-header">Data</li>
    <li>
      <textarea id="data" rows="3">
"Serie 1": [4, 5, 2, 8, 2, 0],
"Serie 2": [0, 5, 2, 6, 2]
      </textarea>
    </li>
    <li class="divider"></li>
    <li>
    <li class="nav-header">Style</li>
      <select id="style">
        {% for style in styles_names | sort(-1) %}
          <option value="{{ style }}">{{ style.replace('_', ' ') | title }}</option>
        {% endfor %}
      </select>
    </li>
    <li class="divider"></li>
    {% for key in configs if key.name not in ['js', 'css'] %}
      {% set doc = 'title="' + key.doc + ' ' +  key.subdoc + '"' %}
      <li>
        <div class="controls">
          {% if key.is_boolean %}
            <label class="nav-header checkbox tt" for="c-{{ key.name }}" {{ doc }}>
              <input type="checkbox" id="c-{{ key.name }}" class="c-opts tt" {{ 'checked' if key.value }} {{ doc }} />{{ key.name }}
            </label>
          {% else %}
            <label class="nav-header tt" for="c-{{ key.name }}" {{ doc }}> {{ key.name }}</label>
            {% if key.is_numeric %}
              <input type="number" id="c-{{ key.name }}" class="c-opts tt" value="{{ key.value or ''}}" {{ doc }} />
            {% elif key.is_string %}
              <input type="text" id="c-{{ key.name }}" class="c-opts tt" value="{{ key.value or ''}}" {{ doc }} />
            {% elif key.is_list %}
              <input type="text" id="c-{{ key.name }}" class="c-opts tt list-of-{{ key.subtype}}" placeholder="value1, value2, ..." value="{{ key.value or ''}}" {{ doc }} />
            {% endif %}
          {% endif %}
        </div>
      </li>
    {% endfor %}
  </ul>
{% endblock side %}

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