{% extends "users/base.html" %}
{% from "users/includes/notification_macros.html" import notification_fxa_updated %}

{% set title = _('Edit Profile') %}
{% set classes = 'profile' %}
{% set active = 'edit-profile' %}
{% if not user_form.errors %}
 {% set crumbs = [((profile_url(user=profile.user), 'rel="nofollow"'), profile.user.username), (None, title)] %}
{% endif %}

{% block above_main %}
{% if fxa_messages %}
  {% for message in fxa_messages %}
    {% if message == 'fxa_notification_updated' %}
      {{ notification_fxa_updated() }}
    {% endif %}
  {% endfor %}
{% endif %}
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block content %}
<article id="edit-profile">
  {% if profile and profile.is_fxa_migrated and request.user == profile.user %}
    <h1 class="sumo-page-heading">{{ _('Your Account') }}</h1>
    <p class="mb-0"><strong>{{ user.email }}</strong></p>
    <p>
      {% trans a_open='<a href="https://support.mozilla.org/en-US/kb/change-primary-email-address-firefox-accounts">'|safe, a_close='</a>'|safe %}
        To change your email or avatar, visit the Mozilla accounts page. {{ a_open }} Learn more. {{ a_close }}
      {% endtrans %}
    </p>

    <div>
      <section class="avatar-group">
        <figure class="avatar-group--figure">
          <img class="avatar" src="{{ profile_avatar(profile.user) }}" alt="">
        </figure>
      </section>
    </div>

    <div class="sumo-button-wrap align-end">
      <a href="https://accounts.firefox.com/settings" target="_blank"
        class="sumo-button primary-button button-lg">{{ _('Manage account') }}</a>
    </div>

    <hr class="section-break" />
  {% endif %}

  <h2 class="sumo-callout-heading">{{ title }}</h2>
  <p>
    {% trans %}
    Share some things about yourself. Most fields are
    optional, but they help the community to get to know you better.
    {% endtrans %}
  </p>
  <form method="post" action="">
    {% csrf_token %}

    {{ field(user_form.username) }}
    {{ field(profile_form.name) }}
    {{ field(profile_form.bio) }}
    {% if profile_form.public_email %}
      {{ checkbox(profile_form.public_email) }}
    {% endif %}
    {{ field(profile_form.website) }}
    {{ field(profile_form.twitter) }}
    {{ field(profile_form.community_mozilla_org) }}
    {{ field(profile_form.people_mozilla_org) }}
    {{ field(profile_form.matrix_handle) }}
    {{ field(profile_form.country) }}
    {{ field(profile_form.city) }}
    {{ field(profile_form.timezone) }}
    {{ field(profile_form.locale) }}
    {{ field(profile_form.involved_from) }}

    <div class="sumo-button-wrap reverse-on-desktop">
      <button class="sumo-button primary-button" type="submit">{{ _('Update My Profile') }}</button>
      <button class="sumo-button secondary-button push-right" type="reset">{{ _('Cancel') }}</button>
    </div>
  </form>
  {% if request.user == profile.user %}
    <p class="delete-account-link">
      <a href="javascript:;" data-sumo-modal="delete-profile"
        class="warning-link mt-0">{{ _('Close account and delete all profile information') }}</a>
    </p>
  {% endif %}

  {% if request.user == profile.user %}
    <div class="mzp-u-modal-content kbox" title="{{ _('Are you sure') }}" id="delete-profile">
      <form method="post" action="{{ url('users.close_account') }}">
        {% csrf_token %}
        <p>
          {{ _('Deleting your account will prevent you from answering or posting questions in Mozilla Support. This action will clear your profile and cannot be undone.') }}
        </p>
        <p>
          {% trans confirmation_string=delete_account_confirmation %}Please type <strong>{{ confirmation_string }}</strong> to confirm.{% endtrans %}
        </p>
        <div class="field">
          <input id="delete-profile-confirmation-input" name="entered_confirmation" type="text">
          <input id="delete-profile-confirmation" name="expected_confirmation" type="hidden" value="{{ delete_account_confirmation }}">
        </div>
        <p>
          <button type="submit" id="delete-profile-button" class="sumo-button secondary-button button-lg warning-button"
            disabled>{{ _('Delete Your Account') }}</button>
        </p>
      </form>
    </div>
  {% endif %}

</article>
{% endblock %}