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

{% 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>
</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="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>
      <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>
  <h3>Create calendar</h3>
  <form action="/frontend/user/{{ user.id }}/calendar" method="POST">
    <label>
      href
      <input type="text" name="id" />
    </label>
    <br>
    <label>
      Displayname
      <input type="text" name="displayname" />
    </label>
    <br>
    <label>
      Description
      <input type="text" name="description" />
    </label>
    <br>
    <label>
      Color
      <input type="color" name="color" />
    </label>
    <br>
    <label>
      Subscription URL
      <input type="text" name="subscription_url" />
    </label>
    <br>
    <label>
      Support VEVENT
      <input type="checkbox" name="comp_event" checked />
    </label>
    <label>
      Support VTODO
      <input type="checkbox" name="comp_todo" checked />
    </label>
    <label>
      Support VJOURNAL
      <input type="checkbox" name="comp_journal" />
    </label>
    <br>
    <button type="submit">Create</button>
  </form>
</section>

</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>
  <h3>Create addressbook</h3>
  <form action="/frontend/user/{{ user.id }}/addressbook" method="POST">
    <label>
      href
      <input type="text" name="id" />
    </label>
    <br>
    <label>
      Displayname
      <input type="text" name="displayname" />
    </label>
    <br>
    <label>
      Description
      <input type="text" name="description" />
    </label>
    <br>
    <button type="submit">Create</button>
  </form>
</section>

</section>
{% endblock %}