{% extends "pwa/base.html" %}
{% load i18n %}
{% block pwa_title %}
    {% trans "Preferences" %}
{% endblock %}
{% block content %}
    <!-- User Profile Header -->
    <div class="pwa-profile-header">
        <div class="avatar">
            {{ request.user.username|slice:":1"|upper }}
        </div>
        <div class="info">
            <h2>
                {{ request.user.get_full_name|default:request.user.username }}
            </h2>
            <p>
                {{ request.user.email }}
            </p>
        </div>
    </div>
    <div class="form-preferences">
        <form method="post" class="space-y-6">
            {% csrf_token %}
            {% for field in form %}
                <div class="pwa-form-group">
                    <label for="{{ field.id_for_label }}">
                        {{ field.label }}
                    </label>
                    {{ field }}
                    {% if field.help_text %}
                        <p class="help-text">
                            {{ field.help_text }}
                        </p>
                    {% endif %}
                    {% for error in field.errors %}
                        <p class="error">
                            {{ error }}
                        </p>
                    {% endfor %}
                </div>
            {% endfor %}
            <div class="pt-4">
                <button type="submit" class="pwa-btn primary large w-full">
                    {% trans "Save Preferences" %}
                </button>
            </div>
        </form>
    </div>
    <!-- Security & Passkeys Section -->
    {#    <div class="mt-8 space-y-4">#}
    {#        <h3 class="text-lg font-bold border-b pb-2">#}
    {#            {% trans "Security & Passkeys" %}#}
    {#        </h3>#}
    {#        {% if authenticators %}#}
    {#            <div class="space-y-2">#}
    {#                {% for auth in authenticators %}#}
    {#                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">#}
    {#                        <div class="flex items-center gap-3">#}
    {#                            <span class="material-symbols-outlined">#}
    {#                                {% if auth.type == 'webauthn' %}#}
    {#                                    fingerprint#}
    {#                                {% elif auth.type == 'totp' %}#}
    {#                                    numbers#}
    {#                                {% else %}#}
    {#                                    security#}
    {#                                {% endif %}#}
    {#                            </span>#}
    {#                            <div>#}
    {#                                <p class="font-medium text-sm">#}
    {#                                    {{ auth }}#}
    {#                                </p>#}
    {#                                <p class="text-xs text-gray-500">#}
    {#                                    {% trans "Added" %}: {{ auth.created_at|date }}#}
    {#                                </p>#}
    {#                            </div>#}
    {#                        </div>#}
    {#                    </div>#}
    {#                {% endfor %}#}
    {#            </div>#}
    {#        {% else %}#}
    {#            <p class="text-sm text-gray-500 italic">#}
    {#                {% trans "No passkeys or MFA authenticators registered yet." %}#}
    {#            </p>#}
    {#        {% endif %}#}
    {#        <div class="pt-2">#}
    {#            <a href="{% url 'mfa_index' %}" class="pwa-btn outline w-full flex items-center justify-center gap-2">#}
    {#                <span class="material-symbols-outlined">settings_suggest</span>#}
    {#                {% trans "Manage MFA & Passkeys" %}#}
    {#            </a>#}
    {#        </div>#}
    {#    </div>#}
    <!-- PWA Installation Section -->
    <div id="pwa-install-section" class="hidden mt-8">
        <h3 class="text-lg font-bold border-b pb-2">
            {% trans "Mobile App" %}
        </h3>
        <div class="py-4">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {% trans "Install Bitcaster on your home screen for quick access and a better experience." %}
            </p>
            <button id="pwa-install-button" onclick="installPwa()" class="pwa-btn outline large w-full">
                {% trans "Install Application" %}
            </button>
        </div>
    </div>
    <div class="h-20">
    </div>
    <script>
        function checkPwaInstallability() {
            const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
            const installSection = document.getElementById('pwa-install-section');
            const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

            if (isStandalone) {
                installSection.classList.add('hidden');
                return;
            }

            if (deferredPrompt || isiOS) {
                installSection.classList.remove('hidden');

                if (isiOS) {
                    const btn = document.getElementById('pwa-install-button');
                    btn.innerText = '{% trans "How to Install" %}';
                    btn.onclick = () => alert('{% trans "On iOS, tap the Share icon and then Add to Home Screen" %}');
                }
            }
        }

        window.addEventListener('load', () => {
            checkPwaInstallability();
            let attempts = 0;
            const interval = setInterval(() => {
                checkPwaInstallability();
                attempts++;
                if (deferredPrompt || attempts > 5) clearInterval(interval);
            }, 1000);
        });

        window.addEventListener('beforeinstallprompt', () => {
            checkPwaInstallability();
        });
    </script>
{% endblock %}