{% extends "base.html" %}

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

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

{% block style %}

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

{% set conference_column_count = 8 %}
{% set accommodation_column_count = 8 %}
{% set travel_column_count = 10 %}
<style>
.conferences {
  display: grid;
  grid-template-columns: repeat({{ conference_column_count }}, auto); /* 7 columns for each piece of information */
  gap: 10px;
  justify-content: start;
}

.accommodation {
  display: grid;
  grid-template-columns: repeat({{ accommodation_column_count }}, auto);
  gap: 10px;
  justify-content: start;
}

.travel {
  display: grid;
  grid-template-columns: repeat({{ travel_column_count }}, auto);
  gap: 10px;
  justify-content: start;
}

.grid-item {
  /* Additional styling for grid items can go here */
}

        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>{{ items | count }} trips</p>
    {% for trip in items %}
      {% set distances_by_transport_type = trip.distances_by_transport_type() %}
      {% set total_distance = trip.total_distance() %}
      {% set end = trip.end %}
      <div class="border border-2 rounded mb-2 p-2">
        <h3>
        {{ trip_link(trip) }}
        <small class="text-muted">({{ display_date(trip.start) }})</small></h3>
        <ul class="list-unstyled">
        {% for c in trip.countries %}
          <li>
            {{ c.name }}
            {{ c.flag }}
          </li>
        {% endfor %}
        </ul>
        {% if end %}
          <div>Dates: {{ display_date_no_year(trip.start) }} to {{ display_date_no_year(end) }}</div>
        {% else %}
          <div>Start: {{ display_date_no_year(trip.start) }} (end date missing)</div>
        {% endif %}
        {% if total_distance %}
          <div>Total distance:
          {{ "{:,.0f} km / {:,.0f} miles".format(total_distance, total_distance / 1.60934) }}
          </div>
        {% endif %}

        {% if distances_by_transport_type %}
          {% for transport_type, distance in distances_by_transport_type %}
            <div>{{ transport_type | title }} distance:
              {{ "{:,.0f} km / {:,.0f} miles".format(distance, distance / 1.60934) }}
            </div>
          {% endfor %}
        {% endif %}

        {% for item in trip.conferences %}
          {% set country = get_country(item.country) if item.country else None %}
          <div class="card my-1">
            <div class="card-body">
              <h5 class="card-title">
                <a href="{{ item.url }}">{{ item.name }}</a>
                <small class="text-muted">
                  {{ display_date_no_year(item.start) }} to {{ display_date_no_year(item.end) }}
                </small>
              </h5>
              <p class="card-text">
                Topic: {{ item.topic }}
                | Venue: {{ item.venue }}
                | Location: {{ item.location }}
                {% if country %}
                  {{ country.flag }}
                {% elif item.online %}
                  💻 Online
                {% else %}
                  <span class="text-bg-danger p-2">
                    country code <strong>{{ item.country }}</strong> not found
                  </span>
                {% endif %}
                {% if item.free %}
                  | <span class="badge bg-success text-nowrap">free to attend</span>
                {% elif item.price and item.currency %}
                  | <span class="badge bg-info text-nowrap">price: {{ item.price }} {{ item.currency }}</span>
                {% endif %}
              </p>
            </div>
          </div>
        {% endfor %}

        {% set date_heading = None %}
        {% for day, elements in trip.elements_grouped_by_day() %}
            <h4>{{ display_date_no_year(day) }}</h4>
            {% for e in elements %}
              {% if e.element_type == "check-out" %}
                <div>{{ e.get_emoji() }} {{ e.title }} (check-out)</div>
              {% elif e.element_type == "check-in" %}
                <div>{{ e.get_emoji() }} {{ e.title }} (check-in)</div>
              {% else %}
                <div>
                  {{ e.get_emoji() }}
                  {{ display_time(e.when) }}
                  &mdash;
                  {{ e.title }}
                </div>
            {% endif %}
            {% endfor %}
        {% endfor %}

      </div>
    {% 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 %}