{% extends "tx_highered/detail_base.html" %}
{% load glossary %}
{% load layout_helpers humanize instachart %}
{% load static from staticfiles %}

{% block head_title %}{{ object.name }}{% endblock %}
{% block page_title %}{{ object.name }}{% endblock %}

{% block body_base %}{% load_glossary "Higher Ed" %}{{ block.super }}{% endblock %}

{% block breadcrumb_items %}
  {% if object.system %}
    <li>
      <div class="btn-group">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#{# object.system.get_absolute_url #}">
          {{ object.system }}
          <span class="caret" style="vertical-align: middle;"></span>
        </a>
        <ul class="dropdown-menu">
          {% for inst in object.system.institution_set.published %}
            <li {% if inst == object %}class="active"{% endif %}><a tabindex="-1" href="{{ inst.get_absolute_url }}">{{ inst.name }}</a></li>
          {% endfor %}
        </ul>
      </div>

    </li>
  {% endif %}
  <li class="active">
    {% if object.system %}
      <span class="divider">/</span>
    {% endif %}
    <a href="">{{ object.name }}</a>
  </li>
{% endblock %}


{% block page_top %}
  <div id="object-meta" class="hidden"
       data-name="{{ institution.name }}"
       data-slug="{{ institution.slug }}"
       data-pk="{{ institution.pk }}"
       data-ipedsid="{{ institution.ipeds_id }}"
       data-ficeid="{{ institution.fice_id }}"
       data-isprivate="{% if institution.is_private %}true{% else %}false{% endif %}">
  </div>

  {% if institution.sentence_institution_type %}
    <p class="rollup">
        {% gloss institution.sentence_institution_type.title %}
    </p>
  {% endif %}

  {% if institution.enrollment_fte %}
  {# WISHLIST show how this number was derived and what it means (FTE vs total) #}
    <p class="rollup">
      {{ institution.enrollment_fte|intcomma }} students
    </p>
  {% endif %}

  {% include "tx_highered/includes/sentences.html" %}
{% endblock %}


{% block rail %}
  {% render_model object "quick-stats" %}
  {% if object.location %}
    <div class="well" style="padding: 0;">
      {% include "tx_highered/includes/map_static_mapbox.html" with w=229 h=143 %}
    </div>
  {% endif %}
{% endblock rail %}


{% block main %}
  {% if show_video %}{% if object.pk == 11 or object.pk == 27 %}{# 11 == TAMU, 27 == UT Austin #}
    {% include "tx_highered/includes/sponsor_message.html" %}
  {% endif %}{% endif %}

  <section id="admissions">
    <h2>Admissions <small class="page-anchor"><a href="#admissions"><i class="icon-share"></i></a></small></h2>
    <div class="well well-small chart-help">
        Number of students who applied, were admitted<!--, --> and enrolled
    </div>

    {% if object.admission_buckets.years|length %}
      {% with object_list=object.get_admissions %}
        {% include "instachart/simplechart/admissions.html" %}
      {% endwith %}

      <table class="chart-data table table-striped table-condensed admissions">
        <thead>
          <tr>
            <th></th>
            {% for year in object.admission_buckets.years %}<th>{{ year }}</th>{% endfor %}
          </tr>
        </thead>

        <tbody>
          <tr>
            <th>{% gloss "Applicants" %}</th>
            {% for a in object.admission_buckets.applicants.values %}<td>{{ a|intcomma }}</td>{% endfor %}
          </tr>

          <tr>
            <th>{% gloss "Admitted" %}<br><small>(% of Applicants)</small></th>
            {% for a in object.admission_buckets.admitted.values %}<td>{{ a.0|intcomma }} <small>({{ a.1 }}%)</small></td>{% endfor %}
          </tr>

          <tr>
            <th>{% gloss "Enrolled" %}<br><small>(% of Admitted)</small></th>
            {% for a in object.admission_buckets.enrolled.values %}<td>{{ a.0|intcomma }} <small>({{ a.1 }}%)</small></td>{% endfor %}
          </tr>
        </tbody>
      </table>

      <div class="row requires-svg">
        <div class="span12">
          <div class="well well-small chart-help">
            Applicants, admitted and enrolled students by year
          </div>
        </div>
      </div>

      <div class="row requires-svg">
        <div class="span10">
          <div class="d3-viz chart-viz loading" style="height: 300px"></div>
        </div>

        <div class="span2">
          <div class="chart-help">
            <h3>Students</h3>
            <div class="legend chart-legend">
            </div>
          </div>
        </div>
      </div>
    {% else %}
      {% include "tx_highered/includes/no_data.html" %}
    {% endif %}
  </section>

  <section id="testing">
    <h2>Test Scores <small class="page-anchor"><a href="#testing"><i class="icon-share"></i></a></small></h2>

    <div class="row">
      <div class="span12">
        <div class="well well-small chart-help">
          Average {% gloss "SAT" %} scores by section for enrolling students (writing section not introduced until 2006 and still not reported by some institutions)
        </div>
      </div>
    </div>

    {% if object.testscores.all.exists %}
      {% instachart object.testscores.all "testscores" %}

      <table class="chart-data table table-striped table-condensed">
        <thead>
          <tr>
            <th></th>
            {% for year in object.sat_score_buckets.years %}<th>{{ year }}</th>{% endfor %}
          </tr>
        </thead>

        <tr>
          <th>Critical Reading</th>
          {% for a in object.sat_score_buckets.verbal_range.values %}<td>{{ a }}</td>{% endfor %}
        </tr>

        <tr>
          <th>Math</th>
          {% for a in object.sat_score_buckets.math_range.values %}<td>{{ a }}</td>{% endfor %}
        </tr>

        <tr>
          <th>Writing</th>
          {% for a in object.sat_score_buckets.writing_range.values %}<td>{{ a }}</td>{% endfor %}
        </tr>
      </table>

      <div class="row requires-svg">
        <div class="span12">
          <div class="well well-small chart-help">
            Critical reading, math<!--, --> and writing SAT scores of the
            25th&ndash;75th percentile by year<br>
            (writing section not introduced until 2006 and still not reported by some institutions)
          </div>
        </div>
      </div>

      <div class="row requires-svg">
        <div class="span10">
          <div class="chart d3-viz chart-viz loading"></div>
        </div>
        <div class="span2">
          <h3>Sections</h3>
          <div class="chart-help">
            <div class="legend chart-legend">
            </div>
          </div>
        </div>
      </div>
    {% else %}
      {% include "tx_highered/includes/no_data.html" %}
    {% endif %}
  </section>

  <section id="enrollment">
    {% with b=object.enrollment_buckets %}
      <h2>Enrollment <small class="page-anchor"><a href="#enrollment"><i class="icon-share"></i></a></small></h2>

      <div class="row">
        <div class="span12">
          <div class="well well-small chart-help">
            {# FIXME this caption is wrong now that the data sources are combined #}
            {% if b.data_source == "IPEDS" %}
              Number of full-time equivalent students enrolled
            {% else %}
              Number of students enrolled
            {% endif %}
          </div>
        </div>
      </div>

      <table class="chart-data table table-striped table-condensed">
        <thead>
          <tr>
            <th></th>
            {% for year in b.years %}<th>{{ year }}</th>{% endfor %}
          </tr>
        </thead>
        <tbody>
          {% if b.total %}
            <tr>
              <th>Total</th>
              {% for a in b.total.values %}<td>{{ a|intcomma }}</td>{% endfor %}
            </tr>
          {% endif %}
          {% if b.fulltime_equivalent %}
            <tr>
              <th>Full-Time Equivalent (FTE)</th>
              {% for a in b.fulltime_equivalent.values %}<td>{{ a|intcomma }}</td>{% endfor %}
            </tr>
          {% endif %}
          {% if b.fulltime %}
            <tr>
              <th>Full-Time</th>
              {% for a in b.fulltime.values %}<td>{{ a|default:""|intcomma }}</td>{% endfor %}
            </tr>
          {% endif %}
          {% if b.parttime %}
            <tr>
              <th>Part-Time</th>
              {% for a in b.parttime.values %}<td>{{ a|default:""|intcomma }}</td>{% endfor %}
            </tr>
          {% endif %}
        </tbody>
      </table>
    {% endwith %}
    {% with b=object.demographics_buckets %}
      <a name="demographics"></a>
      <h3>Demographics <small class="page-anchor"><a href="#demographics"><i class="icon-share"></i></a></small></h3>

      <div class="row">
        <div class="span12">
          <div class="well well-small chart-help">
            <div class="item">
              Percent of student body by ethnicity
              {% if b.data_source %}
                <small class="data_source invisible">
                  Source: {{ b.data_source }}
                </small>
              {% endif %}
            </div>
            <div class="item"><small>
              (Reporting criteria changed
              over reporting period. Specifically, prior to 2011, Pacific Islander
              was bundled with Asian; Multiracial was introduced in 2010; and
              Unknown was introduced in 2010.)
            </small></div>
          </div>
        </div>
      </div>

      {% if object.enrollment.all.exists %}
        <div class="wide-chart-wrapper">
        <table class="chart-data table table-striped table-condensed">
          <thead>
            <tr>
              <th></th>
              {% for year in b.years %}<th>{{ year }}</th>{% endfor %}
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>White</th>
              {% for a in b.total_percent_white.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
            <tr>
              <th>Black</th>
              {% for a in b.total_percent_black.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
            <tr>
              <th>Hispanic</th>
              {% for a in b.total_percent_hispanic.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
            <tr>
              <th>Asian</th>
              {% for a in b.total_percent_asian.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
            {% if b.pacific_islander_percent %}
              <tr>
                <th>{% gloss "Pacific Islander" %}</th>
                {% for a in b.pacific_islander_percent.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
              </tr>
            {% endif %}
            <tr>
              <th>{% gloss "Native" %}</th>
              {% for a in b.total_percent_native.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
            {% if b.multiracial_percent %}
              <tr>
                <th>{% gloss "Multiracial" %}</th>
                {% for a in b.multiracial_percent.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
              </tr>
            {% endif %}
            {% if b.international_percent %}
              <tr>
                <th>{% gloss "International" %}</th>
                {% for a in b.international_percent.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
              </tr>
            {% endif %}
            <tr>
              <th>Unknown</th>
              {% for a in b.total_percent_unknown.values %}<td>{% if a %}{{ a }}%{% else %}*{% endif %}</td>{% endfor %}
            </tr>
          </tbody>
        </table>
        </div>

        <div class="row requires-svg">
          <div class="span12">
            <div class="well well-small chart-help">
              Student body breakdown by ethnicity and total enrollment
            </div>
          </div>
        </div>

        <div class="row requires-svg">
          <div class="span10">
            <div class="chart d3-viz chart-viz loading"></div>
          </div>

          <div class="span2">
            <div class="chart-help">
              <h3>Race / Ethnicity</h3>
              <div class="legend chart-legend">
              </div>
            </div>
          </div>
        </div>

      {% else %}
        {% include "tx_highered/includes/no_data.html" %}
      {% endif %}
    {% endwith %}
  </section>

  <section id="pricetrends">
    <h2>Price Trends <small class="page-anchor"><a href="#pricetrends"><i class="icon-share"></i></a></small></h2>
    <div class="row">
      <div class="span12">
        <div class="well well-small chart-help">
          Average total cost for {% gloss "in-state" %} and {% gloss "out-of-state" %} students by year
          <small class="data_source invisible">
            Source: IPEDS
          </small>
        </div>
      </div>
    </div>

    {% if object.pricetrends.all.exists %}
      {% instachart object.pricetrends.all "pricetrends" %}

      <div class="wide-chart-wrapper">
      <table class="chart-data table table-striped table-condensed">
        <thead>
          <tr>
            <th></th>
            {% for year in object.tuition_buckets.years %}<th>{{ year }}</th>{% endfor %}
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>{% gloss "In-State" %} Tuition</th>
            {% for a in object.tuition_buckets.in_state.values %}
              <td>
                {% if a %}
                  <span class="dollar">$</span><span class="currency">{{ a|intcomma }}</span>
                {% else %}
                  <span class="nodata">N/A</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
          <tr>
            <th>{% gloss "Out-Of-State" %} Tuition</th>
            {% for a in object.tuition_buckets.out_of_state.values %}
              <td>
                {% if a %}
                  <span class="dollar">$</span><span class="currency">{{ a|intcomma }}</span>
                {% else %}
                  <span class="nodata">N/A</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
          <tr>
            <th>Books &amp; Supplies</th>
            {% for a in object.tuition_buckets.books_and_supplies.values %}
              <td>
                {% if a %}
                  <span class="dollar">$</span><span class="currency">{{ a|intcomma }}</span>
                {% else %}
                  <span class="nodata">N/A</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
          <tr>
            <th>Room &amp; Board</th>
            {% for a in object.tuition_buckets.room_and_board_on_campus.values %}
              <td>
                {% if a %}
                  <span class="dollar">$</span><span class="currency">{{ a|intcomma }}</span>
                {% else %}
                  <span class="nodata">N/A</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
      </div>

      <div class="row requires-svg">
        <div class="span12">
          <div class="well well-small chart-help">
            Total costs for in-state and out-of-state students by year
          </div>
        </div>
      </div>

      <div class="row chart1 requires-svg">
        <div class="span10">
          <div class="chart d3-viz chart-viz loading"></div>
        </div>

        <div class="span2">
          <div class="chart-help">
            <h3>Total Costs</h3>
            <div class="legend chart-legend"><!-- GENERATED LEGEND --></div>
            <div class="well well-small" style="display:none;">
              This chart can be changed to show out-of-state costs as well.
            </div>
          </div>
        </div>
      </div>

      <div class="row requires-svg">
        <div class="span12">
          <div class="well well-small chart-help">
            {% if object.is_private %}
              Tuition and Fees for students by year
            {% else %}
              Tuition and Fees for in-state and out-of-state students by year
            {% endif %}
          </div>
        </div>
      </div>

      <div class="row chart2 requires-svg">
        <div class="span10">
          <div class="chart d3-viz chart-viz loading"><!-- GENERATED CHART --></div>
        </div>

        <div class="span2">
          <div class="chart-help">
            <h3>Tuition</h3>
            <div class="legend chart-legend"><!-- GENERATED LEGEND --></div>
          </div>
        </div>
      </div>
    {% else %}
      {% include "tx_highered/includes/no_data.html" %}
    {% endif %}
  </section>

  <section id="gradrates">
    {% with b=object.graduationrates_buckets %}
      <h2>Graduation Rates <small class="page-anchor"><a href="#gradrates"><i class="icon-share"></i></a></small></h2>
      <div class="row">
        <div class="span12">
          <div class="chart-help well well-small">
            <!-- mentally remove the inline comment if you prefer proper English -->
            Percent of {% gloss "first-time" %}, full-time students who graduated in four, five<!--, --> or six years
            {% if b.data_source %}
              <small class="data_source invisible">
                Source: {{ b.data_source }}
              </small>
            {% endif %}
          </div>
        </div>
      </div>

      {% if b.years|length %}
        {% with object_list=object.get_graduation_rates %}
          {% include "instachart/simplechart/gradrates.html" %}
        {% endwith %}

        <table class="chart-data table table-striped table-condensed">
          <thead>
            <tr>
              <th></th>
              {% for year in b.years %}<th>{{ year }}</th>{% endfor %}
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>4-Year</th>
              {% for a in b.bachelor_4yr.values %}<td>{% if a %}{{ a }}%{% else %}N/A{% endif %}</td>{% endfor %}
            </tr>
            <tr>
              <th>5-Year</th>
              {% for a in b.bachelor_5yr.values %}<td>{% if a %}{{ a }}%{% else %}N/A{% endif %}</td>{% endfor %}
            </tr>
            <tr>
              <th>6-Year</th>
              {% for a in b.bachelor_6yr.values %}<td>{% if a %}{{ a }}%{% else %}N/A{% endif %}</td>{% endfor %}
            </tr>
          </tbody>
        </table>

        <div class="row requires-svg">
          <div class="span12">
            <div class="well well-small chart-help">
              Percent of {% gloss "first-time" %}, full-time students who graduated in four, five<!--, --> or six years
            </div>
          </div>
        </div>

        <div class="row requires-svg">
          <div class="span10">
            <div class="chart d3-viz chart-viz loading"></div>
          </div>

          <div class="span2">
            <div class="chart-help">
              <h3>Graduations</h3>
              <div class="legend chart-legend">
              </div>
            </div>
          </div>
        </div>
      {% else %}
        {% include "tx_highered/includes/no_data.html" %}
      {% endif %}
    {% endwith %}
  </section>
{% endblock %}

{% block attribution %}
    {% include "tx_highered/includes/attribution.html" %}
{% endblock %}

{% block extra_script %}{{ block.super }}
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-tooltip-d3.js' %}"></script>
<script src="{% static 'tx_highered/js/tabbouleh.js' %}"></script>
{# <script src="{% static 'tx_highered/js/d3chart.js"><' %}/script> #}
<script src="//texastribune.github.io/d3chart/d3chart.js"></script>
<script src="{% static 'tx_highered/js/pricetrends-chart.js' %}"></script>
<script src="{% static 'tx_highered/js/testscores-chart.js' %}"></script>
<script src="{% static 'tx_highered/js/enrollment-race-chart.js' %}"></script>
<script>
  var enrollment_chart_url = "{% url 'tx_highered:enrollment_api' object.id %}";
  var testchart, testchart_url = "{% url 'tx_highered:institution_api' object.id "testscores" %}";
  var makeAdmissionsChart = function(){
    var $section = $('#admissions'),
        data = $section.find('table.data-source').tabulate().toArray(),
        options = {
          colors: ['#9CF', '#39C', '#036'],
          tooltip: {
            enabled: true,
            format: function() {
              var d = this.__data__;
              return d.series + " (" + d.x + "):<br><b>" + d3.format(",f")(d.y) + "</b>";
            }
          },
          xAxis: {
            enabled: true,
            title: "Year"
          },
          yAxis: {
            enabled: true,
            title: "Number of Students",
            // format: function(a){ return a + '%'; },
          },
          legend: {
            enabled: true,
            elem: $section.find('.legend'),
            titleAccessor: function(d, i){ return d[0].series; }
          },
          barSpacing: "15%"
        };

    new D3StaggeredBarChart($section.find('.d3-viz'), data, options);
  };

  var makeGradRatesChart = function(){
    var $section = $('#gradrates'),
        data = $section.find('table.data-source').tabulate().toArray().reverse(),
        options = {
          colors: ['#99c', '#639', '#306'],
          tooltip: {
            enabled: true,
            format: function() {
              return this.__data__.series + " bachelor's graduation rate<br><b>" +
                d3.format(",.1f")(this.__data__.y) + "%</b>";
            }
          },
          xAxis: {
            enabled: true,
            title: "Year"
          },
          yAxis: {
            enabled: true,
            title: "Percent",
            format: function(a){ return a + '%'; },
            max: 100
          },
          legend: {
            enabled: true,
            elem: $section.find('.legend'),
            reversed: true,
            titleAccessor: function(d, i){ return d[0].series; }
          },
          barSpacing: "-10%"
        };

    new D3StaggeredBarChart($section.find('.d3-viz'), data, options);
  };

  var makeTestScoresChart = function(){
    var series = ["Critical Reading", "Math", "Writing"];  // HACK
    new TestScoresChart(
      $('#testing .d3-viz'),
      testchart_url,
      {
        colors: ['#066', '#c93', '#339'],
        tooltip: {
          enabled: true,
          format: function(){
            var d = this.__data__;
            return d.title || "" + d.y + " - " + d.y_max + "";
          }
        },
        xAxis: {
          enabled: true,
          title: "Year"
        },
        yAxis: {
          enabled: true,
          title: "SAT Score",
          min: 200,
          max: 800
        },
        legend: {
          enabled: true,
          elem: $('#testing .legend'),
          titleAccessor: function(d, i) { return series[i]; }
        }
      }
    );
  };

  var loadCharts = function(){
    makeAdmissionsChart();
    makeTestScoresChart();
    makePriceTrendsCharts();
    makeEnrollmentRaceChart();
    makeGradRatesChart();
  };

  // if Modernizr is missing or Modernizr is loaded and says we have svg
  if (typeof(Modernizr) === "undefined" || Modernizr.svg){
    loadCharts();
  }

  $(function() {
    $('dfn[data-definition]').tooltip({
      title: function(){ return $(this).data('definition'); }
    });
  });
</script>
{% endblock %}
