{% extends "base.html" %}
{% from "macros.html" import flight_row, train_row with context %}

{% block style %}
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(7, auto); /* 7 columns for each piece of information */
  gap: 10px;
  justify-content: start;
}

.train-grid-container {
  display: grid;
  grid-template-columns: repeat(7, auto); /* 7 columns for each piece of information */
  gap: 10px;
  justify-content: start;
}

.grid-item {
  /* Additional styling for grid items can go here */
}
</style>
{% endblock %}

{% block content %}

<div class="container-fluid mt-2">

  <h1>Travel</h1>

  <h3>flights</h3>

  <div class="grid-container">
      <div class="grid-item text-end">date</div>
      <div class="grid-item">route</div>
      <div class="grid-item">take-off</div>
      <div class="grid-item">land</div>
      <div class="grid-item">duration</div>
      <div class="grid-item">flight</div>
      <div class="grid-item">reference</div>

    {% for item in flights | sort(attribute="depart") %}
      {{ flight_row(item) }}
    {% endfor %}
  </div>

  <h3 class="mt-4">trains</h3>

  <div class="train-grid-container">
      <div class="grid-item text-end">date</div>
      <div class="grid-item">route</div>
      <div class="grid-item">depart</div>
      <div class="grid-item">arrive</div>
      <div class="grid-item">duration</div>
      <div class="grid-item">operator</div>
      <div class="grid-item">reference</div>

    {% for item in trains | sort(attribute="depart") %}
      {{ train_row(item) }}
    {% endfor %}
  </div>

</div>

{% endblock %}