{% extends "piggyback/base.html" %}

{% block title %}Recipients{% endblock %}

{% block content %}
<div class="pb-container pb-page-header">
  <h1>Address Book</h1>
  <p>Manage recipients for your cards. Your account details are synced automatically.</p>
</div>

<div class="pb-container">
  {% if system_user_details.full_name or system_user_details.email %}
  <div class="pb-recipient-card" style="border-color: var(--pb-primary); margin-bottom: 24px;">
    <div class="pb-recipient-card__avatar">Me</div>
    <div class="pb-recipient-card__info">
      <h3>{{ system_user_details.full_name|default:"Your profile" }}</h3>
      <p>
        {% if system_user_details.email %}{{ system_user_details.email }}{% endif %}
        {% if system_user_details.city %} · {{ system_user_details.city }}{% endif %}
      </p>
      <span class="pb-badge">Synced from your account</span>
    </div>
  </div>
  {% endif %}

  {% include "piggyback/partials/recipients_panel.html" %}
</div>
{% endblock %}