{% extends '@Kiosk/layout.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "@theme/components/buttons.html.twig" as buttons %}

{% block login_box_msg %}{{ 'kiosk.video.title'|trans }}{% endblock %}

{% block kiosk_content %}
    {{ form_start(form) }}
    <div class="row">
        <div class="col-10">
            {# TODO make this configurable #}
            {{ form_widget(form.code, {attr:{inputmode: "none"}}) }}
        </div>
        <div class="col-2">
            {{ buttons.submit_button('login', {'title': null, 'class': 'btn-icon'}) }}
        </div>
    </div>
    {{ form_end(form) }}
{% endblock %}

{% block login_box_after %}
    <div class="row mt-3" style="display: none" id="scanNfcButton">
        <div class="col-12">
            <button class="btn btn-primary w-100">
                <span>{{ 'kiosk.start_nfc'|trans }}</span>
            </button>
        </div>
    </div>

    {% if kiosk_active_users is not empty or kiosk_inactive_users is not empty %}
        <div class="kiosk-users">
            {% if kiosk_active_users is not empty %}
                <div class="mt-4 users-active {% if kiosk_active_users is empty %}empty-list{% endif %}">
                    <h3>{{ 'title.show_active_users'|trans }}</h3>
                    {% if kiosk_active_users is not empty %}
                        {% for user in kiosk_active_users %}
                            {{ widgets.user_avatar(user) }}
                        {% endfor %}
                    {% else %}
                        <p>{{ 'empty.show_active_users'|trans }}</p>
                    {% endif %}
                </div>
            {% endif %}

            {% if kiosk_inactive_users is not empty %}
                <div class="mt-4 users-inactive {% if kiosk_inactive_users is empty %}empty-list{% endif %}">
                    <h3>{{ 'title.show_inactive_users'|trans }}</h3>
                    {% if kiosk_inactive_users is not empty %}
                        {% for user in kiosk_inactive_users %}
                            {{ widgets.user_avatar(user) }}
                        {% endfor %}
                    {% else %}
                        <p>{{ 'empty.show_inactive_users'|trans }}</p>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        function toggleFullScreen() {
            if (document.fullscreenEnabled) {
                document.body.requestFullscreen();
            }
        }

        // -----------------------------------------------------
        // For Android-Kiosk app
        // @see https://help.android-kiosk.com/en/article/js-nfc-1whgpf1/
        if (typeof Android !== 'undefined' && typeof Android.useJavaScriptCallbackNFC !== 'undefined') {
            Android.useJavaScriptCallbackNFC(true);
        }

        function nfcScanResult(data) {
            if (typeof data === 'string') {
                document.getElementById('barcode_login_form_code').value = data;
                document.querySelector('form[name=barcode_login_form]').submit();
            }
        }

        // -----------------------------------------------------
        // default Web NFC
        async function startNfcScanning()
        {
            try {
                const ndef = new NDEFReader();
                await ndef.scan();

                ndef.addEventListener("readingerror", () => {
                    console.log("Cannot read data from the NFC tag. Try another one?");
                });

                ndef.addEventListener("reading", ({message, serialNumber}) => {
                    document.getElementById('barcode_login_form_code').value = serialNumber;
                    document.querySelector('form[name=barcode_login_form]').submit();
                });
            } catch (e) {
                console.log('Could not read from NFC: ' + e);
            }
        }

        async function detectNfcSupport()
        {
            const nfcPermissionStatus = await navigator.permissions.query({name: "nfc"});
            if (nfcPermissionStatus.state === "granted") {
                startNfcScanning();
            } else {
                document.querySelector("#scanNfcButton").style.display = "block";
                document.querySelector("#scanNfcButton").onclick = event => {
                    startNfcScanning();
                };
            }
        }

        document.addEventListener('kimai.initialized', function() {
            document.getElementById('barcode_login_form_code').focus();
        });

        /*
        setTimeout(function(){
            document.location.reload();
        }, 840000); {# 14 min (PHP default session timeout) #}
        */

        if (window.NDEFReader !== undefined) {
            detectNfcSupport();
        }
    </script>
{% endblock %}