{% extends "base_site.html" %}

{% block title %} {{ plot.name }} {% endblock title %}

{% block stylesheets %}
  {{ super() }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <style>
    .nav-md .container.body .right_col {
      margin-left: 0;
    }
    .x_content.cea-plot {
      height: 50vh;
      min-height: 450px;
    }
  </style>
{% endblock stylesheets %}

{% block sidebar %}{% endblock sidebar %}
{% block top_navigation %} {% endblock top_navigation %}
{% block body_class %}{% endblock body_class %}

{% block content %}
    <script src="{{ url_for('.static', filename='js/plotly-latest.min.js') }}"></script>
    <div class="right_col" role="main">
      <div class="">
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel cea-plot"
                 data-cea-plot-index="{{ plot_index }}"
                 data-cea-dashboard-index="{{ dashboard_index }}">
              <div class="x_title">
                <h2>{{ plot.title }}</h2>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <!-- {{ parameters }} -->
                {% if 'buildings' in parameters %}
                <select id="parameters-buildings" class="selectpicker"
                        data-none-selected-text="Whole District" multiple>
                  {% for building in parameters['all_buildings'] %}
                    <option title="{{ building }}">{{ building }}</option>
                  {% endfor %}
                </select>
                {% endif %}
              </div>
              <div class="x_content cea-plot" id="x_content-{{ dashboard_index }}-{{ plot_index }}">
                <p>Loading plot...</p>
              </div>
              <div class="x_content" id="x_table-{{ dashboard_index }}-{{ plot_index }}">
                  <p>Loading table...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
{% endblock content %}

{% block footer %}{% endblock footer %}

{% block javascripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
  <script src="{{ url_for('.static', filename='js/plotly-latest.min.js') }}"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  <script src="{{ url_for('.static', filename='js/single-plots.js') }}"></script>
  <script>
    window.addEventListener("resize", function() {
      console.log("resizing");
      $.each($(".plotly-graph-div.js-plotly-plot"), function() {
        Plotly.Plots.resize($(this).attr("id"));
      });
    });
  </script>
{% endblock javascripts %}