{% load static %}

{% include 'django_spire/auth/button/pwa_install_button.html' with os_target='ios' %}

<div class="modal fade" id="ios-install-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-auto">
                        <img
                                src="{% block app_icon %}{% static 'django_spire/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">
                        <span class="fs-5 fw-semibold text-center">{% block app_title %}Django
                            Spire{% endblock %}</span>
                    </div>
                    <div class="col-auto ms-auto text-end">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                </div>
                <div class="row align-items-center">
                    <div class="col-12 mt-2">
                        <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>

            </div>
        </div>
    </div>
</div>


<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>