details_profile.html with client-side validation

{% 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">
    {% 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="profile-image" />
    {% endif %}
    {% if profile.first_name or profile.last_name %}
    {% if profile.first_name and profile.last_name %}
    <h1>{{ profile.first_name }} {{ profile.last_name }}</h1>
    {% elif profile.first_name %}
    <h1>{{ profile.first_name }}</h1>
    {% elif profile.last_name %}
    <h1>{{ profile.last_name }}</h1>
    {% endif %}
    {% endif %}

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

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

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

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

<form method="post" enctype="multipart/form-data" id="profile-form">
    {% csrf_token %}
    {{ form.as_p }}
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('#profile-form');
        const photoInput = document.querySelector('#id_profile_photo');

        form.addEventListener('submit', function(event) {
            if (photoInput.files.length > 0) {
                const maxFileSize = 3 * 1024 * 1024; // 3 MB
                if (photoInput.files[0].size > maxFileSize) {
                    alert('The file size exceeds the maximum limit of 3 MB.');
                    event.preventDefault();
                    return;
                }
            }
        });
    });
</script>
{% endblock %}