72 lines
1.8 KiB
HTML
72 lines
1.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block style %}
|
|
{% set column_count = 7 %}
|
|
<style>
|
|
.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 */
|
|
}
|
|
|
|
.heading {
|
|
grid-column: 1 / {{ column_count + 1 }}; /* Spans from the 1st line to the 7th line */
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% macro row(item, badge) %}
|
|
{% set country = get_country(item.country) %}
|
|
{% set nights = (item.to.date() - item.from.date()).days %}
|
|
<div class="grid-item text-end">{{ item.from.strftime("%a, %d %b %Y") }}</div>
|
|
<div class="grid-item text-end">{{ item.to.strftime("%a, %d %b") }}</div>
|
|
<div class="grid-item text-end">{% if nights == 1 %}1 night{% else %}{{ nights }} nights{% endif %}</div>
|
|
<div class="grid-item">{{ item.operator }}</div>
|
|
<div class="grid-item">{{ item.location }}</div>
|
|
<div class="grid-item">
|
|
{% if country %}
|
|
{{ country.flag }} {{ country.name }}
|
|
{% else %}
|
|
<span class="text-bg-danger p-2">
|
|
country code <strong>{{ item.country }}</strong> not found
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="grid-item">
|
|
{% if item.url %}
|
|
<a href="{{ item.url }}">{{ item.name }}</a>
|
|
{% else %}
|
|
{{ item.name }}
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro section(heading, item_list, badge) %}
|
|
{% if item_list %}
|
|
<div class="heading"><h2>{{heading}}</h2></div>
|
|
{% for item in item_list %}{{ row(item, badge) }}{% endfor %}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid mt-2">
|
|
|
|
<h1>Accommodation</h1>
|
|
|
|
<ul>
|
|
<li>Total nights away in 2024: {{ total_nights_2024 }}</li>
|
|
<li>Total nights abroad in 2024: {{ nights_abroad_2024 }}</li>
|
|
</ul>
|
|
|
|
<div class="grid-container">
|
|
{{ section("Accommodation", items) }}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|