{% extends 'base.html.twig' %}
{% block title %}Edit Profile{% endblock %}
{% block body %}
  <h1 class="h4 mb-3">Edit profile</h1>
  {% for msg in app.flashes('success') %}
    <div class="alert alert-success">{{ msg }}</div>
  {% endfor %}

  {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
    <div class="row g-4">
      <div class="col-lg-5">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">Profile details</h2>
            <div class="text-center mb-3">
              {% if profileImage %}
                <img src="{{ profileImage }}" alt="Profile picture" class="rounded-circle border mb-3" width="160" height="160" style="object-fit: cover;">
              {% else %}
                <div class="rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center mb-3" style="width:160px;height:160px;">
                  <span class="fs-3">{{ (app.user.displayName ?? app.user.userIdentifier)|slice(0,1)|upper }}</span>
                </div>
              {% endif %}
              <p class="text-secondary small mb-0">Images up to 4MB. JPG or PNG recommended.</p>
            </div>
            <div class="mb-3">
              {{ form_label(form.profileImage, null, {label_attr: {class: 'form-label'}}) }}
              {{ form_widget(form.profileImage, {attr: {class: 'form-control'}}) }}
              {{ form_errors(form.profileImage) }}
            </div>
            <div class="mb-3">
              {{ form_label(form.displayName, null, {label_attr: {class: 'form-label'}}) }}
              {{ form_widget(form.displayName, {attr: {class: 'form-control'}}) }}
              {{ form_errors(form.displayName) }}
            </div>
            <div class="mb-0">
              {{ form_label(form.email, null, {label_attr: {class: 'form-label'}}) }}
              {{ form_widget(form.email, {attr: {class: 'form-control'}}) }}
              {{ form_errors(form.email) }}
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">Password</h2>
            <p class="text-secondary small">Leave the fields below blank to keep your current password. You'll need to supply your existing password whenever you create a new one.</p>
            <div class="mb-3">
              {{ form_label(form.currentPassword, null, {label_attr: {class: 'form-label'}}) }}
              {{ form_widget(form.currentPassword, {attr: {class: 'form-control'}}) }}
              {{ form_errors(form.currentPassword) }}
            </div>
            <div class="mb-3">
              {{ form_errors(form.newPassword) }}
              <div class="row g-3">
                <div class="col-md-6">
                  {{ form_label(form.newPassword.first, null, {label_attr: {class: 'form-label'}}) }}
                  {{ form_widget(form.newPassword.first, {attr: {class: 'form-control'}}) }}
                  {{ form_errors(form.newPassword.first) }}
                </div>
                <div class="col-md-6">
                  {{ form_label(form.newPassword.second, null, {label_attr: {class: 'form-label'}}) }}
                  {{ form_widget(form.newPassword.second, {attr: {class: 'form-control'}}) }}
                  {{ form_errors(form.newPassword.second) }}
                </div>
              </div>
            </div>
            <div class="d-flex gap-2">
              <button class="btn btn-success" type="submit">Save changes</button>
              <a class="btn btn-link" href="{{ path('account_dashboard') }}">Cancel</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  {{ form_end(form) }}
{% endblock %}