{% extends "base.html" %}

{% from "macros.html" import trip_link, display_date_no_year, display_date, conference_row, accommodation_row, flight_row, train_row with context %}

{% set row = { "flight": flight_row, "train": train_row } %}

{% block style %}

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

{% set conference_column_count = 7 %}
{% set accommodation_column_count = 7 %}
{% set travel_column_count = 8 %}
<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 */
}

.map {
  height: 80vh;
}



</style>
{% endblock %}


{% block content %}
<div class="p-2">

  <h1>Trips</h1>
  <p>{{ future | count }} trips</p>
  {% for trip in future %}
    {% set end = trip.end %}
    <div>
      {{ display_date_no_year(trip.start) }} to {{ display_date_no_year(end) }}:
      {{ trip.title }} &mdash; {{ trip.locations_str }}
    </div>
  {% endfor %}


</div>
{% endblock %}