each val, service in services
    section(class="block-option" id=service+"_page")
        div(class="block block-option")
            h1
                a(target="_blank" href=services[service].url)=services[service].name

        hr

        div(class="block block-option")
            label(for=`${service}-enabled` data-localise="__MSG_enable__") Enable
            input(id=`${service}-enabled` type="checkbox")

        div(class="block block-option")
            label(for=service data-localise="__MSG_showInPopup__") Show in popup
            input(id=service type="checkbox")

        div(id=service+"-opacity")

            div(class="block block-option")
                label(for=`${service}-frontend`)
                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
                select(id=`${service}-frontend`)
                    each val, frontend in services[service].frontends
                        option(value=frontend)=services[service].frontends[frontend].name

            div(class="block block-option" id=service+"-instance-div")
                label(for=`${service}-instance`) Instance Type
                select(id=`${service}-instance`)
                    option(value="localhost") localhost
                    option(value="public") public instances

            div(class="block block-option")
                label(for=`${service}-redirectType` data-localise="__MSG_redirectType__") Redirect Type
                select(id=`${service}-redirectType`)


            div(id=`${service}-embedFrontend-div` class="block block-option")
                label(for=`${service}-embedFrontend` data-localise="__MSG_embedFrontend__") Embed Frontend
                select(id=`${service}-embedFrontend`)
                    each val, frontend in services[service].frontends
                        if services[service].frontends[frontend].embeddable && services[service].frontends[frontend].instanceList
                            option(value=frontend)=services[service].frontends[frontend].name


            div(class="block block-option")
                label(for=`${service}-unsupportedUrls` data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling
                select(id=`${service}-unsupportedUrls`)
                    option(value="bypass") bypass
                    option(value="block") block

            if (service == 'search')
                div(class="block block-option")
                    label Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click <a href="https://libredirect.github.io/docs.html#search_engine_chromium">here</a>.


            each val, frontend in services[service].frontends
                if services[service].frontends[frontend].instanceList
                    div(id=frontend dir="ltr")
                        hr        
                        div(dir="auto" class="block block-option")
                            label(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances

                        form(class="custom-instance-form")
                            div(class="block block-option")
                                input(class="custom-instance" type="url" placeholder="https://instance.com" aria-label="Add instance input")
                                button(class="add add-instance" type="submit" aria-label="Add the instance")
                                    svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                        path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")

                        div(class="checklist custom-checklist")  

                        div(class="ping block")
                            button(class="button button-inline" id=`ping-${frontend}`)
                                svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                    path(d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z")
                                |&nbsp;
                                x() Ping instances

                        each val, network in networks
                            div(class=network)
                                div(class="checklist")
                                    if (network == 'clearnet')
                                        div(class="block block-option loading") Loading...