{% extends "authentic2/accounts_edit.html" %}
{% load gadjo i18n %}

{% block extra-body-class %}profile-photo-edit{% endblock %}

{% block form-title %}
<h1>Modifier ma photo de profil</h1>
{% endblock %}

{% block content %}
  <form enctype="multipart/form-data" method="post">
    {% csrf_token %}

<p class="info">
Télécharger une {% if user.attributes.photo.url %}nouvelle{% endif %} image en cliquant sur le disque.
<br><em>format .jpg ou .png</em>
</p>

<div class="profile-photo">
  <div><img height="200" src="{{ user.attributes.photo.url }}" alt=""></div>
</div>

<div id="photo-form" class="pk-mark-optional-fields">
{{ form.as_p }}
</div>

    {% if form.instance and form.instance.id %}
      <button class="submit-button">Retour</button>
      {% if user.attributes.photo.url %}
        <button class="delete-button">{% trans "Delete" %}</button>
      {% else %}
        <button class="cancel-button" name="cancel" formnovalidate>{% trans "Cancel" %}</button>
      {% endif %}
    {% endif %}
  </form>

<script>
$(function() {
  $('.profile-photo > div').on('click', function() {
    $('#photo-form input[type=file]').trigger('click');
    $('#photo-form input[type=file]').on('change', function() {
      $('button.submit-button').click();
    });
  });
  $('button.delete-button').on('click', function() {
    $('#photo-form input[type=file]').val('');
    $('#photo-form input[type=checkbox]').prop('checked', 'checked');
  });
});
</script>
{% endblock %}
