{% extends "base.html" %}
{% load bootstrap5 %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "VirtualBank home" %}{% endblock %}

{% block content %}
<div class="container my-5" style="min-height: 70vh;">
    <h2 class="display-6 my-4 lh-1 fw-bold">{% trans "User Profile" %}</h2>

    <div class="row justify-content-center">
        <div class="col-12 col-md-6">
            <div class="row my-5">
                <div class="col-4">
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-3"
                         style="width: 100px; height: 100px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 103 103" fill="none">
                            <path d="M81.5417 90.125C81.5417 73.5334 68.0915 60.0833 51.5 60.0833C34.9084 60.0833 21.4583 73.5334 21.4583 90.125M51.5 47.2083C42.0191 47.2083 34.3333 39.5226 34.3333 30.0417C34.3333 20.5608 42.0191 12.875 51.5 12.875C60.9809 12.875 68.6667 20.5608 68.6667 30.0417C68.6667 39.5226 60.9809 47.2083 51.5 47.2083Z"
                                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
                <div class="col-8">
                    <p><strong>{{ user.username }}</strong></p>
                    <p>{{ user.get_full_name }}</p>
                    <p>{{ user.email }}</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    {% bootstrap_field u_form.username %}
                </div>
                <div class="mb-3">
                    {% bootstrap_field u_form.first_name %}
                </div>
                <div class="mb-3">
                    {% bootstrap_field u_form.last_name %}
                    {% if u_form.last_name.errors %}
                    <div class="alert alert-danger" role="alert">
                        {{ u_form.last_name.errors }}
                    </div>
                    {% endif %}
                </div>
                <button type="submit" class="btn btn-primary">{% trans "Save changes" %}</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}