rustical/crates/frontend/public/templates/pages/user.html

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

{% block imports %}
{% endblock %}

{% block content %}
<style>
li.collection-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>
<h1>Welcome {{ user_id }}!</h1>

<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/{{ user_id }}/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>
      <div class="color-chip"></div>
    </a>
  </li>
  {% 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/{{ user_id }}/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>
      <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/{{ user_id }}/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>
  {% 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/{{ user_id }}/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>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}