{% load i18n thumbnail phoxtail_design_tags %}
{# The profile's tiles: who the member is (and Edit), their details, how to reach them, their account (and its username). Redrawn after a save. #}
<div class="phx-card usr-tile usr-tile--identity">
    <div class="usr-avatar-section">
        {% if user.avatar %}
            {% thumbnail user.avatar "256x256" crop="center" as avatar %}
                <img class="usr-avatar" src="{{ avatar.url }}" alt="{{ user.get_full_name }}">
            {% endthumbnail %}
        {% else %}
            <div class="usr-avatar-initials">
                {{ user.first_name|default:""|slice:":1" }}{{ user.last_name|default:""|slice:":1" }}
            </div>
        {% endif %}
        <h2 class="usr-profile-name">{{ user.get_full_name }}</h2>
    </div>
    {% url 'users:profile_update_form' as profile_update_form_url %}
    <button type="button"
            class="phx-button phx-button--secondary phx-button--full usr-identity__edit"
            hx-get="{% url 'phoxtail_core:modal' %}"
            hx-vals='{"content_url": "{{ profile_update_form_url }}"}'
            hx-target="#core-modal-placeholder-wrapper"
            hx-swap="innerHTML">
        <span>{% translate "Edit" context "button" %}</span>
    </button>
</div>
<div class="phx-card usr-tile usr-tile--personal">
    <h3 class="phx-card__title">
        {% icon "person" %}
        {% translate "Personal" %}
    </h3>
    <dl class="usr-details">
        <div>
            <dt>{% translate "Date of birth" %}</dt>
            <dd>{{ user.born_at|date:"M j, Y"|default:"-" }}</dd>
        </div>
        <div>
            <dt>{% translate "Gender" %}</dt>
            <dd>{{ user.gender.name|default:"-" }}</dd>
        </div>
        <div>
            <dt>{% translate "Country" %}</dt>
            <dd>{{ user.country.name|default:"-" }}</dd>
        </div>
    </dl>
</div>
<div class="phx-card usr-tile usr-tile--contact">
    <h3 class="phx-card__title">
        {% icon "email" %}
        {% translate "Contact" %}
    </h3>
    <dl class="usr-details">
        <div>
            <dt>{% translate "Email" context "contact detail" %}</dt>
            <dd>{{ user.email }}</dd>
        </div>
        <div>
            <dt>{% translate "Phone number" %}</dt>
            <dd>{{ user.phone_number.as_international|default:"-" }}</dd>
        </div>
    </dl>
</div>
<div class="phx-card usr-tile usr-tile--account">
    <h3 class="phx-card__title">
        {% icon "lock" %}
        {% translate "Account" %}
    </h3>
    <dl class="usr-details">
        <div>
            <dt>{% translate "Member since" %}</dt>
            <dd>{{ user.created_at|date:"M j, Y" }}</dd>
        </div>
        <div>
            <dt>{% translate "Username" %}</dt>
            <dd>{{ user.username }}</dd>
        </div>
    </dl>
    <div class="usr-account">
        <a href="{% url 'account_change_password' %}" class="phx-button phx-button--secondary">
            <span>{% translate "Change password" %}</span>
        </a>
        <a href="{% url 'account_email' %}" class="phx-button phx-button--secondary">
            <span>{% translate "Manage email" %}</span>
        </a>
    </div>
</div>