{% extends "layout.html" %} {% block content %}
<main class="graph-container shadow-sm">
  <form class="min-vh-75" action="" method="post" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    <!-- Form title section -->
    <section class="container-fluid">
      <div class="row pt-3">
        <div class="d-flex col-sm-6 offset-md-3 justify-content-end">
          {% if form.title.errors %}
              {{ form.title(class="primary-colour form-control is-invalid w-75 title") }}
              <div class="invalid">
                  {% for error in form.title.errors %}
                      <span>{{ error }}</span>
                  {% endfor %}
              </div>
          {% else %}
              {{ form.title(class="primary-colour form-control w-75 title") }}
          {% endif %}
        </div>
        <div class="col-sm-3 d-flex justify-content-end">
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Save as
            </button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <div class="dropdown-item export pointer">Export as PNG</div>
              {{ form.submit(class="dropdown-item no-btn") }}
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="graph-sub-container">
      <div class="row vh-75 p-3">
        <!-- Graph container section -->
        <section class="graph-height col-md-9 p-0  order-md-2">
          <div id="graph" class="h-100 position-relative">
            <!-- ------GRAPH OVERLAY------ -->
            <div class="empty-graph visible h-100 w-100 mr-2">
              <h1>Choose your variables to get started</h1>
            </div>
            <!-- ------TOOLTIP------ -->
            <div class="graph-tooltip tooltip-hidden">
              <p><span class="tooltip-value"></span></p>
            </div>
          </div>
        </section>
        <!-- Start of Axis settings. Each graph type has its own HTML -->
        {% block axis %} {% endblock %}
        <!-- End of Axis settings -->
      </div>
    </div>
  <!-- END OF GRAPH GRID -->
  </form>
</main>
<!-- Scripts that are used on all of the graph pages. Specific javscripts relating to each
graph type are included on their own page -->
<script type="text/javascript" defer>
  // Conversions from python True/False to javascript true/false
  var nan = "N/A";
  var True = true;
  var False = false;
  var graphData = {{ data | safe }}
  // Needed for testing
  {% if 'csrf_token' in form %}
    var csrf = "{{ form.csrf_token._value() }}"
  {% endif %}
  var redirectUrl = "{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
  var url = "{{ url_for('graphs.graph', survey_id=survey_id, graph_id=graph_id, chart_type=chart_type) }}"
</script>
<!-- Scripts for exporting graph as image and for saving to dashboard -->
<script src="{{ url_for('static', filename='graphscripts/postgraph.js') }}" defer></script>
<!-- Script taken from https://github.com/exupero/saveSvgAsPng -->
<script src="{{ url_for('static', filename='graphscripts/saveSvgAsPng.js') }}" defer></script>
{% endblock content %}