{% extends "base.html" %}
{% from "macros.html" import accommodation_row with context %}
{% 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 section(heading, item_list, badge) %}
{% if item_list %}
<div class="heading"><h2>{{heading}}</h2></div>
{% for item in item_list %}{{ accommodation_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 %}