{% extends "layout.html" %} {% block content %}
<main class="container">
  <section class="row mt-4">
    <div class="col-3">
      <a class="btn btn-secondary" href="{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
      title="Return to the survey dashboard page">Back</a>
    </div>
    <div class="col-6">
      <h3 class="mt-2 primary-colour text-center">Quick Stats: {{ survey_title }}</h3>
    </div>
  </section>
  <section class="my-3 d-flex justify-content-center bg-white rounded shadow border p-2">
    <h4 class="mx-4 my-0 font-weight-light">Number of rows: {{ rows }}</h4>
    <h4 class="mx-4 my-0 font-weight-light">Number of columns: {{ cols }}</h4>
  </section>
  <section class="stats-grid">
    {% for column in column_info %}
    <article class="bg-light shadow rounded grid-element">
      <div class="text-center">
        <h5 class="primary-colour-bg p-2 text-light rounded-top">{{ column["title"] }}</h5>
      </div>
      <div class="p-3">
        <p class="lead">Data type: {{ column["data_type"] }}</p>
        {% if column["data_type"] != "true/false" %}
          <p class="lead">Unique values: {{ column["num_unique"] }}</p>
        {% endif %}
        {% if column["quantities"] %}
          <section class="bg-white border rounded shadow-sm">
            <h5 class="text-light bg-secondary p-2 rounded-top mb-0">Quantities</h5>
            <ul class="list-group text-dark">
              {% for key in column["quantities"] %}
              <li class="list-group-item d-flex justify-content-between">
                <p class="m-0">{{ key }}</p>
                <p class="m-0">{{ column["quantities"][key] }}</p>
              </li>
              {% endfor %}
            </ul>
          </section>
        {% endif %}
        {% if column["data_type"] == "numerical" %}
        <section class="bg-white border rounded shadow-sm">
          <h5 class="text-light bg-secondary p-2 rounded-top mb-0">Aggregations</h5>
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between">
              <p class="m-0">Average</p>
              <p class="m-0">{{ column["average"] }}</p>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <p class="m-0">Standard deviation</p>
              <p class="m-0">{{ column["standard_deviation"] }}</p>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <p class="m-0">Highest value</p>
              <p class="m-0">{{ column["max"] }}</p>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <p class="m-0">Lowest value</p>
              <p class="m-0">{{ column["min"] }}</p>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <p class="m-0">Sum of values</p>
              <p class="m-0">{{ column["sum"] }}</p>
            </li>
          </ul>
        </section>
        {% endif %}
      </div>
    </article>
  {% endfor %}
  </section>
</main>

<!-- Script for masonry - allowing for easy display of variable sized grid elements -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" defer></script>
<script src="{{ url_for('static', filename='statscripts/quickstats.js') }}" defer></script>
{% endblock content %}
