{% extends "base.html" %}

{% from "macros.html" import trip_link, display_date_no_year, display_date, display_datetime, display_time, format_distance, trip_item with context %}

{% block title %}{{ heading }} - Edward Betts{% endblock %}

{% block style %}

 <link rel="stylesheet" href="{{ url_for("static", filename="leaflet/leaflet.css") }}">

<style>
  body, html {
      height: 100%;
      margin: 0;
  }
  .container-fluid {
      height: calc(100% - 56px); /* Subtracting the height of the navbar */
  }
  .text-content {
      overflow-y: scroll;
      height: 100%;
  }
  .map-container {
      position: sticky;
      top: 56px; /* Adjust to be below the navbar */
      height: calc(100vh - 56px); /* Subtracting the height of the navbar */
  }
  #map {
      height: 100%;
  }

  @media (max-width: 767.98px) {
      .container-fluid {
          display: block;
          height: auto;
      }
      .map-container {
          position: relative;
          top: 0;
          height: 50vh; /* Adjust as needed */
      }
      .text-content {
          height: auto;
          overflow-y: auto;
      }
  }
</style>
{% endblock %}

{% macro section(heading, item_list) %}
  {% if item_list %}
    {% set items = item_list | list %}
    <div class="heading"><h2>{{ heading }}</h2></div>
    <p><a href="{{ url_for("trip_stats") }}">Trip statistics</a></p>
    <p>{{ items | count }} trips</p>

    <div>Total distance: {{ format_distance(total_distance) }}</div>

    {% for transport_type, distance in distances_by_transport_type %}
      <div>
        {{ transport_type | title }}
        distance: {{format_distance(distance) }}
      </div>
    {% endfor %}

    {% for trip in items %}
      {{ trip_item(trip) }}
    {% endfor %}
  {% endif %}
{% endmacro %}


{% block content %}
<div class="container-fluid d-flex flex-column flex-md-row">
  <div class="map-container col-12 col-md-6 order-1 order-md-2">
    <div id="map" class="map"></div>
  </div>
  <div class="text-content col-12 col-md-6 order-2 order-md-1 pe-3">
    {{ section(heading, trips) }}
  </div>
</div>
{% endblock %}

{% block scripts %}

<script src="{{ url_for("static", filename="leaflet/leaflet.js") }}"></script>

<script src="{{ url_for("static", filename="leaflet-geodesic/leaflet.geodesic.umd.min.js") }}"></script>
<script src="{{ url_for("static", filename="js/map.js") }}"></script>

<script>
var coordinates = {{ coordinates | tojson }};
var routes = {{ routes | tojson }};

build_map("map", coordinates, routes);

</script>
{% endblock %}