{% extends "layouts/default.html" %}

{% block imports %}
{% endblock %}

{% block content %}
<style>
li.calendar-list-item {
  list-style: none;
  display: grid;
  margin: 12px;
  min-height: 80px;
  background: #EEE;
  padding: 8px;
  border-radius: 12px;
  grid-template-areas:
    "title color-chip"
    "description color-chip";
  grid-template-rows: auto auto;
  grid-template-columns: auto 50px;
  padding: 0;

  a {
    display: contents;

    .color-chip {
      background: var(--color);
      grid-area: color-chip;
      border-radius: 0 12px 12px 0;
    }
  }
}
</style>
<h2>Welcome {{ user_id }}!</h2>
<ul>
  {% for calendar in calendars %}
  {% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
  <li class="calendar-list-item" style="--color: {{ color }}">
    <a href="/frontend/user/{{ user_id }}/{{ calendar.id}}">
      <span class="title">{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}</span>
      <span class="description">
      {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
      </span>
      <div class="color-chip"></div>
    </a>
  </li>
  {% endfor %}
</ul>
{% endblock %}