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

{% block content %}
<style>
li.collection-list-item {
  list-style: none;
  display: contents;

  a {
    background: #EEE;
    display: grid;
    margin: 12px;
    min-height: 80px;
    border-radius: 12px;
    grid-template-areas:
      ". color-chip"
      "title color-chip"
      "description color-chip"
      "subscription-url color-chip"
      "restore color-chip"
      ". color-chip";
    grid-template-rows: 12px auto auto auto 12px;
    grid-template-columns: auto 50px;
    color: inherit;
    text-decoration: none;
    padding-left: 12px;

    .title {
      grid-area: title;
    }

    .description {
      grid-area: description;
    }

    .subscription-url {
      grid-area: subscription-url;
    }

    .color-chip {
      background: var(--color);
      grid-area: color-chip;
      border-radius: 0 12px 12px 0;
    }

    .restore-form {
      grid-area: restore;
    }

    &:hover {
      background: #DDD;
    }
  }
}
</style>
<h1>Welcome {{ user_id }}!</h1>
  <form method="POST" action="/frontend/logout">
    <button type="submit">Log out</button>
  </form>

<h2>Calendars</h2>
<ul>
  {% for calendar in calendars %}
  {% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
  <li class="collection-list-item" style="--color: {{ color }}">
    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ 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>
      {% if let Some(subscription_url) = calendar.subscription_url %}
      <span class="subscription-url">{{ subscription_url }}</span>
      {% endif %}
      <div class="color-chip"></div>
    </a>
  </li>
  {% else %}
  You do not have any calendars yet
  {% endfor %}
</ul>
{%if !deleted_calendars.is_empty() %}
<h3>Deleted Calendars</h3>
<ul>
  {% for calendar in deleted_calendars %}
  {% let color = calendar.color.to_owned().unwrap_or("red".to_owned()) %}
  <li class="collection-list-item" style="--color: {{ color }}">
    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ 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>
      <form action="/frontend/user/{{ user_id }}/calendar/{{ calendar.id}}/restore" method="POST" class="restore-form">
        <button type="submit">Restore</button>
      </form>
      <div class="color-chip"></div>
    </a>
  </li>
  {% endfor %}
</ul>
{% endif %}

<h2>Addressbooks</h2>
<ul>
  {% for addressbook in addressbooks %}
  <li class="collection-list-item">
    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
      <span class="title">{{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}</span>
      <span class="description">
      {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
      </span>
    </a>
  </li>
  {% else %}
  You do not have any addressbooks yet
  {% endfor %}
</ul>
{%if !deleted_addressbooks.is_empty() %}
<h3>Deleted Addressbooks</h3>
<ul>
  {% for addressbook in deleted_addressbooks %}
  <li class="collection-list-item">
    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
      <span class="title">{{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}</span>
      <span class="description">
      {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
      </span>
      <form action="/frontend/user/{{ user_id }}/addressbook/{{ addressbook.id}}/restore" method="POST" class="restore-form">
        <button type="submit">Restore</button>
      </form>
    </a>
  </li>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}