{% extends "phoxtail_core/modal_drawer.html" %}
{% load i18n thumbnail %}
{% comment %}
The member's profile (level 0): their avatar and fields, saved by the
footer's Save. An error redraws the form in place (#profile-update-form-body).
{% endcomment %}
{% block title %}{% translate "Edit profile" %}{% endblock %}
{% block body %}
    <div class="phoxtail-form-stack">
        <div class="usr-avatar-section">
            <div id="avatar-preview-initials"
                 class="usr-avatar-initials{% if user.avatar %} usr-hidden{% endif %}">
                {{ user.first_name|default:""|slice:":1" }}{{ user.last_name|default:""|slice:":1" }}
            </div>
            {% if user.avatar %}
                {% thumbnail user.avatar "256x256" crop="center" as avatar %}
                    <img id="avatar-preview-image"
                         class="usr-avatar"
                         src="{{ avatar.url }}"
                         alt="{{ user.get_full_name }}">
                {% endthumbnail %}
            {% else %}
                <img id="avatar-preview-image"
                     class="usr-avatar usr-hidden"
                     src=""
                     alt="{{ user.get_full_name }}">
            {% endif %}
            <h3 class="usr-profile-name">{{ user.get_full_name }}</h3>
            <span class="phx-tag">@{{ user.username }}</span>
        </div>
        <div id="profile-update-form-body">{% include "users/profile/partials/update_form_body.html" %}</div>
    </div>
    <script>
        (function() {
            const previewImage = document.getElementById('avatar-preview-image');
            const originalAvatarSrc = previewImage?.getAttribute('src') || '';
            const hasOriginalAvatar = !!originalAvatarSrc;

            window.previewAvatar = function(event) {
                const file = event.target.files[0];
                const previewInitials = document.getElementById('avatar-preview-initials');
                const clearCheckbox = document.getElementById('avatar-clear-checkbox');

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    const img = new Image();

                    reader.onload = function(e) {
                        img.onload = function() {
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            const maxSize = 512;

                            let width = img.width;
                            let height = img.height;

                            if (width > height) {
                                if (width > maxSize) {
                                    height *= maxSize / width;
                                    width = maxSize;
                                }
                            } else {
                                if (height > maxSize) {
                                    width *= maxSize / height;
                                    height = maxSize;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);

                            previewImage.src = canvas.toDataURL('image/jpeg', 0.95);
                            previewImage.classList.remove('usr-hidden');
                            if (previewInitials) {
                                previewInitials.classList.add('usr-hidden');
                            }
                            if (clearCheckbox) {
                                clearCheckbox.checked = false;
                            }
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            };

            window.handleClearAvatar = function(event) {
                const previewInitials = document.getElementById('avatar-preview-initials');
                const fileInput = document.getElementById('{{ form.avatar.id_for_label }}');

                if (event.target.checked) {
                    previewImage.classList.add('usr-hidden');
                    previewInitials.classList.remove('usr-hidden');
                    fileInput.value = '';
                } else {
                    if (hasOriginalAvatar) {
                        previewImage.src = originalAvatarSrc;
                        previewImage.classList.remove('usr-hidden');
                        previewInitials.classList.add('usr-hidden');
                    }
                }
            };
        })();
    </script>
{% endblock %}
{% block actions %}
    <button class="phx-button phx-button--primary" type="submit" form="profile-update-form">
        <span>{% translate "Save" context "button" %}</span>
    </button>
{% endblock %}