<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Map{% if recipe.name %} of {{ recipe.name}}{% endif %} @ HXL Proxy
    </title>
    {% include "includes/headers.html" %}
    <link rel="stylesheet" href="{{ static('leaflet/leaflet.css') }}" />
  </head>
  <body class="container-fluid">
    {% set facet="chart" %}
    {% set page_help='Map-page' %}
    {% include "includes/navbar.html" %}
    <header>
      <p class="pull-right">
        <a type="button" class="btn btn-info btn-xs"
           data-toggle="modal"
           data-target="#customise-modal">Customise</a>
      </p>
      <h1>
        Map{% if recipe.name %} of {{ recipe.name}}{% endif %}        
      </h1>
    </header>
    <main class="col-xs-12">
      <div id="map-container">
        <div id="map-div"></div>
        <div id="map-loading">Loading...</div>
      </div>
    </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="field.default_country">
                    Default country (for pcodes)
                  </label>
                  <select id="field.default_country" name="default_country" class="form-control">
                    <option value="">-- none --</option>
                    {% for name, code in config.get('PCODE_COUNTRY_MAP').items()|sort() %}
                    <option value="{{ code }}"{% if default_country==code %} selected="selected"{% endif %}>{{ name }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label for="pcode_tag">
                    Choose p-code column
                  </label>
                  <select name="pcode_tag" class="form-control">
                    <option value="">-- none --</option>
                    {% for column in source.columns %}
                    <option value="{{ column.display_tag }}"{% if pcode_tag and pcode_tag.match(column) %} selected="selected"{% endif %}>{{ column.display_tag }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label for="value_tag">
                    Choose column containing a value.
                  </label>
                  <select name="value_tag" class="form-control">
                    <option value="">-- none --</option>
                    {% for column in source.columns %}
                    {% if column.display_tag %}
                    <option value="{{ column.display_tag }}"{% if value_tag and value_tag.match(column) %} selected="selected"{% endif %}>{{ column.display_tag }}</option>
                    {% endif %}
                    {% 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="{{ static('leaflet/leaflet.js') }}"></script>
    <script type="text/javascript" src="{{ static('leaflet/plugins/markercluster/leaflet.markercluster.js') }}"></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.map({
          pcode_base_url: "{{ config.get('PCODE_BASE_URL')|nonone|safe }}",
          csv_url: "{{ data_url_for('data_view', recipe, format='csv')|nonone|safe }}",
          default_country: "{{ default_country|nonone|safe }}",
          pcode_tag: "{{ pcode_tag|nonone|safe }}",
          layer_tag: "{{ layer_tag|nonone|safe }}",
          value_tag: "{{ value_tag|nonone|safe }}"
      });
    </script>
  </body>
</html>
