{% extends "base.html" %}
{% from "components/ui.html" import card, credentials, empty, filter_bar with context %}
{% block title %}Accounts · {{ APP_NAME }}{% endblock %}
{% block heading %}Accounts{% endblock %}
{% block subheading %}<div class="sub">The mailboxes this service connects</div>{% endblock %}
{% block actions %}
{% if can_create %}<a class="btn primary" href="/ui/accounts/new">Connect an account</a>{% endif %}
{% endblock %}
{% block content %}
{% call card("Accounts", meta=accounts | length, tight=True) %}
<div class="body list-bar">{{ filter_bar(bar, problem) }}</div>
{% if accounts %}
<div class="table-scroll">
  <table>
    <thead><tr><th>Address</th><th>Provider</th><th>Status</th><th>Credentials</th></tr></thead>
    <tbody>
      {% for account in accounts %}
      <tr>
        <td class="name">
          <a href="/ui/accounts/{{ account.id }}">{{ account.email }}</a>
          <span class="sub">{{ account.display_name | or_missing }}</span>
        </td>
        <td>{{ account.provider.value }}</td>
        <td>{% include "partials/account_status.html" %}</td>
        <td><span class="sub">{{ credentials(account.credentials) }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{{ empty("No account matches." if bar.chips else "No account yet, or none you may see.") }}
{% endif %}
{% endcall %}
{% endblock %}