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

{% block content %}
<div id="page-user">

<h1>Welcome {{ user.id }}!</h1>

<section>
  <h2>Profile</h2>

  <form>
    <label for="user_displayname">Displayname</label>
    <input type="text" value="{{ user.displayname.clone().unwrap_or(String::new()) }}" id="user_displayname" />
  </form>

  <h3>Groups</h3>

  <ul>
    {% for group in user.memberships %}
      <li>{{ group }}</li>
    {% endfor %}
  </ul>

  <h3>App tokens</h3>

  <table>
    <tr>
      <th>Name</th>
      <th>Created at</th>
      <th></th>
    </tr>
    {% for app_token in user.app_tokens %}
    <tr>
      <td>{{ app_token.name }}</td>
      <td>
        {% if let Some(created_at) = app_token.created_at %}
          {{ created_at.to_rfc3339() }}
        {% endif %}
      </td>
      <td>
        <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
          <button type="submit" class="delete">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
    <tr>
        <td>
          <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
            <label class="font_bold" for="generate_app_token_name">App name</label>
            <input type="text" name="name" id="generate_app_token_name" />
          </form>
        </td>
        <td></td>
        <td>
          <button type="submit" form="form_generate_app_token">Generate</button>
        </td>
    </tr>
  </table>
</section>

<section>
<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/{{ calendar.principal }}/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 %}
</section>

<section>
<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/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}/restore" method="POST" class="restore-form">
        <button type="submit">Restore</button>
      </form>
    </a>
  </li>
  {% endfor %}
</ul>
{% endif %}
</section>
{% endblock %}