{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <title>{{ display_name }} &mdash; profile</title>
{%- endblock %}

{% block content %}
<section class="one-column profile-page">

  <div class="profile-card well">
    <div class="profile-card-header">
      <img class="profile-avatar" src="{{ gravatar_url }}" alt="" width="80" height="80" loading="lazy" />
      <div class="profile-identity">
        <h1 class="type-title">{{ display_name }}</h1>
        <p class="profile-handle">@{{ handle }}</p>
        {% if member_since_human %}<p class="profile-meta">Member since {{ member_since_human }}</p>{% endif %}
        <p class="profile-meta">{{ shop_count }} shop{{ '' if shop_count == 1 else 's' }}</p>
      </div>
    </div>

    {% if email %}
      {# Email is never shown by default — the viewer must opt to reveal it.
         <details> works with no JS. The server only sends `email` when the
         viewer is allowed to see it (self, or a shop operator viewing in
         that shop's context with prior transaction history). #}
      <details class="profile-email-reveal">
        <summary>Show email address</summary>
        <p class="profile-email"><a href="mailto:{{ email }}">{{ email }}</a></p>
        {% if not is_self and shop_context %}
          <p class="profile-meta">Visible to you as an operator of {{ shop_context.name }}.</p>
        {% endif %}
      </details>
    {% elif shop_context and viewer_is_shop_editor and not profile_has_shop_history %}
      <p class="profile-meta">This person hasn't transacted with {{ shop_context.name }} &mdash; their email isn't available here.</p>
    {% endif %}

    {% if shop_context and viewer_is_shop_editor and profile_has_shop_history %}
      <p class="profile-meta">
        With {{ shop_context.name }}:
        {{ shop_offer_count }} offer{{ '' if shop_offer_count == 1 else 's' }},
        {{ shop_invoice_count }} purchase{{ '' if shop_invoice_count == 1 else 's' }}.
      </p>
    {% endif %}
  </div>

  {% if public_shops %}
  <div class="profile-shops well">
    <h2 class="type-title">Shops</h2>
    <ul class="profile-shop-list">
      {% for s in public_shops %}
        <li><a href="/s/{{ s.id }}/{{ s.slug }}">{{ s.name }}</a></li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

</section>
{% endblock %}
