{% extends "tx_highered/twocolumn_base.html" %}
{% load static from staticfiles %}
{% load chunks %}{# FIXME chunks is not a requirement for the app #}


{% block head_title %}Higher Education Explorer{% endblock %}


{% block breadcrumb_base %}{# DISABLE #}{% endblock %}


{% block main %}
  <section id="intro">
    {% chunk "higher-ed/explorer#intro" %}
  </section>

  <hr>

  <section class="row-fluid">
    <div class="graphic pull-right">
      <img src="//s3.amazonaws.com/static.texastribune.org/common/tx_schools/statewide-search-icon.png" />
    </div>

    <div>
      <h2>Search Colleges and Universities</h2>
      {% chunk "higher-ed/explorer#search" %}
      <div class="input-append">{% spaceless %}
        <input type="text" class="q span7" placeholder="College or university name">
        <span class="add-on active" data-action="reset">All</span>
        <span class="add-on" data-action="public">Public</span>
        <span class="add-on" data-action="private">Private</span>
      {% endspaceless %}</div>
    </div>

    <hr>

    {% with short_list=view.get_short_list %}{% if short_list %}
      <div class="well well-small sans-serif">
        <h4>{{ short_list|length }} Featured Higher Education Institutions:</h4>
        {% for enrollment in short_list %}
          <a data-enrollment="{{ enrollment.fulltime_equivalent }}"
             data-year="{{ enrollment.year }}"
             href="{{ enrollment.institution.get_absolute_url }}">
            {{ enrollment.institution.name }}
          </a>
          {% if not forloop.last %}
            <span class="divider">&bull;</span>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}{% endwith %}
  </section>

  <section id="view-map" class="row-fluid map-container">
    <div>
      <h2>
        View All Institutions Statewide
        <small class="btn-group" style="display: inline-block; vertical-align: middle;">
          <a href="#" class="btn btn-mini reset active" data-action="reset">All</a>
          <a href="#" class="btn btn-mini public" data-action="public">Public</a>
          <a href="#" class="btn btn-mini private" data-action="private">Private</a>
        </small>
      </h2>

      <button id="statewideZoom" class="btn" style="position:absolute; display:block; margin: 0 auto -40px;">
        Return to statewide view
      </button>

      <div id="mapCanvas"></div>
    </div>
  </section>

  <div id="mapPopupContainer" class="shadow"><h4>Hover over a campus</h4></div>

  {# TODO associate with maps.js #}
  <script id="mapPopup" type="text/x-handlebars-template">
    <h2>{% templatetag openvariable %}name{% templatetag closevariable %}</h2>
    <h4>{% templatetag openvariable %}city{% templatetag closevariable %}, TX</h4>
  </script>
{% endblock %}


{% block extra_style %}{{ block.super }}
  <link rel="stylesheet" href="//s3.amazonaws.com/cdn.texastribune.org/lib/leaflet/0.6.4/leaflet.css">
  <!--[if lte IE 8]><link rel="stylesheet" href="//s3.amazonaws.com/cdn.texastribune.org/lib/leaflet/0.6.4/leaflet.ie.css" /><![endif]-->
{% endblock %}


{% block extra_script %}{{ block.super }}
  <script>
    var STATIC_URL = "{{ STATIC_URL }}";
  </script>
  <script src="//s3.amazonaws.com/cdn.texastribune.org/lib/leaflet/0.6.4/leaflet-src.js"></script>
  <script src="{% static 'tx_highered/vendor/handlebars.js/handlebars-1.0.0.beta.6.js' %}"></script>
  <script src="{% static 'tx_highered/js/maps.js' %}"></script>
  <script>
    $(function() {
      // Go to the server for institution API data
      $.get("{% url 'tx_highered:institution_api' %}?fields=city,geojson,is_private",
        function(data) {
          autocomplete_institutions(data);
          map_institutions(data);
        }
      );
    });
  </script>
{% endblock %}
