{% extends 'django_spire/modal/center_modal.html' %}

{% load static %}

{% block modal_trigger %}
    {% include 'django_spire/auth/button/ios_install_button.html' with button_type='btn-app-primary' %}
{% endblock %}

{% block modal_content %}
    {% block install_content %}
        <div class="row">
            <div class="col-auto">
                <img
                    src="{% block app_icon %}{% static 'favicons/android-chrome-192x192.png' %}{% endblock %}"
                    alt="{% block alt_text %}Django Spire{% endblock %}"
                    class="border rounded-3 me-3 shadow"
                    style=" height: 3.0rem; "
                >
            </div>
            <div class="col-auto">
                <span class="fs-5 fw-semibold">{% block app_title %}Django Spire{% endblock %}</span>
            </div>
            <div class="col-auto ms-auto">
                {% include 'django_spire/icon/responsive_icon.html' with x_icon_click='close_modal()' icon='bi bi-x-lg' tooltip_text='Close' %}
            </div>
            <div class="col-12">
                <p>Install the app on your Apple device to easily access it anytime by following the instructions below in the Safari Web Browser.</p>
                <ol>
                    <li class="p-2">Tap on the <span class="border border-2 p-1 rounded-3"><i class="bi bi-box-arrow-up"></i></span> in your browser bar</li>
                    <li class="p-2">Select <span class="border border-2 p-1 rounded-3">Add to Home Screen</span></li>
                    <li class="p-2">Click <span class="border border-2 p-1 rounded-3">Add</span> When Prompted</li>
                </ol>
                <p class="m-0">You will need to close this popup to complete the installation process</p>
            </div>
        </div>
    {% endblock %}
    <script type="application/javascript">
    let ios_install_button = document.querySelector("#ios-install-button");

    const isIos = () => {
        const userAgent = window.navigator.userAgent.toLowerCase();
        return /iphone|ipad|ipod/.test(userAgent);
    }

    const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

    if (isIos() && !isInStandaloneMode()) {
        ios_install_button.removeAttribute("hidden");
    }
    </script>
{% endblock %}