<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Recipe filters @ HXL Proxy</title>
    {% include "includes/headers.html" %}
  </head>
  <body class="container-fluid">
    {% with facet='edit' %}
    {% include "includes/navbar.html" %}
    {% endwith %}
    <header>
      {% with facet='edit' %}
      {% include "includes/data-tabs.html" %}
      {% endwith %}
      <h1>
        Add filters to your data 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>Filters</h3>
        {% if recipe.recipe_id %}
        {% set method="POST" %}
        {% set action="/actions/save-recipe" %}
        {% else %}
        {% set method="GET" %}
        {% set action="/data/edit" %}
        {% endif %}
        <form action="{{ action }}" method="{{ method }}" id="filter-form">

          <fieldset class="btn-group btn-group-vertical btn-group-justified" role="group" aria-label="Data filters">
            {% for n in range(1, filter_count+1) %}
            <div class="filter">
              <a class="btn btn-default filter-button" data-toggle="modal" data-target="{{ '#filter-dialog-%02d' % n }}" href="{{ '#filter-dialog-%02d' % n }}">{{ n }}</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 }}">
                        {% include 'includes/filters/filter-selector.html' %}

                        {% include 'includes/filters/add.html' %}
                        {% include 'includes/filters/append.html' %}
                        {% include 'includes/filters/clean.html' %}
                        {% include 'includes/filters/count.html' %}
                        {% include 'includes/filters/cut.html' %}
                        {% include 'includes/filters/dedup.html' %}
                        {% include 'includes/filters/merge.html' %}
                        {% include 'includes/filters/rename.html' %}
                        {% include 'includes/filters/replace.html' %}
                        {% include 'includes/filters/replace-map.html' %}
                        {% include 'includes/filters/select.html' %}
                        {% include 'includes/filters/sort.html' %}

                      </fieldset>

                      <button class="btn btn-success" type="submit" aria-label="Close"><span aria-hidden="true">Update</span></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </fieldset>
          <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="form-input">
                <button class="btn btn-info btn-xs">Update preferences</button>
                <a class="btn btn-success btn-xs pull-right" href="{{ data_url(recipe) }}">Done filters</a>
              </div>
            </div>
          </fieldset>
          {% if recipe.recipe_id %}
          <input type="hidden" name="recipe_id" value="{{ recipe.recipe_id }}"/>
          {% endif %}
          {% include "includes/params.html" %}
        </form>
      </section>

      <section class="col-sm-8 col-md-9">
        <h3>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) }} of
          {{ "{:,}".format(source.total_rows) }} data rows.
        </p>
        {% endif %}
      </section>
    </main>
    {% include "includes/scripts.html" %}
    {% include "includes/chooser-scripts.html" %}
    <script>
      hxl_proxy.ui.form();
      $(document).ready(function() {
      // add the preview warning, with total row count
      $("#preview-warning").insertBefore($(".hxltable"));
      });
    </script>
  </body>
</html>
