{% extends 'base.html.twig' %}
{% block body %}
    <div class="col-md-12 col-lg-12 col-xl-12">
      <div class="card-shadow-primary profile-responsive card-border mb-3 card">
          <div class="dropdown-menu-header">
              <div class="dropdown-menu-header-inner bg-focus">
                  <div class="menu-header-image opacity-3" style="background-image: url('images/dropdown-header/city4.jpg');"></div>
                  <div class="menu-header-content btn-pane-right">
                      <div class="avatar-icon-wrapper me-2 avatar-icon-xl">
                          <div class="avatar-icon rounded">
                              {% if app.user.profilePicture %}
                                  <img src="/uploads/profile_pictures/{{ app.user.profilePicture }}"/>
                              {% else %}
                                  <img src="/images/avatars/user.png"/>
                              {% endif %} 
                          </div>
                      </div>
                      <div>
                          <h5 class="menu-header-title">{{ app.user.firstname ~ ' ' ~ app.user.lastname }}</h5>
                          <h6 class="menu-header-subtitle">Vous êtes actuellement sur le plan d'accès 
                            <b>
                              {{ lastsubscription is not null ? lastsubscription.getSubscription().getName() : 'Gratuit'}} 
                              {{ lastsubscription is not null ? lastsubscription.getSubscriptionType() : '' }}
                            </b>
                          </h6>
                      </div>
                      <div class="menu-header-btn-pane">
                          <button class="ladda-button btn btn-pill btn-dark" data-style="slide-right">
                              <a href="{{ path('app_account_upgrade') }}"  class="ladda-label text-white">Changer de plan</a>
                              <span class="ladda-spinner"></span>
                          </button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8 main-card mb-3 card">
    <div class="card-body">
      {% for message in app.flashes('error') %}
        <div class="alert alert-error">{{ message }}</div>
      {% endfor %}
      <h3 class="mt-3 mb-3">Mis à jour mon profil</h3>
      {{ form_start(form) }}
          <div class="position-relative row mb-3">
              <label for="firstname" class="form-label col-sm-2 col-form-label">{{ field_label(form.firstname) }}</label>
              <div class="col-sm-10 position-relative">
                    {{ form_widget(form.firstname) }}
              </div>
          </div>
          <div class="position-relative row mb-3">
              <label for="lastname" class="form-label col-sm-2 col-form-label">{{ field_label(form.lastname) }}</label>
              <div class="col-sm-10">
                    {{ form_widget(form.lastname) }}
              </div>
          </div>
          
          <div class="position-relative row mb-3">
              <label for="profile_picture" class="form-label col-sm-2 col-form-label">{{ field_label(form.profile_picture) }}</label>
              
              <div class="col-sm-10">
                    {% if app.user.profilePicture %}
                <img src="/uploads/profile_pictures/{{ app.user.profilePicture }}" width="50" />
              {% endif %}            
                    {{ form_widget(form.profile_picture) }}
              </div>
          </div>
          <div class="position-relative row mb-3">
            <label for="currentPassword" class="form-label col-sm-2 col-form-label">{{ field_label(form.currentPassword) }}</label>
            <div class="col-sm-10">
                  {{ form_widget(form.currentPassword) }}
            </div>
          </div>
          <div class="position-relative row mb-3">
              <label for="newPassword" class="form-label col-sm-2 col-form-label">{{ field_label(form.newPassword) }}</label>
              <div class="col-sm-10">
                    {{ form_widget(form.newPassword) }}
              </div>
          </div>           
          <button class="mt-2 btn btn-primary px-5">{{ button_label|default('Mettre à jour') }}</button>
      {{ form_end(form) }} 
    </div>
  </div>
  <div class="col-md-2"></div>
  </div>
  
{% endblock %}