{% extends "base.html" %}

{% block style %}
{% set column_count = 7 %}
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat({{ column_count }}, auto); /* 7 columns for each piece of information */
  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) if item.country else None %}
<div class="grid-item text-end">{{ item.start.strftime("%a, %d %b %Y") }}</div>
<div class="grid-item text-end">{{ item.end.strftime("%a, %d %b") }}</div>
<div class="grid-item">{{ item.name }}
  {% if item.going and not (item.accommodation_booked or item.travel_booked) %}
    <span class="badge text-bg-primary">
      {{ badge }}
    </span>
  {% endif %}
  {% if item.accommodation_booked %}
    <span class="badge text-bg-success">accommodation</span>
  {% endif %}
  {% if item.transport_booked %}
    <span class="badge text-bg-success">transport</span>
  {% endif %}
</div>
<div class="grid-item">{{ item.topic }}</div>
<div class="grid-item">{{ item.location }}</div>
<div class="grid-item">
  {% if country %}
    {{ country.flag }} {{ country.name }}
  {% elif item.online %}
    💻 Online
  {% else %}
    <span class="text-bg-danger p-2">
      country code <strong>{{ item.country }}</strong> not found
    </span>
  {% endif %}
</div>
<div class="grid-item"><a href="{{ item.url }}">{{ item.url }}</a></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>Conferences</h1>

  <div class="grid-container">
    {{ section("Current", current, "attending") }}
    {{ section("Future", future, "going") }}
    {{ section("Past", past|reverse, "went") }}
  </div>
</div>

{% endblock %}