{% extends "base_site.html" %}

{% block title %} CEA Input Editor {% endblock title %}

{% block stylesheets %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('inputs_blueprint.static', filename='css/map.css') }}">
  <link rel="stylesheet" href="{{ url_for('inputs_blueprint.static', filename='vendor/tabulator.min.css') }}">
{% endblock stylesheets %}

{% block content %}
    <div class="right_col" role="main">

      <!-- modal dialog for saving popup -->
      <div class="modal fade" id="saving-popup" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-body" id="saving-text"></div>
          </div>
        </div>
      </div>

      <!-- modal dialog for editing table row data -->
      <div class="modal fade" id="cea-column-editor" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
              </button>
              <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
              <div id="selected-buildings"></div>
              <br>
              <h4>Properties</h4>
              <form id="cea-column-editor-form" class="form-horizontal form-label-left">
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default cea-modal-cancel" data-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-default cea-modal-ok" form="cea-column-editor-form">OK</button>
            </div>
          </div>
        </div>
      </div>

      <div class="">
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_content">
                <div>
                  <div id='layers-group'>
                  <span id="zone-cb" hidden>
                  <input id='zone-toggle' type='checkbox' name='layer-toggle' value='zone' checked
                         onchange='toggleLayer(this);'>
                    <label for='zone-toggle'>Zone</label>
                  </span>
                    <span id="district-cb" hidden>
                  <input id='district-toggle' type='checkbox' name='layer-toggle' value='district' checked
                         onchange='toggleLayer(this);'>
                    <label for='district-toggle'>District</label>
                  </span>
                    <span id="streets-cb" hidden>
                  <input id='streets-toggle' type='checkbox' name='layer-toggle' value='streets' checked
                         onchange='toggleLayer(this);'>
                    <label for='streets-toggle'>Streets</label>
                  </span>
                    <span id="dh_networks-cb" hidden>
                  <input id='dh_networks-toggle' type='checkbox' name='layer-toggle' value='dh_networks' checked
                         onchange='toggleLayer(this);'>
                    <label for='dh_networks-toggle'>DH Network</label>
                  </span>
                    <span id="dc_networks-cb" hidden>
                  <input id='dc_networks-toggle' type='checkbox' name='layer-toggle' value='dc_networks' checked
                         onchange='toggleLayer(this);'>
                    <label for='dc_networks-toggle'>DC Network</label>
                  </span>
                  </div>
                  <div id="map-tooltip"></div>
                  <div id="mapid" style="height: 500px;" oncontextmenu="return false;"></div>
                </div>
              </div>
              <div class="x_content" id="cea-inputs" style="display: none">
                  <div>
                    <ul class="nav nav-pills">
                      {% for tab in tabs %}
                      {% if loop.index0 == 0 %}
                      <li class="tab" id="{{ tab }}-tab" data-name="{{ tab }}"><a>{{ tab }}</a></li>
                      {% else %}
                      <li class="tab" id="{{ tab }}-tab" data-name="{{ tab }}"><a>{{ tab }}</a></li>
                      {% endif %}
                      {% endfor %}
                    </ul>
                  </div>
                <div class="panel panel-default">
                  <div class="panel-heading clearfix">
                    <div class="pull-right" id="table-buttons">
                      <button class="btn btn-default" id="select-all-button">Select All</button>
                      <button class="btn btn-default" id="filter-button">Filter on Selection</button>
                      <button class="btn btn-default" id="edit-button">Edit Selection</button>
                      <button class="btn btn-default" id="clear-button">Clear Selection</button>
                      <button class="btn btn-danger" id="delete-button">Delete Selection</button>
                    </div>
                  </div>
                  <div id="property-table"></div>
                </div>
                <div>
                  <button class="btn btn-default" id="save-button">Save</button>
                  <button class="btn btn-default" id="discard-button">Discard Changes</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
{% endblock content %}

{% block javascripts %}
  {{ super() }}

  <script src="{{ url_for('inputs_blueprint.static', filename='js/store.js') }}?u={{ last_updated }}"></script>
  <script>
    var inputstore = new InputStore({{ store|tojson|safe }});
    console.log(inputstore);
  </script>

  <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
  <script src="{{ url_for('inputs_blueprint.static', filename='vendor/turf.min.js') }}"></script>

  <script src="{{ url_for('inputs_blueprint.static', filename='vendor/tabulator.min.js') }}"></script>

  <script src="{{ url_for('inputs_blueprint.static', filename='js/inputs.js') }}?u={{ last_updated }}"></script>
  <script src="{{ url_for('inputs_blueprint.static', filename='js/table.js') }}?u={{ last_updated }}"></script>
  <script src="{{ url_for('inputs_blueprint.static', filename='js/map.js') }}?u={{ last_updated }}"></script>
{% endblock javascripts %}