{% extends "member/base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}

{% block profile_content %}
<div class="card bg-light">
    <h3 class="card-header text-center">
        {{ title }}
    </h3>
    <div class="card-body">
        <form method="post" id="profile-form">
            {% csrf_token %}
            {{ form | crispy }}
            {{ profile_form | crispy }}
            <button class="btn btn-primary" type="submit">
                {% trans "Save Changes" %}
            </button>
        </form>
    </div>
</div>
{% endblock %}

{% block extrajavascript %}
<!-- intl-tel-input CSS/JS -->
<script>
(() => {
    const input = document.querySelector("input[name='phone_number']");
    const form = document.querySelector("#profile-form");

    if (!input || !form || input.type === "hidden" || input.disabled || input.readOnly) {
        return;
    }

    const iti = window.intlTelInput(input, {
        initialCountry: "auto",
        nationalMode: false,
        autoPlaceholder: "off",
        geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("fr"));
        },
        loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/build/js/utils.js"),
    });

    form.addEventListener("submit", function(e){
        if (!input.value.trim()) {
            return;
        }

        const number = iti.getNumber(intlTelInput.utils.numberFormat.E164);
        if (number) {
            input.value = number;
            form.submit();
        } else {
            e.preventDefault();
            input.focus();
        }
    });
})();
</script>
{% endblock %}