{% 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 %}

  <div class="row g-4">
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body text-center">
          <h2 class="h6 mb-3">Current picture</h2>
          {% 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>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
            <div class="mb-3">{{ form_row(form.email) }}</div>
            <div class="mb-3">{{ form_row(form.displayName) }}</div>
            <div class="mb-3">{{ form_row(form.profileImage) }}</div>
            <hr>
            <p class="text-secondary small mb-3">Password change is optional. Provide your current password only if you want to update it.</p>
            <div class="mb-3">{{ form_row(form.currentPassword) }}</div>
            <div class="mb-3">{{ form_row(form.newPassword) }}</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>
          {{ form_end(form) }}
        </div>
      </div>
    </div>
  </div>
{% endblock %}