rustical/crates/frontend/public/templates/components/addressbooks_section.html

<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">
          {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
          {{ 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>
          <delete-button trash
            href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
        </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">
          {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
          {{ 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>
          <delete-button href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
        </div>
      </a>
    </li>
    {% endfor %}
  </ul>
  {% endif %}

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

</section>