{% extends "base.html" %} {% from "macros.html" import flight_booking_row, train_row with context %} {% block title %}Travel - Edward Betts{% endblock %} {% set flight_column_count = 10 %} {% set column_count = 10 %} {% block style %} <style> .grid-container { display: grid; grid-template-columns: repeat({{ flight_column_count }}, auto); gap: 10px; justify-content: start; } .train-grid-container { display: grid; grid-template-columns: repeat({{ column_count }}, auto); 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">reference</div> <div class="grid-item">price</div> <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">tracking</div> <div class="grid-item">distance</div> {% for item in flights %} {{ flight_booking_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> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> {% for item in trains | sort(attribute="depart") %} {{ train_row(item) }} {% endfor %} </div> </div> {% endblock %}