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

{% block imports %}
<script type="module" src="/frontend/assets/js/create-calendar-form.mjs" async></script>
<script type="module" src="/frontend/assets/js/create-addressbook-form.mjs" async></script>
{% endblock %}

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

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

<section>
  <h2>Profile</h2>

  <h3>Groups</h3>
  <ul>
    {% for group in user.memberships() %}
      <li>{{ group }}</li>
    {% endfor %}
  </ul>

  <h3>App tokens</h3>
  <table id="app-tokens">
    <tr>
      <th>Name</th>
      <th>Created at</th>
      <th></th>
    </tr>
    {% for app_token in app_tokens %}
    <tr>
      <td>{{ app_token.name }}</td>
      <td>
        {% if let Some(created_at) = app_token.created_at %}
          {{ chrono_humanize::HumanTime::from(created_at.to_owned()) }}
        {% 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 class="generate">
        <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>
          {% if is_apple %}
          <button type="submit" form="form_generate_app_token" name="apple" value="true">Apple Configuration Profile (contains token)</button>
          {% endif %}
        </td>
    </tr>
  </table>
  {% if let Some(hostname) = davx5_hostname %}
  <a href="intent://{{ hostname | urlencode }}#Intent;action=android.intent.action.VIEW;component=at.bitfire.davdroid.ui.setup.LoginActivity;scheme=davx5;package=at.bitfire.davdroid;S.loginFlow=1;end">Configure in DAVx5</a>
  {% endif %}
</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>
      <div class="comps">
        {% for comp in calendar.components %}
        <span>{{ comp }}</span>
        {% endfor %}
      </div>
      <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="actions">
        <form action="/caldav/principal/{{ calendar.principal }}/calendar/{{ calendar.id }}" target="_blank" method="GET">
          <button type="submit">Download</button>
        </form>
      </div>
      <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>
      <div class="comps">
        {% for comp in calendar.components %}
        <span>{{ comp }}</span>
        {% endfor %}
      </div>
      <span class="description">
      {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
      </span>
      <div class="actions">
        <form action="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}/restore" method="POST" class="restore-form">
          <button type="submit">Restore</button>
        </form>
      </div>
      <div class="color-chip"></div>
    </a>
  </li>
  {% endfor %}
</ul>
{% endif %}
<create-calendar-form user="{{ user.id }}"></create-calendar-form>

</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>
      <div class="actions">
        <form action="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}" target="_blank" method="GET">
          <button type="submit">Download</button>
        </form>
      </div>
    </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>
      <div class="actions">
        <form action="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}/restore" method="POST" class="restore-form">
          <button type="submit">Restore</button>
        </form>
      </div>
    </a>
  </li>
  {% endfor %}
</ul>
{% endif %}

<create-addressbook-form user="{{ user.id }}"></create-addressbook-form>

</section>
{% endblock %}