{% extends "base.html" %}
{% load static %}
{% block title %}
About me
{% endblock %}
{% block content %}
<div class="bg-[#d1d1d1] flex flex-col items-center mx-auto max-w-[90%] py-[15px] rounded-[10px] dark:bg-[#2a2a2a]">
    <h1 class="text-[50px] text-[#343434] m-0 dark:text-[#e5e5e5]">Profile</h1>
</div>

<div class="max-w-[90%] mx-auto m-[40px]">
    <section class="bg-white rounded-[10px] p-[30px] shadow dark:bg-[#2a2a2a]">
        <div class="flex flex-col lg:flex-row items-center gap-[30px]">
            <img src="{% static 'images/autor.jpg' %}" alt="User photo"
                class="w-[220px] h-[220px] object-cover rounded-full shadow-md">

            <div>
                <div class="">
                    <h2 class="text-[1.8rem] font-semibold text-[#343434] mb-[15px] dark:text-[#e5e5e5]">{{ user.username }}</h2>
                    <a href=""
                        class="bg-[#343434] text-white rounded-[4px] px-[15px] py-[5px] mt-auto self-start no-underline hover:bg-[#575757] dark:hover:bg-[#696969] dark:bg-[#575757] dark:text-white">
                        Edit profile
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}