{% extends "base.html" %}

{% from "macros.html" import trip_link, display_date_no_year, display_date, display_datetime, display_time, format_distance 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 flag(trip, flag) %}{% if trip.show_flags %}{{ flag }}{% endif %}{% endmacro %}

{% 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 %}
      {% 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) }}
          {% if g.user.is_authenticated and trip.start <= today %}
            <a href="https://photos.4angle.com/search?query=%7B%22takenAfter%22%3A%22{{trip.start}}T00%3A00%3A00.000Z%22%2C%22takenBefore%22%3A%22{{end}}T23%3A59%3A59.999Z%22%7D">photos</a>
          {% endif %}
          </div>
        {% else %}
          <div>Start: {{ display_date_no_year(trip.start) }} (end date missing)</div>
        {% endif %}
        {% if total_distance %}
          <div>
            Total distance:
            {{ format_distance(total_distance) }}
          </div>
        {% endif %}

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

        {{ conference_list(trip) }}

        {% for day, elements in trip.elements_grouped_by_day() %}
          <h4>{{ display_date_no_year(day) }}
            {% if g.user.is_authenticated and day <= today %}
              <span class="lead">
                <a href="https://photos.4angle.com/search?query=%7B%22takenAfter%22%3A%22{{day}}T00%3A00%3A00.000Z%22%2C%22takenBefore%22%3A%22{{day}}T23%3A59%3A59.999Z%22%7D">photos</a>
              </span>
            {% endif %}
          </h4>
            {% set accommodation_label = {"check-in": "check-in from", "check-out": "check-out by"} %}
            {% for e in elements %}
              {% if e.element_type in accommodation_label %}
                {% set c = get_country(e.detail.country) %}
                <div>
                  {{ e.get_emoji() }} {{ e.title }} {{ flag(trip, c.flag) }}
                  ({{ accommodation_label[e.element_type] }} {{ display_time(e.start_time) }})
                </div>
              {% else %}
                <div>
                  {{ e.get_emoji() }}
                  {{ display_time(e.start_time) }}
                  &ndash;
                  {{ e.start_loc }} {{ flag(trip, e.start_country.flag) }}
                  →
                  {{ display_time(e.end_time) }}
                  &ndash;
                  {{ e.end_loc }} {{ flag(trip, e.end_country.flag) }}
                  {% if e.element_type == "flight" %}
                    {% set full_flight_number = e.detail.airline + e.detail.flight_number %}
                    {% set radarbox_url = "https://www.radarbox.com/data/flights/" + full_flight_number %}
                    <span class="text-nowrap"><strong>airline:</strong> {{ e.detail.airline_name }}</span>
                    <span class="text-nowrap"><strong>flight number:</strong> {{ e.detail.airline }}{{ e.detail.flight_number }}</span>
                    {% if e.detail.duration %}
                      <span class="text-nowrap"><strong>duration:</strong> {{ e.detail.duration }}</span>
                    {% endif %}
                    {# <pre>{{ e.detail | pprint }}</pre> #}
                  {% endif %}
                  {% if e.detail.distance %}
                    <span class="text-nowrap"><strong>distance:</strong> {{ format_distance(e.detail.distance) }}</span>
                  {% endif %}
                  {% if e.element_type == "flight" %}
                    <a href="https://www.flightradar24.com/data/flights/{{ full_flight_number | lower }}">flightradar24</a>
                    | <a href="https://uk.flightaware.com/live/flight/{{ full_flight_number | replace("U2", "EZY") }}">FlightAware</a>
                    | <a href="{{ radarbox_url }}">radarbox</a>
                  {% endif %}
                </div>
            {% endif %}
            {% endfor %}
        {% endfor %}

      </div>
    {% endfor %}
  {% endif %}
{% endmacro %}

{% macro conference_list(trip) %}
  {% 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 %}


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