<!DOCTYPE html>
<html lang="en">
  {% set facet='edit' %}
  <head>
    <title>Recipe filters @ HXL Proxy</title>
    {% include "includes/headers.html" %}
  </head>
  <body class="container-fluid">
    {% set page_help='Recipe-page' %}
    {% include "includes/navbar.html" %}
    <header>
      {% include "includes/data-tabs.html" %}
      <h1>
        Data transformation recipe
      </h1>
    </header>
    <main class="row">
      <div class="col-sm-12">
        {% include "includes/source.html" %}
      </div>
      <section id="filters" class="col-sm-4 col-md-3">
        <h3>
          Recipe filters
          <small>{% with key='Filters' %}{% include "includes/help.html" %}{% endwith %}</small>
        </h3>
        {% if recipe.recipe_id %}
        {% set method="POST" %}
        {% set action=url_for('do_data_save') %}
        {% else %}
        {% set method="GET" %}
        {% set action=url_for('data_edit') %}
        {% endif %}
        <form action="{{ action }}" method="{{ method }}" id="filter-form">

          <ol class="filter-list" role="group" aria-label="Data filters">
            {# Filter types and names defined in this file: #}
            {% import 'includes/filters/filter-types.j2' as filter_types %}
            {% set vars = {'last_index': 0 } %}
            {% for n in range(1, 99) %}
            {% set filter_type = recipe.args['filter{0:02}'.format(n)] %}
            {% if filter_type %}
            {% if vars.update({'last_index': n}) %}{% endif %}{# kludge to set var outside scope #}
            <li class="filter{% if n!=filter_count %} sort-item{% endif %}">
              <span class="handle glyphicon glyphicon-move"></span>
              <a class="filter-button"
                 data-toggle="modal"
                 data-target="{{'#filter-dialog-%02d' % n }}" href="{{'#filter-dialog-%02d' % n}}">
                {{ filter_types.names[filter_type] }}
              </a>
              <span class="filter-delete">[<a onclick="hxl_proxy.ui.removeFilter(this);">x</a>]</span>
              <div class="modal fade" id="{{ 'filter-dialog-%02d' % n }}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h2 class="modal-title">{{ filter_types.names[filter_type] }}</h2>
                    </div>
                    <div class="modal-body">
                      <fieldset id="{{ 'filter-group%02d' % n }}">
                        <input type="hidden" name="{{ 'filter{0:02}'.format(n) }}" value="{{ filter_type }}"/>
                        {% include 'includes/filters/filter-list.html' %}
                      </fieldset>

                      <div class="recipe-buttons">
                        <button class="btn btn-success" type="submit" aria-label="Close"><span aria-hidden="true">Save changes</span></button>
                        <a onclick="hxl_proxy.ui.removeFilter(this);" class="btn btn-link pull-right" aria-label="Close"><span aria-hidden="true">Remove filter</span></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            {% endif %}
            {% endfor %}
            {% set n = vars.last_index + 1 %}
            <li class="filter filter-new">
              <span class="handle glyphicon glyphicon-plus"></span>
              <a class="filter-button"
                 data-toggle="modal"
                 data-target="{{'#filter-dialog-%02d' % n }}" href="{{'#filter-dialog-%02d' % n}}">
                (new filter)
              </a>
              <div class="modal fade" id="{{ 'filter-dialog-%02d' % n }}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h2 class="modal-title">New filter</h2>
                    </div>
                    <div class="modal-body">
                      <fieldset id="{{ 'filter-group%02d' % n }}">
                        <div class="{% if n!=filter_count %}hidden{% endif %}">
                          {% include 'includes/filters/filter-selector.html' %}
                        </div>
                        {% include 'includes/filters/filter-list.html' %}
                      </fieldset>
                      <div class="recipe-buttons">
                        <button class="btn btn-success" type="submit" aria-label="Close"><span aria-hidden="true">Add filter</span></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ol>
          <fieldset class="panel panel-info">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="strip-headers"{% if recipe.args['strip-headers'] %} checked="checked"{% endif %} />
                      Strip text headers
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="force"{% if recipe.args['force'] %} checked="checked"{% endif %} />
                      Never cache
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-md-6">
                  <label for="stub">Filename (no ext)</label>
                  <input id="stub"
                         name="stub"
                         class="form-control"
                         value="{{ recipe.stub|nonone }}"
                         placeholder="data"
                         title="Base filename for download, without .csv or .json extension"
                         />
                </div>
                <div class="form-group col-md-6">
                  <label for="max-rows">Max rows</label>
                  <input id="max-rows"
                         name="max-rows"
                         type="number"
                         min="0"
                         step="1"
                         class="form-control"
                         value="{{ recipe.args['max-rows']|nonone }}"
                         placeholder="nnnn"
                         title="Maximum rows of data to display or download"
                         />
                </div>
              </div>
              <div class="form-input">
                <button class="btn btn-info btn-sm">Update preferences</button>
              </div>
            </div>
          </fieldset>
          {% if recipe.recipe_id %}
          <input type="hidden" name="recipe_id" value="{{ recipe.recipe_id }}"/>
          {% endif %}
          {% include "includes/tagger-params.html" %}
          {% include "includes/metadata-params.html" %}
          {% if recipe.args['recipe'] %}
          <input type="hidden" name="recipe" value="{{ recipe.args['recipe'] }}" />
          {% endif %}
        </form>
      </section>

      <section class="col-sm-8 col-md-9">
        {% if source %}
        <h3>Result preview</h3>
        <div id="preview-table">
          {% include 'includes/hxltable.html' %}
        </div>
        {% if source.has_more_rows %}
        <p id="preview-warning" class="alert alert-warning hxltable-warning">
          Previewing the first {{ "{:,}".format(source.max_rows) }} data row(s).
        </p>
        {% endif %}
        {% else %}
        <h3>Error!</h3>
        {% if error %}
        {{ error }}
        {% else %}
        Unknown error - please fix recipe
        {% endif %}
        {% endif %}
      </section>
    </main>
    {% include "includes/scripts.html" %}
    {% include "includes/chooser-scripts.html" %}
    <script src="{{ static('jquery/jquery-ui.min.js') }}"></script>
    <script src="{{ static('jquery/jquery.ui.touch-punch.min.js') }}"></script>
    <script>
      $(function  () {
        $("ol.filter-list").sortable({
          handle: ".glyphicon-move",
          update: hxl_proxy.ui.resortFilterForms,
          items: '.sort-item'
        });
      });      
    </script>
    <script>
      hxl_proxy.ui.setup_filters($('#filter-form'));
      $(document).ready(function() {
        // add the preview warning, with total row count
        $("#preview-warning").insertBefore($(".hxltable"));
      });
    </script>
  </body>
</html>
