<!DOCTYPE html>
<html lang="de">
    <head>
        <%- include('partials/head') -%>
        <title>FWmonitor - APP</title>
    </head>

    <body>
        <%- include('partials/header') -%>

        <div class="navbar">
            <button class="material-icons" onclick="goBack();">chevron_left</button>

            <h1>Kontakte</h1>
        </div>

        <div class="content" style="overflow: hidden">
            <div class="flex_column" style="height: 100%">
                <div class="margin_top_0_5 padding_bottom_0_5 border_bottom">
                    <input
                        type="text"
                        id="myInput"
                        onkeyup="search(this.value)"
                        placeholder="Suche..."
                        style="width: 90%; margin-left: 5%"
                    />
                </div>

                <div class="flex_grow" style="overflow-y: scroll; height: 100%">
                    <div class="flex_column padding_1">
                        <div class="contact_list">
                            <template id="template-contact">
                                <div class="contactelement margin_none padding_none deleteme">
                                    <div class="list listDark border_left border_right mark_green">
                                        <div class="item smallitem">
                                            <span class="text var_name">Max Mustermann</span>
                                        </div>

                                        <div class="item subitem">
                                            <span class="material-icons">phone</span>
                                            <span class="text">Festnetz</span>
                                            <a class="var_tel_a"
                                                ><span class="right var_tel">Festnetz</span></a
                                            >
                                        </div>
                                        <div class="item subitem">
                                            <span class="material-icons">phone</span>
                                            <span class="text">Dienstlich</span>
                                            <a class="var_tel_dienst_a"
                                                ><span class="right var_tel_dienst"
                                                    >Dienstlich</span
                                                ></a
                                            >
                                        </div>
                                        <div class="item subitem">
                                            <span class="material-icons">phone_in_talk</span>
                                            <span class="text">Mobil</span>
                                            <a class="var_mobil_a"
                                                ><span class="right var_mobil">Mobil</span></a
                                            >
                                        </div>
                                        <div class="item subitem">
                                            <span class="material-icons">email</span>
                                            <span class="text">Email</span>
                                            <a class="var_email_a"
                                                ><span class="right var_email">Email</span></a
                                            >
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%- include('partials/foot') -%>

        <script>
            const target = document.querySelector('.contact_list');

            // Laden
            async function load_contacts() {
                try {
                    const contacts = await fetch_get(url_contact_all, true);
                    console.log('contacts', contacts);

                    // Vorhandene Elemente lÃ¶schen
                    const elements = target.getElementsByClassName('deleteme');
                    while (elements.length > 0) {
                        elements[0].parentNode.removeChild(elements[0]);
                    }

                    // Kontakliste erstellen
                    for (let i = 0; i < contacts.length; i++) {
                        const contact = contacts[i];

                        const template = document.querySelector('#template-contact');
                        const var_name = template.content.querySelector('.var_name');
                        const var_tel = template.content.querySelector('.var_tel');
                        const var_tel_dienst = template.content.querySelector('.var_tel_dienst');
                        const var_mobil = template.content.querySelector('.var_mobil');
                        const var_email = template.content.querySelector('.var_email');

                        const var_tel_a = template.content.querySelector('.var_tel_a');
                        const var_tel_dienst_a =
                            template.content.querySelector('.var_tel_dienst_a');
                        const var_mobil_a = template.content.querySelector('.var_mobil_a');
                        const var_email_a = template.content.querySelector('.var_email_a');

                        var_name.innerHTML = contact.name + ' ' + contact.vorname;
                        var_tel.innerHTML = contact.tel;
                        var_tel_dienst.innerHTML = contact.tel_dienst;
                        var_mobil.innerHTML = contact.tel_mobil;
                        var_email.innerHTML = contact.email;

                        var_tel_a.href = 'tel:' + contact.tel.replace(/[/-]/g, '');
                        var_tel_dienst_a.href = 'tel:' + contact.tel_dienst.replace(/[/-]/g, '');
                        var_mobil_a.href = 'tel:' + contact.tel_mobil.replace(/[/-]/g, '');
                        var_email_a.href = 'mailto:' + contact.email;

                        const clone = document.importNode(template.content.firstElementChild, true);
                        target.append(clone);

                        clone.addEventListener('click', () => {});
                    }
                } catch (error) {
                    console.error('load_contacts', error);
                    if (error.show) alert('Daten konnten nicht geladen werden.');
                }
            }

            // Hilfsfunktionen
            function search(filter) {
                ul = target;
                li = ul.getElementsByClassName('contactelement');

                // Loop through all list items, and hide those who don't match the search query
                for (i = 0; i < li.length; i++) {
                    a = li[i].innerHTML.replace(/\s/g, '&nbsp;').toLowerCase();

                    if (a.indexOf(filter.replace(/\s/g, '&nbsp;').toLowerCase()) > -1) {
                        li[i].style.display = '';
                    } else {
                        li[i].style.display = 'none';
                    }
                }
            }

            // Funktionsaufrufe
            loaderFunction = async () => {
                loaderIn();
                await load_contacts();
                loaderOut();
            };
        </script>
    </body>
</html>
