{% load combo %}
<section class="mes-informations">
<span></span> {# to avoid :first-child #}
<h2>Mes informations</h2>

<span</span>
<div id="completion-bar">
  <div></div>
</div>

<p class="completion-info">Votre compte est complet à <span id="percentage">...</span>%</p>


<script>
$(function() {
  var count = 0;
  var filled = 0;
  $('.mes-informations .form-field input').each(function() {
    count += 1;
    if ($(this).val()) filled += 1;
  });
  if (count == 6) { /* no extended attributes at all */
    count += 10;  /* give us room, this will make the first completed extra attribute quite significant */
  }
  $('#percentage').text(Math.floor(100 * filled / count));
  $('#completion-bar > div').css('width', Math.floor(100 * filled / count) + '%');
});
</script>


<div class="form-group civility">
<div class="form-label"><label>Civilité</label></div>
<div class="form-field">
<input value="{{ json.title|default:"" }}" readonly>
</div>
</div>

<div class="form-group first-name">
<div class="form-label"><label>Prénom</label></div>
<div class="form-field">
<input value="{{ json.first_name }}" readonly>
</div>
</div>

<div class="form-group last-name">
<div class="form-label"><label>Nom</label></div>
<div class="form-field">
<input value="{{ json.last_name }}" readonly>
</div>
</div>

<div class="form-group last-birth-name">
<div class="form-label"><label>Nom de naissance</label></div>
<div class="form-field">
<input value="{{ json.nom_de_naissance|default:"" }}" readonly>
</div>
</div>

<div class="form-group birthdate">
<div class="form-label"><label>Date de naissance</label></div>
<div class="form-field">
{% if json.birthdate %}
<input value="{{ json.birthdate|default:""|parse_date|date:"d/m/Y"|default:json.birthdate }}" readonly>
{% else %}
<input readonly>
{% endif %}
</div>
</div>

<div class="form-group birthdate">
<div class="form-label"><label>Ville de naissance</label></div>
<div class="form-field">
<input value="{{ json.birthplace|default:"" }}" readonly>
</div>
</div>

<div class="form-group email">
<div class="form-label"><label>Adresse de courriel</label></div>
<div class="form-field">
<input value="{{ json.email }}" readonly>
</div>
</div>

<div class="actions">
  <button class="btn-square--bordered--core" data-href="{{idp_url}}accounts/edit/informations/"><span class="flexbox"><span class="btn-text">Modifier mes informations</span><span class="btn-arrow"></span></span></button>
  <button class="btn-square--bordered--core" data-href="{{idp_url}}accounts/change-email/"><span class="flexbox"><span class="btn-text">Modifier mon adresse de courriel</span><span class="btn-arrow"></span></span></button>
  <button class="btn-square--bordered--core" data-href="{{idp_url}}accounts/password/change/"><span class="flexbox"><span class="btn-text">Modifier mon mot de passe</span><span class="btn-arrow"></span></span></button>
</div>

<h2>Mes coordonnées</h2>
<span></span> {# to avoid h2 + div style #}

{% if json.address or json.zipcode or json.city or json.country or json.phone or json.mobile %}

<div class="form-group address">
<div class="form-label"><label>Adresse</label></div>
<div class="form-field">
<input value="{{ json.address|default:"" }}" readonly>
</div>
</div>

<div class="form-group">
<div class="form-label"><label>Code postal</label></div>
<div class="form-field">
<input value="{{ json.zipcode|default:"" }}" readonly>
</div>
</div>

<div class="form-group">
<div class="form-label"><label>Ville</label></div>
<div class="form-field">
<input value="{{ json.city|default:"" }}" readonly>
</div>
</div>

<div class="form-group">
<div class="form-label"><label>Pays</label></div>
<div class="form-field">
<input value="{{ json.country|default:"" }}" readonly>
</div>
</div>

<div class="form-group address">
<div class="form-label"><label>Complément d’adresse</label></div>
<div class="form-field">
<input value="{{ json.complement_adresse|default:"" }}" readonly>
</div>
</div>

<div class="form-group phone">
<div class="form-label"><label>Téléphone fixe</label></div>
<div class="form-field">
<input value="{{ json.phone|default:"" }}" readonly>
</div>
</div>

<div class="form-group mobile">
<div class="form-label"><label>Téléphone mobile</label></div>
<div class="form-field">
<input value="{{ json.mobile|default:"" }}" readonly>
</div>
</div>

{% else %}
<p>Complétez vos coordonnées afin de faciliter la saisie de vos démarches en ligne.</p>
{% endif %}

<div class="actions">
  <button class="btn-square--bordered--core" data-href="{{idp_url}}accounts/edit/coordonnees/"><span class="flexbox"><span class="btn-text">Modifier mes coordonnées</span><span class="btn-arrow"></span></span></button>
</div>

<h2>Ma photo de profil</h2>
<span></span> {# to avoid h2 + div style #}

<div class="profile-photo">
{% if json.photo %}
<div><img src="{{ json.photo }}" alt=""></div>
{% endif %}
</div>

<div class="actions">
        <button class="btn-square--bordered--core" data-href="{{idp_url}}accounts/edit/photo/"><span class="flexbox"><span class="btn-text">{% if json.photo %}Modifier ma photo{% else %}Ajouter ma photo{% endif %}</span><span class="btn-arrow"></span></span></button>
</div>


</section>
