{% extends 'base.html' %}
{% load static %}

{% block main_content %}
<link rel="stylesheet" href="{% static 'style/details_profile.css' %}">

<h1>Profile Details</h1>

<div class="info-section">
    <!-- Profile Photo -->
    <div class="profile-photo">
        {% if profile.profile_photo %}
            <img class="car-img" src="{{ profile.profile_photo.url }}" alt="Profile Image" />
        {% else %}
            <img class="car-img" src="{% static 'images/default_profile_image.png' %}" alt="Default Profile Image" />
        {% endif %}
    </div>

    <!-- Name Display -->
    {% if profile.first_name or profile.last_name %}
        <h1>
            {{ profile.first_name }} {{ profile.last_name|default:'' }}
        </h1>
    {% endif %}

    <!-- Email -->
    <p class="description">Email: {{ user.email }}</p>

    <!-- Age -->
    <p class="description">Age: {{ profile.age }}</p>

    <!-- Total Photos -->
    <p class="description">Total photos: {{ place_count }}</p>

    <!-- Action Buttons -->
    <div class="buttons">
        <a href="{% url 'edit profile' pk=profile.pk %}" class="edit-button">Edit</a>
        <a href="{% url 'delete profile' pk=profile.pk %}" class="delete-button">Delete</a>
    </div>
</div>

<!-- Optional Form for Additional Actions -->
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
</form>

{% endblock %}