{% extends "caravel/basic.html" %}

{% block title %}
  {% if slice %}
    [slice] {{ slice.slice_name }}
  {% else %}
    [explore] {{ viz.datasource.table_name }}
  {% endif %}
{% endblock %}

{% block body %}
  {% set datasource = viz.datasource %}
  {% set form = viz.form %}

  {% macro panofield(fieldname)%}
    <div>
      {% set field = form.get_field(fieldname)%}
      <div>
        {{ viz.get_form_override(fieldname, 'label') or field.label }}
        {% if field.description %}
        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
          title="{{ viz.get_form_override(fieldname, 'description') or field.description }}"></i>
        {% endif %}
        {{ field(class_=form.field_css_classes(field.name)) }}
      </div>
    </div>
  {% endmacro %}

  <div class="datasource container-fluid">
    <form id="query" method="GET" style="display: none;">
      <div class="header">
          <span title="Data Source" data-toggle="tooltip">
            <select id="datasource_id" class="select2">
              {% for ds in datasources %}
                <option url="{{ ds.explore_url }}" {{ "selected" if ds.id == datasource.id }} value="{{ ds.id }}">{{ ds.full_name }}<i class="fa fa-info"></i></option>
              {% endfor %}
            </select>
          </span>
          <a href="{{ datasource.url }}" class="btn btn-default-outline" data-toggle="tooltip" title="Edit/configure datasource">
            <i class="fa fa-edit"></i>&nbsp;
          </a>
          <span title="Visualization Type" data-toggle="tooltip">
            {{ form.get_field("viz_type")(class_="select2-with-images") }}
          </span>
          {% if slice %}
            <span class="btn btn-default notbtn" title="Slice" data-toggle="tooltip" data-placement="bottom">
                <span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
                {{ slice.slice_name }}
                <a class="" href="/slicemodelview/edit/{{ slice.id }}" data-toggle="tooltip" title="Edit">
                  {% if slice.description %}
                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="{{ slice.description }}"></i>
                  {% endif %}
                  <i class="fa fa-edit"></i>
                </a>
            </span>
          {% endif %}
          <div class="pull-right">
            <span id="is_cached" class="label label-default" title="Force refresh" data-toggle="tooltip">
              cached
            </span>
            <div class="btn-group results" role="group">
              <a role="button" tabindex="0" class="btn btn-default" id="shortner" data-toggle="popover" data-trigger="focus">
                <i class="fa fa-link" data-toggle="tooltip" title="Short URL"></i>&nbsp;
              </a>
              <span class="btn btn-default" id="standalone" title="Standalone version, use to embed anywhere" data-toggle="tooltip">
                <i class="fa fa-code"></i>&nbsp;
              </span>
              <span class="btn btn-default " id="json" title="Export to .json" data-toggle="tooltip">
                <i class="fa fa-file-code-o"></i>
                .json
              </span>
              <span class="btn btn-default " id="csv" title="Export to .csv format" data-toggle="tooltip">
                <i class="fa fa-file-text-o"></i>.csv
              </span>
              <span class="btn btn-warning notbtn" id="timer">0 sec</span>
              <span class="btn btn-info disabled query"
                data-toggle="modal" data-target="#query_modal">query</span>
            </div>
          </div>
        <hr/>
      </div>
        <div id="form_container" class="col-left-fixed">
          <div class="row center-block">
            <div class="btn-group query-and-save">
              <button type="button" class="btn btn-primary query">
                <i class="fa fa-bolt"></i>Query
              </button>
              {% if viz.form_data.slice_id %}
                <button type="button" class="btn btn-default" id="btn_overwrite">
                  <i class="fa fa-save"></i>Overwrite
                </button>
              {% endif %}
              <button type="button" class="btn btn-default" id="btn_save">
                <i class="fa fa-plus-circle"></i>Save as
              </button>
            </div>
          </div>
          <br/>
          {% for fieldset in form.fieldsets %}
              <div class="panel panel-default">
                {% if fieldset.label %}
                  <div class="panel-heading">
                    <span class="legend_label">{{ fieldset.label }}</span>
                    {% if fieldset.description %}
                      <i    class="fa fa-info-circle" data-toggle="tooltip"
                            data-placement="bottom"
                            title="{{ fieldset.description }}"></i>
                    {% endif %}
                    <span class="collapser"> [-]</span>
                  </div>
                {% endif %}
                <div class="panel-body">
                {% for fieldname in fieldset.fields %}
                  {% if not fieldname %}
                    <hr/>
                  {% elif fieldname is string %}
                    {{ panofield(fieldname) }}
                  {% else %}
                  <div class="row">
                    <div class="form-group">
                      {% for name in fieldname %}
                      <div class="col-xs-{{ (12 / fieldname|length) | int }}">
                        {% if name %}
                          {{ panofield(name) }}
                        {% endif %}
                      </div>
                      {% endfor %}
                    </div>
                  </div>
                  {% endif %}
                {% endfor %}
                </div>
              </div>
            {% endfor %}
            <div class="panel panel-default">
              <div class="panel-heading">
                <span class="legend_label">Filters</span>
                <i  class="fa fa-info-circle" data-toggle="tooltip"
                    data-placement="bottom"
                    title="Filters are defined using comma delimited strings as in 'US,FR,Other'"></i>
                <span class="collapser"> [-]</span>
              </div>
              <div class="panel-body">
                <div id="flt0" style="display: none;">
                  <span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
                  <div class="row">
                    <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
                    <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
                    <button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
                      <span class="fa fa-minus"  aria-hidden="true"></span>

                    </button>
                  </div>
                </div>
                <div id="filters"></div>
                <button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
                  <span class="fa fa-plus" aria-hidden="true"></span>
                  <span>Add filter</span>
                </button>
              </div>
            </div>
            {{ form.slice_id() }}
            {{ form.slice_name() }}
            {{ form.collapsed_fieldsets() }}
            <input type="hidden" name="action" id="action" value="">
            <input type="hidden" name="datasource_name" value="{{ datasource.name }}">
            <input type="hidden" name="datasource_id" value="{{ datasource.id }}">
            <input type="hidden" name="datasource_type" value="{{ datasource.type }}">
            <input type="hidden" name="previous_viz_type" value="{{ viz.viz_type or "table" }}">
        </div>

        <div class="col-offset">
          {% block messages %}{% endblock %}
          {% include 'appbuilder/flash.html' %}
          <div
            id="{{ viz.token }}"
            class="widget viz slice {{ viz.viz_type }}"
            data-slice="{{ viz.json_data }}"
            style="height: 700px;">
            <img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
            <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
          </div>
          <div class="credits pull-right">{{ "credits: " + viz.credits |safe if viz. credits else "" }}</div>
        </div>
      <div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">Query</h4>
            </div>
            <div class="modal-body">
              <pre id="query_container"></pre>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="sourceinfo_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">Datasource Description</h4>
            </div>
            <div class="modal-body">
              {{ datasource.description_markeddown | safe }}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block tail_js %}
  {{ super() }}
  <script src="/static/assets/javascripts/dist/explore.entry.js"></script>
{% endblock %}
