<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Chart:
      {{ recipe.name or 'Dataset' }}
      {% if label_col %}
      ({{ label_col.header or label_col.display_tag }})
      {% endif %}
      @ HXL Proxy
    </title>
    {% include "includes/headers.html" %}
  </head>
  <body class="container-fluid">
    {% set facet="chart" %}
    {% set page_help='Chart-page' %}
    {% include "includes/navbar.html" %}
    <header>
      <ul class="nav nav-tabs">
        <li role="presentation"{% if type=='pie' %} class="active"{% endif %}><a href="{{ add_args({'type': 'pie'}) }}">Pie</a></li>
        <li role="presentation"{% if type=='bar' %} class="active"{% endif %}><a href="{{ add_args({'type': 'bar'}) }}">Bar</a></li>
        <li role="presentation"{% if type=='column' %} class="active"{% endif %}><a href="{{ add_args({'type': 'column'}) }}">Column</a></li>
      </ul>
      <p class="pull-right">
        <a type="button" class="btn btn-info btn-xs"
           data-toggle="modal"
           data-target="#customise-modal">Customise</a>
      </p>
      <h1>
        Chart:
        {{ recipe.name or 'Dataset' }}
        {% if label_col %}
        <span class="text-muted">({{ label_col.header or label_col.display_tag }})</span>
        {% endif %}
      </h1>
    </header>
    <main>

      {% if filter_col %}
      <p>
        <form method="GET" action="" class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">{{ filter_col.header or filter_col.display_tag }}</span>
              <select class="form-control" name="filter_value" id="filter_value" onchange="this.form.submit()">
                <option value="">-- show all --</option>
                {% for value in filter_values %}
                <option value="{{ value }}"{% if filter_value==value %} selected="selected"{% endif %}>{{ value }}</option>
                {% endfor %}
              </select>
              <span class="input-group-btn">
                <button type="submit" class="btn btn-primary">Update</button>
              </span>
            </div>
          </div>
          {% if recipe.recipe_id %}
          <input type="hidden" name="type" value="{{ type }}"/>
          <input type="hidden" name="filter_tag" value="{{ filter_tag|nonone }}"/>
          <input type="hidden" name="count_tag" value="{{ count_tag|nonone }}"/>
          <input type="hidden" name="value_tag" value="{{ value_tag|nonone }}"/>
          <input type="hidden" name="label_tag" value="{{ label_tag|nonone }}"/>
          {% else %}
          {% with excludes=['filter_value'] %}
          {% include "includes/params.html" %}
          {% endwith %}
          {% endif %}
        </form>
      </p>
      {% endif %}

      <div id="chart_div" style="min-height:480px"></div>

      {% include "includes/source.html" %}
    </main>
    
    <div id="customise-modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Customise chart</h4>
          </div>
          <div class="modal-body">
            <form method="GET" action="">
              <fieldset>
                <div class="form-group">
                  <label for="filter_tag">
                    Choose filter column.
                  </label>
                  <select name="filter_tag" class="form-control">
                    <option value="">Choose a tag</option>
                    {% for column in source.columns %}
                    <option value="{{ column.display_tag }}" {% if filter_tag and filter_tag.match(column) %}selected="selected"{% endif %}>
                    {{ column.display_tag }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label for="count_tag">
                    Choose tag pattern to count
                  </label>
                  <select name="count_tag" class="form-control">
                    <option value="">Choose a tag</option>
                    {% for column in source.columns %}
                    <option value="{{ column.display_tag }}" {% if count_tag and count_tag.match(column) %}selected="selected"{% endif %}>
                    {{ column.display_tag }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label for="label_tag">
                    Choose column as label
                  </label>
                  <select name="label_tag" class="form-control">
                    <option value="">Choose a tag</option>
                    {% for column in source.columns %}
                    <option value="{{ column.display_tag }}" {% if label_tag and label_tag.match(column) %}selected="selected"{% endif %}>
                      {{ column.display_tag }}
                    </option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label for="value_tag">
                    Choose column already containing a count
                  </label>
                  <select name="value_tag" class="form-control">
                    <option value="">Choose a tag</option>
                    {% for column in source.columns %}
                    <option value="{{ column.display_tag }}" {% if value_tag and value_tag.match(column) %}selected="selected"{% endif %}>
                    {{ column.display_tag }}</option>
                    {% endfor %}
                  </select>
                </div>
              </fieldset>
              {% if recipe.recipe_id %}
              <input type="hidden" name="type" value="{{ type }}"/>
              {% else %}
              {% with excludes=['label_tag', 'value_tag', 'count_tag', 'filter_tag', 'filter_value'] %}
              {% include "includes/params.html" %}
              {% endwith %}
              {% endif %}
              <button class="btn btn-success" type="submit">OK</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    {% include "includes/scripts.html" %}
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="{{ static('jquery/jquery.csv.js') }}"></script>
    <script type="text/javascript" src="{{ static('libhxl/hxl.js') }}"></script>
    <script type="text/javascript">
      hxl_proxy.ui.chart({
      data_url: "{{ data_url_for('data_view', recipe, format='csv') | safe }}",
      type: "{{ type|nonone|safe }}",
      value_pattern: "{{ value_tag|nonone|safe }}",
      label_pattern: "{{ label_tag|nonone|safe }}",
      count_pattern: "{{ count_tag|nonone|safe }}",
      filter_pattern: "{{ filter_tag|nonone|safe }}",
      filter_value: "{{ filter_value|nonone|safe }}"
      });
    </script>
  </body>
</html>
