{% extends "base.html" %}

{% block style %}
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 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>Conferences</h1>

  <p>
    <a href="{{ url_for("index") }}">&larr; back to agenda</a>
    |
    <a href="{{ url_for("travel_list") }}">travel</a>
    |
    <strong>conference</strong>
  </p>

  <div class="grid-container">
    {% for item in item_list %}
      {% if item == "today" %}
      {% set bg="bg-warning-subtle" %}
      <div class="grid-item text-end {{ bg }}">{{ today.strftime("%a, %d %b %Y") }}</div>
      <div class="{{ bg }}"></div>
      <div class="{{ bg }}">today</div>
      <div class="{{ bg }}"></div>
      <div class="{{ bg }}"></div>
      <div class="{{ bg }}"></div>
      {% else %}
      <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 }}</div>
      <div class="grid-item">{{ item.topic }}</div>
      <div class="grid-item">{{ item.location }}</div>
      <div class="grid-item"><a href="{{ item.url }}">{{ item.url }}</a></div>
      {% endif %}
    {% endfor %}
  </div>

</div>

{% endblock %}