{% extends "base_no_footer.html" %}
{% load static %}
{% load adv_cache %}
{% block title %}{{CITY_COUNCIL_NAME}} Members{% endblock %}

{% block extra_css %}
  {% cache 86400 leaflet_wrapper 'leaflet' %}
    {% if map_geojson %}
      <link rel="stylesheet" href="{% static 'css/leaflet.css' %}" />
    {% endif %}
  {% endcache %}
{% endblock %}

{% block full_content %}

  {% cache 86400 members_wrapper 'members' %}

    <div class="container-fluid">
      {% if map_geojson %}
        <div class="row">
          <div class="col-sm-6">
            <h1>{{ CITY_VOCAB.COUNCIL_MEMBERS }}</h1>
          </div>
          <div class="col-sm-6">
            <h4>Look up your council member</h4>
            <div class="input-group address-search">
              <input name="search_address" id='search_address' type="text" class="form-control" placeholder="Enter your address">
              <div class='input-group-btn'>
                <button id='btn_search' class="btn btn-primary" title='Search'>
                  <i class='fa fa-fw fa-search'></i><span class="non-mobile-only"> Search</span>
                </button>
                <a class='btn btn-default' id='reset' title='Reset the map' href='#'>
                  <i class='glyphicon glyphicon-repeat'></i> Reset
                </a>
              </div>
            </div>
          </div>
        </div>
        <br/>
      {% else %}
        <div class="row">
          <div class="col-sm-12">
            <br/>
            <h1>{{ CITY_VOCAB.COUNCIL_MEMBERS }}</h1>
            <hr />
          </div>
        </div>
      {% endif %}

      <div class="row-fluid">
        {% if map_geojson %}
          <div class='col-sm-6 no-pad-mobile'>
            <div id="map"></div>
          </div>
          <div class="col-sm-6 no-pad-mobile">
            <div id="council-member-scroll-area">
              {% include 'partials/council_member_table.html' %}
            </div>
          </div>
        {% else %}
          <div class="col-sm-8 no-pad-mobile">
            {% include 'partials/council_member_table.html' %}
          </div>
          <div class='col-sm-4'>
            {% include 'partials/council_info_blurb.html' %}
          </div>
        {% endif %}
      </div>
    </div>

  {% endcache %}

{% endblock %}


{% block extra_js %}
  {% cache 86400 js_wrapper 'js' %}
    {% include 'partials/map.html' %}
    <script src="{% static 'js/lib/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'js/lib/jquery.dataTables.sorting.js' %}"></script>
    <script src="{% static 'js/lib/dataTables.bootstrap.js' %}"></script>

    <script>
      var council_member_table = $("#council-members").DataTable({
        "info": false,
        "bLengthChange": false,
        "paging": false,
        "aaSorting": [ [2,'asc'] ],
        "aoColumns": [
          { "bSortable": false },
          null,
          { "sType": "num-html" }
        ]
      });

      $( document ).ready(function() {
        $('.thumbnail-square img').each(function() {
          if ($(this).width() > $(this).height()) {
            $(this).addClass('landscape');
          }
        });
      });


      {% if map_geojson %}
        $('tbody tr').on( 'mouseover', function () {
          hoverOnRow(this.id);
          $('tr').css('background-color', 'inherit')
          $(this).css('background-color', '#eee');
        } );

        $('tbody tr').on( "mouseout", function() {
          $('tr').css('background-color', 'inherit');
          hoverOffRow(this.id);
        } )

        function hoverOffRow(select_id){
          districts.eachLayer(function (layer) {

            if (layer.feature.properties.select_id === select_id){
              layer.fire('tableout');
            }

          });

        }

        function hoverOnRow(select_id) {
          districts.eachLayer(function (layer) {

            layer.setStyle({'fillOpacity': .2})


            if (layer.feature.properties.select_id === select_id){
              layer.fire('tableover');
            }

          });
        }

      {% endif %}

    </script>

  {% endcache %}
{% endblock %}
