<script id="application:modal-window" type="text/x-jquery-tmpl">
    <div class="modalWindow">
        <div class="modalWindowInner"></div>
    </div>
</script>

<script id="application:loading-window" type="text/x-jquery-tmpl">
    <div class="loading-window" data-id="${id}">
        <div class="showLoadingBackDrop"></div>
        <div class="showLoading">
            <div class="icon">
                <img src="/static/images/loader.gif">
            </div>
            <div class="text">
                <span class="translation-string">${message}</span>
            </div>
            <div class="long-loading-message">
                <span class="translation-string">
                    <span class="translation-string">{{html localeString("Check device connection")}}</span>
                </span>
            </div>
        </div>
    </div>
</script>

<script id="application:loading-window-fail" type="text/x-jquery-tmpl">
    <div class="title">
        <span>{{html localeString("Some of InternetBox components failed to start")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("Some of component of InternetBox is failing to start.")}}
            {{html localeString("Please reboot your device in order to solve this problem.")}}

            <br><br>

            {{html localeString("If you will see this message few times in the row, please connect Service Center for solving this issue")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span>{{html localeString("Try again")}}</span>
        </a>
    </div>
</script>

<script id="application:modal:changes-confirm" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You have pending unsaved changes. Do you really want to discard them?")}}</span></div>
    <div class="text">
        <span class="translation-string">{{html localeString("Your changes will be discarded when leaving this page.")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Leave this Page")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Stay on this Page")}}</span></a>
    </div>
</script>

<script id="application:modal:dyndns-confirm" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You deleted hostname, so the Swisscom DynDNS service will be disabled.")}}</span></div>
    <div class="buttons-container">
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("OK")}}</span></a>
    </div>
</script>

<script id="application:modal:locale-changes-confirm" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You have pending unsaved changes. Do you really want to discard them?")}}</span></div>
    <div class="text">
        <span class="translation-string">{{html localeString("After changing language your changes will be lost.")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Change locale")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Discard locale change")}}</span></a>
    </div>
</script>
<script id="application" type="text/x-jquery-tmpl">
<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>
    <div class="top-panel">
        <div class="panel-content">
            <div class="buttons">
                <a class="button no-highlighting top-panel-item logout"> <span class="translation-string">{{html localeString("Logout")}}</span></a>
            </div>
            <div class="search">

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

    <div class="table logo-language">
        <div class="table-row">
            <div class="left block-logo">
                <a href="#overview" class="logo"></a>
            </div>
            <div class="right block-locale">
                <div class="swc-dropdown locale-selector disable-gradient" data-class="locale-selector" data-value="" data-selected="">
                    <div class="selected-option">
                        <span class="translation-string">&nbsp;</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="menu">
            <div class="swc-radio-buttons" id="user-mode-switcher" data-value="standard">
                <div class="buttons-label"> <span class="translation-string">{{html localeString("Mode")}}</span>: </div>
                <div class="mode active" data-value="standard">
                    <div class="icon"></div>
                    <div class="text"> <span class="translation-string">{{html localeString("Standard")}}</span></div>
                </div>
                <div class="mode" data-value="expert">
                    <div class="icon"></div>
                    <div class="text"> <span class="translation-string">{{html localeString("Expert")}}</span></div>
                </div>
            </div>

            <ul id="navigation-menu">
                <li class="navigation-item menu-overview">
                    <a href="#overview">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Overview")}}</span></div>
                    </a>
                </li>
                <li class="navigation-item menu-network">
                    <a href="#network/settings/ip-settings">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Network")}}</span></div>
                    </a>
                    <ul class="navigation-submenu">
                        <li class="page-settings submenu">
                            <a href="#network/settings/ip-settings"> <span class="translation-string">{{html localeString("Network:Settings")}}</span></a>
                        </li>
                        <!--
                        <li class="page-backup submenu">
                            <a href="#network/backup"> <span class="translation-string">{{html localeString("Network:Internet Backup Stick")}}</span></a>
                        </li>
                        -->
                        <li class="page-devices submenu">
                            <a href="#network/devices"> <span class="translation-string">{{html localeString("Network:Devices List")}}</span></a>
                        </li>
                    </ul>
                </li>

                <li class="navigation-item menu-wifi">
                    <a href="#wifi/settings/type-24">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("WiFi")}}</span></div>
                    </a>
                    <ul class="navigation-submenu">
                        <li class="page-settings submenu">
                            <a href="#wifi/settings/type-24"> <span class="translation-string">{{html localeString("WiFi:Settings")}}</span></a>
                        </li>
                        <li class="page-guest submenu hide-starlink">
                            <a href="#wifi/guest"> <span class="translation-string">{{html localeString("WiFi:Guest WiFi")}}</span></a>
                        </li>
                        <li class="page-scheduler submenu hide-starlink">
                            <a href="#wifi/scheduler"> <span class="translation-string">{{html localeString("WiFi:Scheduler")}}</span></a>
                        </li>
                    </ul>
                </li>

                <li class="navigation-item menu-telephony">
                    <a href="#telephony/device">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Telephony")}}</span></div>
                    </a>
                    <ul class="navigation-submenu">
                        <li class="page-device submenu">
                            <a href="#telephony/device"> <span class="translation-string">{{html localeString("Telephony:Device List")}}</span></a>
                        </li>
                        <li class="page-phonebook submenu disabled-for-superadmin">
                            <a href="#telephony/phonebook"> <span class="translation-string">{{html localeString("Telephony:Phonebook")}}</span></a>
                        </li>
                        <li class="page-dect submenu">
                            <a href="#telephony/dect"> <span class="translation-string">{{html localeString("Telephony:DECT")}}</span></a>
                        </li>
                        <li class="page-calls submenu hide-NP5 disabled-for-superadmin">
                            <a href="#telephony/calls/all"> <span class="translation-string">{{html localeString("Call List")}}</span></a>
                        </li>
                    </ul>
                </li>

                <li class="navigation-item menu-parental hide-starlink">
                    <a href="#parental">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Parental Control")}}</span></div>
                    </a>
                </li>
                {{if GlobalEnable}}
                <li class="navigation-item menu-storage menu-applications hide-starlite hide-starlink">
                    <a href="#applications/overview">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Applications")}}</span></div>
                    </a>
                    <ul class="navigation-submenu">
                        <li class="page-overview submenu">
                            <a href="#applications/overview"> <span class="translation-string">{{html localeString("Overview")}}</span></a>
                        </li>
                        <li class="page-scheduler submenu">
                            <a href="#storage/scheduler"> <span class="translation-string">{{html localeString("Scheduler")}}</span></a>
                        </li>
                    </ul>
                </li>
                {{/if}}
                <li class="navigation-item menu-system">
                    <a href="#system/settings/reset">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("System")}}</span></div>
                    </a>
                    <ul class="navigation-submenu">
                        <li class="page-settings submenu">
                            <a href="#system/settings/reset"> <span class="translation-string">{{html localeString("System:Settings")}}</span></a>
                        </li>
                        <li class="page-display submenu hide-starlite hide-starlink">
                            <a href="#system/display"> <span class="translation-string">{{html localeString("System:Display")}}</span></a>
                        </li>
                        <li class="page-diagnostics submenu">
                            <a href="#system/diagnostics/overview"> <span class="translation-string">{{html localeString("System:Diagnostics")}}</span></a>
                        </li>
                    </ul>
                </li>

                <li class="navigation-item menu-power hide-starlink">
                    <a href="#power">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Power Savings")}}</span></div>
                    </a>
                </li>

                {{if jenkins && jenkins["build configuration"] == "debug"}}
                    <li class="navigation-item menu-developers">
                        <a href="#developers">
                            <div class="icon"></div>
                            <div class="text">Developers Info</div>
                        </a>
                    </li>
                {{/if}}
            </ul>
        </div>

        <div id="current-page" class="current-page"></div>
    </div>

    <div class="bottom-panel">
        <div class="panel-content">
            <div class="text-block links">
                <div class="text-link">
                     <a href="{{html staticPagesLinks.legal}}" target="_blank">{{html localeString("Legal Aspects")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.openSource}}" target="_blank">{{html localeString("Open Source")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.imprint}}" target="_blank">{{html localeString("Imprint")}}</span></a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.contact}}" target="_blank"><span class="translation-string">{{html localeString("Contact")}}</span></a>
                </div>
            </div>
            <div class="text-block copyright">
                &copy;  <span class="translation-string">{{html localeString("Swisscom AG")}}</span> 2015
            </div>
        </div>
    </div>

    <!-- For translation grabber -->
        <span class="hidden-strings">
            <span class="translation-string">{{html localeString("ProductName")}}</span>
            <span class="translation-string">{{html localeString("Updating DECT status")}}</span>
            <span class="translation-string">{{html localeString("Checking Verification Code")}}</span>
            <span class="translation-string">{{html localeString("Generating Verification Code")}}</span>
            <span class="translation-string">{{html localeString("Updating WiFi state")}}</span>
            <span class="translation-string">{{html localeString("Updating Central Storage state")}}</span>
            <span class="translation-string">{{html localeString("Switching Wi-Fi to combined mode")}}</span>
            <span class="translation-string">{{html localeString("Switching Wi-Fi to separate mode")}}</span>
            <span class="translation-string">{{html localeString("Updating device information")}}</span>
            <span class="translation-string">{{html localeString("Unmounting usb device")}}</span>
            <span class="translation-string">{{html localeString("Loading locale strings")}}</span>
            <span class="translation-string">{{html localeString("Initializing application")}}</span>
            <span class="translation-string">{{html localeString("Loading page data..")}}</span>
            <span class="translation-string">{{html localeString("Loading Device List")}}</span>
            <span class="translation-string">{{html localeString("Saving page data..")}}</span>
            <span class="translation-string">{{html localeString("Saving changes...")}}</span>
            <span class="translation-string">{{html localeString("Updating WiFi state")}}</span>
            <span class="translation-string">{{html localeString("Updating Guest WiFi state")}}</span>
            <span class="translation-string">{{html localeString("Updating Phones and Dect state")}}</span>
            <span class="translation-string">{{html localeString("Downloading Backup File")}}</span>
            <span class="translation-string">{{html localeString("Turning on DECT")}}</span>
            <span class="translation-string">{{html localeString("Turning off DECT")}}</span>
            <span class="translation-string">{{html localeString("Processing login to Cloud Service")}}</span>
            <span class="translation-string">{{html localeString("Starting Password Recovery Process...")}}</span>
            <span class="translation-string">{{html localeString("Back")}}</span>
            <span class="translation-string">{{html localeString("Applying changes...")}}</span>
            <span class="translation-string">{{html localeString("Access to %ProductName% not possible")}}</span>
            <span class="translation-string">{{html localeString("It is not possible to access the %ProductName% Settings.")}}</span>
        </span>
    <!-- - - - - - - - - - - - - -->

</script>

<script id="applications:settings:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate Applications Info" }}
            <span class="translation-string">{{html localeString("When you deactivate the application part, you will not be able to use the central storage, speedtest, Swisscom DynDNS and VPN anymore.")}}</span>
        {{/if}}
    </div>
</script>

<script id="applications:vpn_server:settings:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Enable VPN Server" }}
            <span class="translation-string">{{html localeString("Enable VPN Server Info")}}</span>
        {{/if}}
        {{if component === "VPNServer Username Info" }}
            <span class="translation-string">{{html localeString("VPNServer Username Info")}}</span>
        {{/if}}
        {{if component === "VPNServer Password Info" }}
            <span class="translation-string">{{html localeString("VPNServer Password Info")}}</span>
        {{/if}}
        {{if component === "VPNServer Shared Secret Info" }}
            <span class="translation-string">{{html localeString("VPNServer Shared Secret Info")}}</span>
        {{/if}}
        {{if component === "VPNServer Access Info" }}
            <span class="translation-string">{{html localeString("VPNServer Access Info")}}</span>
        {{/if}}
    </div>
</script>

<script id="applications:vpn_server:settings:delete-client" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Diconnect VPN Client")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
             {{html localeString("Are you sure that you want to disconnect VPN Client from server?")}}
        </span>
    </div>

    <div class="modal-buttons">
        <a class="button no-highlighting primary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Yes")}}</span>
        </a>
    </div>
</script>

<script id="applications:dyndns:swisscom-dyndns-info" type="text/x-jquery-tmpl">
<div class="info-strings">
    {{if component === "Swisscom DynDNS Info" }}
        <span class="translation-string">{{html localeString("Swisscom DynDNS Info")}}</span>
    {{/if}}
    {{if component === "Internet IP-address Info" }}
        <span class="translation-string">{{html localeString("Internet IP-address Info")}}</span>
    {{/if}}
    {{if component === "Swisscom DynDNS hostname Info" }}
        <span class="translation-string">{{html localeString("Swisscom DynDNS hostname Info")}}</span>
    {{/if}}
</div>
</script>

<script id="applications:speedtest:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Speed-Check Info"}}
        <span class="translation-string">{{html localeString("Speed check info")}}</span>
        {{/if}}
        {{if component === "Internet Speed Info"}}
        <span class="translation-string">{{html localeString("Internet speed info")}}</span>
        {{/if}}
        {{if component === "Device Speed Info"}}
        <span class="translation-string">{{html localeString("Device speed info")}}</span>
        {{/if}}
    </div>
</script>
<!-- Translations for expandable lists, to be refactored and deleted soon -->
<script id="applications" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Applications")}}</span>
        <span class="translation-string">{{html localeString("Storage and Media")}}</span>
        <span class="translation-string">{{html localeString("Central Storage Remote Access")}}</span>
        <span class="translation-string">{{html localeString("Speedtest")}}</span>
        <span class="translation-string">{{html localeString("VPN Server")}}</span>
        <span class="translation-string">{{html localeString("m")}}</span>
        <span class="translation-string">{{html localeString("h")}}</span>
        <span class="translation-string">{{html localeString("d")}}</span>
        <span class="translation-string">{{html localeString("m1")}}</span>
        <span class="translation-string">{{html localeString("h1")}}</span>
        <span class="translation-string">{{html localeString("d1")}}</span>
        <span class="translation-string">{{html localeString("Save and access documents, photos, music and videos centrally on your %ProductName%.")}}</span>
        <span class="translation-string">{{html localeString("Manage the data sharing and access from your devices to the %ProductName%.")}}</span>
        <span class="translation-string">{{html localeString("Measure your access and your home network speed.")}}</span>
        <span class="translation-string">{{html localeString("VPN lets you access your homenet-work from anywhere in the world.")}}</span>
        <span class="translation-string">{{html localeString("Save and access documents, photos, music and videos centrally on your Internet-Box.")}}</span>
    </span>
</script>

<script id="applications:overview" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Settings for your Applications")}}</span></h1>
    </div>
    <div class="applications-on-off">
        <div class="swc-switcher set-ap-state {{if data.apServiceState}}checked{{/if}}" data-value="{{if data.apServiceState}}true{{else}}false{{/if}}">
            <div class="text">
                <h1>{{html localeString("Applications")}}</h1>
            </div>
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span class="translation-string">{{html localeString("On")}}</span>
                            <span class="translation-string">{{html localeString("Off")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="upper-icons-block">
            <div class="icons info has-popover set-ap-state-info"
                 data-popover-template-id="applications:settings:info-icons"
                 data-popover-template-data='{ "component": "Activate Applications Info" }'
                 data-popover-placement="right"
                 data-popover-holder=".set-ap-state-info">
            </div>
        </div>
    </div>
    <div class="base-content">
        <div class="">
            <div class="text title-application">
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("Overview")}}</span>
                </div>
            </div>

            <div class="text">
                <span class="translation-string">{{html localeString("In the application part of the %ProductName% you can manage the settings of your central storage, do a speedtest and set up a Swisscom DynDNS or VPN connection.")}}</span>
            </div>
            {{each(key, app) data.applications}}
                <a href="${app.get('route')}">
                    <div class="applicationsBlock ${app.get('classes')} ${app.get('type')}">
                        <div class="text title title-ap">
                            <div class="icon ${app.get('type')}">
                            </div>
                        </div>
                        <div class="title-ap">
                            <div class="title text">
                                {{html localeString(app.get('name'))}}
                            </div>
                        </div>
                        <div class="text description-ap">{{html localeString(app.get('description'))}}</div>
                    </div>
                </a>
            {{/each}}
        </div>
    </div>
    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start using applications, please switch the Applications on")}}
        </div>
    </div>
    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, applications are starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 minutes.")}}</span>
            </div>
        </div>
    </div>
</script>


<script id="applications:vpn" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Settings for your VPN Server connection")}}</span></h1>
    </div>
    <div>
        <div class="upper-icons-block">
        </div>
    </div>
    <div class="base-content tabs-content vpn-content-base">

       <div class="">

            <div class="text title-application">
                <div class="main-title-link-application">
                    <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
                </div>
                <div class="main-title-link-application title-dot">
                    <span class="translation-string">&#183;</span>
                </div>
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("VPN Server")}}</span>
                </div>
            </div>

            <div class="text">
                <span class="translation-string">{{html localeString("VPN lets you access your home network remotely. After successfully setting up a VPN connection from your device to the %ProductName%, the whole data traffic will be done over your home network.")}}</span>
            </div>

            <div class="inline-blocks">
                <div class="block">
                    <div class="swc-checkbox {{if data.VPNServerState}}checked{{/if}} {{if data.portForwardingStatus.blockedPorts > 0}}disabled{{/if}} validatable vpnServerEnable"
                         data-value="{{if !data.VPNServerState}}false{{else}}true{{/if}}"
                         data-default-value="{{if !data.VPNServerState}}false{{else}}true{{/if}}"
                         data-name="server_state">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("Enable VPN Server")}}</span>
                        </div>
                    </div>
                </div>
                <div class="block block-info">
                    <div class="icons has-popover info vpn-server-info"
                         data-popover-template-id="applications:vpn_server:settings:info-icons"
                         data-popover-template-data='{ "component": "Enable VPN Server" }'
                         data-popover-placement="top"
                         data-popover-holder=".vpn-server-info"></div>
                </div>
            </div>

            {{if data.portForwardingStatus.blockedPorts > 0}}
            <div class="validation-message vpn-port-forwarding-info-container" style="display: block;">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global" style="display: inline;">
                        {{if data.portForwardingStatus.blockedPorts == 1}}
                            {{html localeString("VPN could not be set up as port %port% is already in use.", {"port": data.portForwardingStatus.notFreePorts[0]})}}
                            <br />
                            {{html localeString("Please remove your existing portforwarding rule on port %port%.", {"port": data.portForwardingStatus.notFreePorts[0]})}}
                        {{/if}}
                        {{if data.portForwardingStatus.blockedPorts == 2}}
                            {{html localeString("VPN could not be set up as ports %portA% and port %portB% are already in use.",
                                    {
                                        "portA": data.portForwardingStatus.notFreePorts[0],
                                        "portB": data.portForwardingStatus.notFreePorts[1],
                                    })}}
                            <br/>
                            {{html localeString("Please remove your existing portforwarding rules on port %portA% and port %portB%.",
                                    {
                                        "portA": data.portForwardingStatus.notFreePorts[0],
                                        "portB": data.portForwardingStatus.notFreePorts[1],
                                    })}}
                        {{/if}}
                    </span>
                </div>
            </div>
            {{/if}}

            <div class="separator"></div>

            <div class="content-inside-application-settings disableInsideApplication">

                <div class="text title title-settings-application disabled-for-superadmin">
                    <span class="translation-string">{{html localeString("VPN Credentials")}}</span>
                </div>


                <div class="table table-application">

                    <div class="table-row disabled-for-superadmin">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("Username")}}
                            </span>

                        </div>

                        <div class="right vpn_credentials">

                            <div class="block input-container">

                                <input type="text" class="swc-input validatable username" value="${data.username}" data-default-value="${data.username}" name="vpn_username" placeholder="{{html localeString('Define your VPN username')}}">

                                <span class="valid-tick">
                                </span>

                            </div>

                            <div class="block block-info">

                                <div class="icons has-popover info vpn-server-username-info" data-popover-template-id="applications:vpn_server:settings:info-icons" data-popover-template-data='{ "component": "VPNServer Username Info" }' data-popover-placement="top" data-popover-holder=".vpn-server-username-info">
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="validation-message" data-parameter-name="vpn_username">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="error-message translation-string" data-error="global">
                                {{html localeString("Validation message username: Global username requirements")}}
                            </span>
                            <span class="error-message translation-string" data-error="invalid characters">
                                {{html localeString("Validation message username: Invalid characters")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be different than username">
                                {{html localeString("Validation message username: Username must be different than password")}}
                            </span>
                            <span class="error-message translation-string" data-error="username must be from 3 to 32 symbols">
                                {{html localeString("Validation message username: Username must be from 3 to 32 symbols")}}
                            </span>
                            <span class="error-message translation-string" data-error="username must not be empty">
                                {{html localeString("Validation message username: Username must not be empty")}}
                            </span>
                        </div>
                    </div>

                    <div class="table-row disabled-for-superadmin">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("Password")}}
                            </span>

                        </div>

                        <div class="right vpn_credentials">

                            <div class="block input-container">

                                <input type="password" class="swc-input validatable password-original" value="${data.password}" data-default-value="${data.password}" name="vpn_password" placeholder="{{html localeString('Define your VPN password')}}">

                                <input type="text" name="vpn_password" class="swc-input password-copy validatable" value="${data.password}" data-default-value="${data.password}" name="vpn_password" placeholder="{{html localeString('Define your VPN password')}}">

                                <span class="valid-tick">
                                </span>

                            </div>

                            <div class="block block-info">

                                <div class="icons has-popover info vpn-server-password-info" data-popover-template-id="applications:vpn_server:settings:info-icons" data-popover-template-data='{ "component": "VPNServer Password Info" }' data-popover-placement="top" data-popover-holder=".vpn-server-password-info">
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="validation-message" data-parameter-name="vpn_password">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="error-message translation-string" data-error="global">
                                {{html localeString("Validation message password: Global password requirements")}}
                            </span>
                            <span class="error-message translation-string" data-error="must contain special character or digit">
                                {{html localeString("Validation message password: Must contain special character or digit")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be different than username">
                                {{html localeString("Validation message password: Password must be different than username")}}
                            </span>
                            <span class="error-message translation-string" data-error="shared secret must be different than password">
                                {{html localeString("Validation message password: Shared secret must be different than password")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be from 8 to 64 symbols">
                                {{html localeString("Validation message password: Password must be from 8 to 64 symbols")}}
                            </span>
                            <span class="error-message translation-string" data-error="invalid characters">
                                {{html localeString("Validation message password: Invalid characters")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must contain at least one digit">
                                {{html localeString("Validation message password: Password must contain at least one digit or a non-alphanumeric character (i.e.: other than digits 0-9 and letters a-z, A-Z)")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must contain at least one letter">
                                {{html localeString("Validation message password: Password must contain at least one letter")}}
                            </span>
                        </div>
                    </div>

                    <div class="table-row disabled-for-superadmin">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("Shared Secret")}}
                            </span>

                        </div>

                        <div class="right vpn_credentials">

                            <div class="block input-container">

                                <input type="password" class="swc-input validatable secret-original" value="${data.shared_secret}" data-default-value="${data.shared_secret}" name="vpn_shared_secret" placeholder="{{html localeString('Define your VPN shared secret')}}">

                                <input type="text" class="swc-input secret-copy validatable" value="${data.shared_secret}" data-default-value="${data.shared_secret}" name="vpn_shared_secret" placeholder="{{html localeString('Define your VPN shared secret')}}">

                                <span class="valid-tick">
                                </span>

                            </div>

                            <div class="block">

                                <div class="swc-checkbox show-secret show-password skip-validation" data-name="showPassword" data-value="false">

                                    <div class="icon">
                                    </div>

                                    <div class="text">

                                        <span class="translation-string">
                                            {{html localeString('Show passwords')}}
                                        </span>
                                    </div>

                                </div>

                            </div>

                            <div class="block block-info">

                                <div class="icons has-popover info vpn-server-password-info" data-popover-template-id="applications:vpn_server:settings:info-icons" data-popover-template-data='{ "component": "VPNServer Shared Secret Info" }' data-popover-placement="top" data-popover-holder=".vpn-server-password-info">
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="validation-message" data-parameter-name="vpn_shared_secret">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="error-message translation-string" data-error="global">
                                {{html localeString("Validation message shared secret: Global shared secret requirements")}}
                            </span>
                            <span class="error-message translation-string" data-error="must contain special character or digit">
                                {{html localeString("Validation message password: Must contain special character or digit")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be from 8 to 64 symbols">
                                {{html localeString("Validation message password: Shared secret must be from 8 to 64 symbols")}}
                            </span>
                            <span class="error-message translation-string" data-error="invalid characters">
                                {{html localeString("Validation message shared secret: Invalid characters")}}
                            </span>
                            <span class="error-message translation-string" data-error="shared key must contain at least one digit">
                                {{html localeString("Validation message shared key: Shared secret must contain at least one digit or a non-alphanumeric character (i.e.: other than digits 0-9 and letters a-z, A-Z)")}}
                            </span>
                            <span class="error-message translation-string" data-error="shared key must contain at least one letter">
                                {{html localeString("Validation message shared key: Shared secret must contain at least one letter")}}
                            </span>
                            <span class="error-message translation-string" data-error="shared secret must be different than password">
                                {{html localeString("Validation message password: Shared Secret must be different than password")}}
                            </span>
                            <span class="error-message translation-string" data-error="shared secret must be different than username">
                                {{html localeString("Validation message password: Shared Secret must be different than username")}}
                            </span>
                        </div>
                    </div>

                </div>

                <div class="text title title-settings-application">
                    <div class="block block-info">
                        <span class="translation-string">{{html localeString("Access settings")}}</span>
                    </div>

                    <div class="block block-info title-settings-application-info">

                                <div class="icons has-popover info vpn-server-access-info" data-popover-template-id="applications:vpn_server:settings:info-icons" data-popover-template-data='{ "component": "VPNServer Access Info" }' data-popover-placement="top" data-popover-holder=".vpn-server-access-info">
                                </div>

                    </div>
                </div>


                <div class="table table-application">

                    <div class="table-row">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("Internet IP-Address")}}
                            </span>

                        </div>

                        <div class="right">

                            <div class="block">

                                <div class="text-block internet-ip-address">
                                {{if data.netStatus.RemoteIPAddress && data.netStatus.RemoteIPAddress !== "0.0.0.0"}}
                                    ${data.netStatus.RemoteIPAddress}
                                {{else}}
                                    <span class="translation-string">{{html localeString("Not Available")}}</span>
                                {{/if}}
                                </div>

                            </div>

                        </div>

                    </div>
                    {{if !data.superAdmin}}
                    <div class="table-row hide-superadmin">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("DynDNS")}}
                            </span>

                        </div>

                        <div class="right">

                            <div class="block">

                                <div class="text-block internet-ip-address">
                                {{if data.swisscomDyndns.get('status') === true}}
                                     <div class="text-block left-block">
                                        ${data.swisscomDyndns.get('hostname')}.internet-box.ch
                                    </div>
                                {{/if}}
                                {{if data.dyndns.get('enable') === true && !_.isUndefined(data.dyndnsProvider)}}
                                    <div class="text-block left-block">
                                        ${data.dyndnsProvider.get('hostname')}
                                    </div>
                                {{/if}}
                                {{if data.swisscomDyndns.get('status') !== true && data.dyndns.get('enable') === false}}
                                    <div class="text-block left-block">
                                        <span class="translation-string">{{html localeString('<a href="#applications/dyndns">Create new account</a>')}}</span>
                                    </div>
                                {{/if}}
                                </div>

                            </div>

                        </div>

                    </div>
                    {{/if}}

                    <div class="table-row">

                        <div class="left">

                            <span class="translation-string">
                                {{html localeString("Protocol")}}
                            </span>

                        </div>

                        <div class="right">

                            <div class="block">

                                <div class="text-block internet-ip-address">L2TP</div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="text highlight-text help-vpn-settings">
                    <div class="icon"></div>
                    {{html localeString("<span>Help for setting up your Smartphone you can find </span><a target='_blank' href='http://www.swisscom.ch/de/privatkunden/hilfe/internaltest/vpn-server.html'>here</a>")}}
                </div>

                <div class="expandable-vpn-clients">
                    <div class="expandable-list">
                        <div class="expandable-list-title">
                            <div class="block name" data-key="name"><span class="translation-string">{{html localeString("Devices which are connected with the %ProductName% VPN Server")}}</span></div>
                            <div class="block connected_for" data-key="type"><span class="translation-string">{{html localeString("Connected for")}}</span></div>
                        </div>
                        <div class="vpnClients">
                        {{each(key, clientValue) data.clients}}
                            <div class="expandable-list-item ${clientValue.id}" data-key="${clientValue.id}">
                                <div class="block ip_address" data-key="name">
                                    <div class="icon"></div>
                                    <div class="ip_address_string">
                                        <span class="translation-string">${clientValue.get('ipAddress')}</span>
                                    </div>
                                </div>
                                <div class="block connected_for" data-key="type">
                                    <div>
                                    <span class="translation-string" style="margin-right: 3px;">${clientValue.get('connectedForCount')}</span><span class="translation-string">{{html localeString(clientValue.get('connectedForType'))}}</span>
                                    </div>
                                </div>
                            </div>
                        {{/each}}
                            <div class="text no-vpn-clients {{if data.clients.length}}hidden{{/if}}" style="margin-top: 10px;">
                                    <span class="translation-string">{{html localeString("There are no clients connected to the VPN Server yet.")}}</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="buttons-container-message tab-buttons-container">

            <div class="client-buttons">

                <a class="button big no-highlighting secondary cancel-changes disabled ">

                    <span class="translation-string">
                        {{html localeString("Cancel")}}
                    </span>

                </a>

                <a class="button big no-highlighting primary save-changes disabled" style="margin-right: 2px;">

                    <span class="translation-string">
                        {{html localeString("Save")}}
                    </span>

                </a>

            </div>

            <div class="save-success">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Your settings have been saved successfully.")}}
                    </span>

                </div>

            </div>

            <div class="save-error">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Your settings could not be saved. Please try again.")}}
                    </span>

                </div>

            </div>

            <div class="save-validation-errors">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Please correct the errors on this page.")}}
                    </span>

                </div>

            </div>
        </div>

    </div>

    <div class="hidden vpnServerOffMessage">
        <div class="text center">
            {{html localeString("VPN Server is not activated.")}}
        </div>
    </div>
</script>

<script id="applications:vpn:clients" type="text/x-jquery-tmpl">
{{each(key, clientValue) clients}}
    <div class="expandable-list-item ${clientValue.id}" data-key="${clientValue.id}">
        <div class="block ip_address" data-key="name">
            <div class="icon"></div>
            <div class="ip_address_string">
                <span class="translation-string">${clientValue.get('ipAddress')}</span>
            </div>
        </div>
        <div class="block connected_for" data-key="type">
            <div>
            <span class="translation-string" style="margin-right: 3px;">${clientValue.get('connectedForCount')}</span><span class="translation-string">{{html localeString(clientValue.get('connectedForType'))}}</span>
            </div>
        </div>
    </div>
{{/each}}
<div class="text no-vpn-clients {{if clients.length}}hidden{{/if}}" style="margin-top: 10px;">
    <span class="translation-string">{{html localeString("There are no clients connected to the VPN Server yet.")}}</span>
</div>
</script>

<script id="app:speedtest" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Measure your Internet-Speed")}}</span></h1>
    </div>
    <div>
        <div class="upper-icons-block">
        </div>
    </div>
    <div class="base-content" style="position:relative;">
       <div class="">
            <div class="text title-application">
                <div class="main-title-link-application">
                    <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
                </div>
                <div class="main-title-link-application title-dot">
                    <span class="translation-string">&#183;</span>
                </div>
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("Speedtest")}}</span>
                </div>
            </div>
            <div class="tabs-content"></div>
       </div>
       <div class="system-diagnostics-speedcheck">
           <div class="inline-blocks bottom-bar">
                <div class="block side-element start-stop-button">
                    <a class="button primary big no-highlighting">
                        <span class="translation-string">{{html localeString("Start Speed-Check")}}</span>
                    </a>
                </div>
                <div class="block progress">
                    <div class="text">
                        <div class="translation-string progress-label">{{html localeString("Homenetwork Speed-Check running")}}</div>
                    </div>
                    <div class="ruler-block">
                        <div class="ruler-container">
                            <div class="ruler">
                                <div class="fill"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script id="applications:dyndns" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Settings for your Swisscom DynDNS")}}</span></h1>
    </div>
    <div>
        <div class="upper-icons-block">
        </div>
    </div>
    <div class="tabs-content base-content">
        <div>
         <div class="text title-application">
            <div class="main-title-link-application">
                <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
            </div>
            <div class="main-title-link-application title-dot">
                <span class="translation-string">&#183;</span>
            </div>
            <div class="main-title-link-application">
                <span class="translation-string">{{html localeString("Swisscom DynDNS")}}</span>
            </div>
        </div>

        <div class="text">
            <span class="translation-string">{{html localeString("DynDNS lets you access your linked devices, even on the move, usinga ﬁxed host name. With Swisscom DynDNS, this service is for free.")}}</span><br>
            <span class="translation-string">{{html localeString("After setting up hostname, you will need to setup a portforwarding for the device you would like to reach from remote.")}}</span>
        </div>

        <div class="inline-blocks">
            <div class="block">
            {{if data.networkStatus !== 'NOT_CONNECTED'}} 
                <div class="swc-checkbox DynDNSState {{if data.dyndns.status === true}} checked {{/if}} validatable" data-value="${data.dyndns.status }" data-default-value="${data.dyndns.status}" data-name="swisscom_dyndns_state">
            {{else}}
                <div class="swc-checkbox DynDNSState validatable" data-value="false" data-default-value="false" data-name="swisscom_dyndns_state">
            {{/if}}
                    <div class="icon"></div>
                    <div class="text"> <span class="translation-string">{{html localeString("Enable Swisscom DynDNS")}}</span>
                    </div>
                </div>
            </div>
            <div class="block block-info">
                <div class="icons has-popover info swisscom-dyndns-info" data-popover-template-id="applications:dyndns:swisscom-dyndns-info" data-popover-placement="top" data-popover-template-data='{ "component": "Swisscom DynDNS Info" }'></div>
            </div>
        </div>


        <div class="separator"></div>
        <div class="dyndns-block {{if data.dyndns.status !== true || data.networkStatus === 'NOT_CONNECTED'}} disabled {{/if}} ">
            <div class="disabled-block">
                <div class="hover-message-overlay {{if data.networkStatus === 'NOT_CONNECTED'}} not-connected{{/if}}">
                {{if data.networkStatus === 'NOT_CONNECTED'}}
                    <div class="hover-message text"> 
                        <span class="translation-string">
                            {{html localeString('There is a problem connecting to Swisscom Dynamic DNS. Check your internet connection')}}
                        </span>
                    </div>
                {{else}}
                    <div class="hover-message text"> 
                        <span class="translation-string">
                            {{html localeString('Swisscom DynDNS is currently disabled')}}
                        </span>
                    </div>
                {{/if}}
                </div>
            </div>
            <div class="dyndns-title"><span class="translation-string">{{html localeString('Swisscom DynDNS Account')}}</span></div>
            <div class="dyndns-add-account" {{if data.dyndns.hostname !== ''}}style="display: none" {{/if}}>
                <div class="text"> 
                    <span class="translation-string">{{html localeString("Please define your DynDNS name. This name will be mapped with your IP address and you can easily access your device with the name")}}</span> 
                </div>
                <div class="table dyndns-settings">
                    <div class="table-row">
                        <div class="left">
                            <span class="translation-string">{{html localeString('Internet IP-address')}}</span>
                        </div>

                        <div class="right ip">
                            <span class="translation-string">${data.externalIP}</span>
                            <div class="icons has-popover info swisscom-dyndns-ip-info" data-popover-template-id="applications:dyndns:swisscom-dyndns-info" data-popover-placement="top"  data-popover-template-data='{ "component": "Internet IP-address Info" }'></div>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="left">
                            <span class="translation-string">{{html localeString('Host name')}}</span>
                        </div>

                        <div class="right hostname">
                            <div class="block input-container">
                                <span style="position:relative">
                                <input class="swc-input validatable host-name" data-default-value="${data.dyndns.hostname}" placeholder="{{html localeString('DynDNS Name')}}" name="host-name" type="text" value="${data.dyndns.hostname}">
                                <span class="valid-tick" style="margin-bottom: -7px"></span></span>.internet-box.ch
                                <div class="icons has-popover info swisscom-dyndns-hostname-info" data-popover-template-id="applications:dyndns:swisscom-dyndns-info" data-popover-placement="top" data-popover-template-data='{ "component": "Swisscom DynDNS hostname Info" }'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="expandable-dyndns" {{if data.dyndns.hostname === ''}} style="display: none" {{/if}}>
                <div class="expandable-list">
                    <div class="expandable-list-title">
                        <div class="block hostname">
                            <span class="translation-string">{{html localeString('Host name')}}</span>
                        </div>

                        <div class="block ipaddress">
                            <span class="translation-string">{{html localeString('Current IP-adress')}}</span>
                        </div>
                    </div>

                    <div class="expandable-list-item" >
                        <div class="block hostname" >
                          {{if data.networkStatus === 'NOT_CONNECTED'}}
                            {{html localeString('Unknown')}}
                          {{else}}
                            ${data.dyndns.hostname}.internet-box.ch
                          {{/if}}
                     </div>

                     <div class="block ipaddress" >
                         {{if data.networkStatus === 'NOT_CONNECTED'}}
                            {{html localeString('Unknown')}}
                         {{else}}
                            ${data.externalIP}
                         {{/if}}
                     </div>
                     <div class="block edit">
                        <div class="icons trash do-delete"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class=
                "button big no-highlighting secondary cancel-changes disabled"><span class="translation-string">
                {{html localeString('Cancel')}}</span></a> <a class=
                "button big no-highlighting primary save-changes disabled"><span class="translation-string">
                {{html localeString('Apply')}}</span></a>
            </div>

            <div class="save-success">
                <div class="icon"></div>

                <div class="text">
                    <span class="translation-string">{{html localeString('Swisscom DynDNS settings are changed successfully')}}</span>
                </div>
            </div>
            <div class="save-connection-error" style="display:none;">
                <div class="icon"></div>

                <div class="text">
                    <span class="translation-string">{{html localeString('Cannot connect into Swisscom DynDNS server')}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="info-messages taken-info" style="display: none;"> 
        <div class="message error taken">
            <div class="icon"></div>
            <span>
                {{html localeString('Host name is already in use. Please choose another one.')}}
            </span>         
        </div>
    </div>
    <div class="info-messages wrong-name-info" style="display: none;"> 
        <div class="message error wrong-name">
            <div class="icon"></div>
            <span>
                {{html localeString('Invalid hostname! Please enter a correct hostname.')}}
            </span>         
        </div>
    </div>
    <div class="info-messages server-error-info" style="display: none;"> 
        <div class="message error server-error">
            <div class="icon"></div>
            <span>
                {{html localeString('Server error.')}}
            </span>         
        </div>
    </div>

</div>
</div>
</script>
 
<script id="applications:speedtest" type="text/x-jquery-tmpl">
    <div class="system-diagnostics-speedcheck">
        <div class="inline-blocks">
            <div class="block">
                <div class="text-block text title">
                    <span class="translation-string">{{html localeString("Speed-Check")}}</span>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover set-ap-state-info"
                     data-popover-template-id="applications:speedtest:info-icons"
                     data-popover-template-data='{ "component": "Speed-Check Info" }'
                     data-popover-placement="right"
                     data-popover-holder=".set-ap-state-info">
                </div>
            </div>
        </div>
        
        <div class="inline-blocks">
            <div class="block description">
                <div class="block">
                    <div class="text">
                        <span class="translation-string">{{html localeString("Speed-Check Info")}}</span>
                    </div>
                </div>
                <div class="inline-blocks left info-text">
                    <div class="block left image mini internet"></div>
                    <span class="translation-string">{{html localeString("from Box to internet")}}</span>
                </div>
                <div class="hide-superadmin inline-blocks left info-text local-test">
                    <div class="block left image mini computer"></div>
                    <span class="translation-string">{{html localeString("from device to Box")}}</span>
                </div>
            </div>
            <div class="block">
                <div class="block image-block">
                    <div class="block image internet" style="margin-bottom: 5px;"></div>
                    <ul class="internet-dots dots">
                        <li>
                            <span class="dot 0">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 1">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 2">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 3">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 4">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 5">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 6">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 7">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 8">&nbsp;</span>
                        </li>
                        <li>
                            <span class="dot 9">&nbsp;</span>
                        </li>
                    </ul>
                    <div class="block image internet-box"></div>
                    <div class="hide-superadmin device-connection local-test">
                        <ul class="device-dots dots">
                            <li>
                                <span class="dot 0">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 1">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 2">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 3">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 4">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 5">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 6">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 7">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 8">&nbsp;</span>
                            </li>
                            <li>
                                <span class="dot 9">&nbsp;</span>
                            </li>
                        </ul>                           
                        <div class="slow-device-connection has-popover set-ap-state-info" style="display: none;"
                             data-popover-template-id="system:diagnostics:speedcheck:warning"
                             data-popover-template-data='{ "component": "Speed-Check Info" }'
                             data-popover-placement="left"
                             data-popover-holder=".set-ap-state-info"
                             data-popover-class-name="warning-popover">
                             i
                        </div>
                    </div>
                    <div class="hide-superadmin local-test">
                        <div class="block image mini wifi" style="margin: auto; height: 25px; display: none;"></div>
                        <div class="block image computer"></div>
                    </div>
                </div>
                <div class="block">
                    <div class="text ping-title device-icon">
                        <span class="translation-string" style="text-transform: uppercase">{{html localeString("Ping")}}</span>
                        <span id="ping" class="odometer ping-value">0</span>
                        <span>ms</span>
                    </div>
                    <div class="text dots">
                        <div class="inline-blocks">
                            <div class="text-block block">
                                <div class="translation-string">{{html localeString("INTERNET SPEED")}}</div>
                            </div>
                            <div class="block">
                                <div class="icons info has-popover set-ap-state-info"
                                     data-popover-template-id="system:diagnostics:speedcheck:info-icons"
                                     data-popover-template-data='{ "component": "Internet Speed Info" }'
                                     data-popover-placement="right"
                                     data-popover-holder=".set-ap-state-info">
                                </div>
                            </div>
                        </div>
                        <div class="block speed-block">
                            <div class="translation-string">{{html localeString("DOWNLOAD")}}</div>
                            <div class="text">
                                <span id="internet-download" class="odometer speed">0</span>
                                <span>{{html localeString("Mbps")}}</span>
                            </div>
                            <div class="translation-string">{{html localeString("UPLOAD")}}</div>
                            <div class="text">
                                <span id="internet-upload" class="odometer speed">0</span>
                                <span>{{html localeString("Mbps")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="text device-icon" style="height: 27px;">
                        &nbsp;
                    </div>
                    <div class="hide-superadmin text dots local-test">
                        <div class="inline-blocks">
                            <div class="text-block block">
                                <div class="translation-string local-title">{{html localeString("HOMENETWORK SPEED")}}</div>
                            </div>
                            <div class="block">
                                <div class="icons info has-popover set-ap-state-info"
                                     data-popover-template-id="system:diagnostics:speedcheck:info-icons"
                                     data-popover-template-data='{ "component": "Device Speed Info" }'
                                     data-popover-placement="right"
                                     data-popover-holder=".set-ap-state-info">
                                </div>
                            </div>
                        </div>
                        <div class="block speed-block">
                            <div class="translation-string">{{html localeString("DOWNLOAD")}}</div>
                            <div class="text">
                                <span id="device-download" class="odometer speed">0</span>
                                <span>{{html localeString("Mbps")}}</span>
                            </div>
                            <div class="translation-string">{{html localeString("UPLOAD")}}</div>
                            <div class="text">
                                <span id="device-upload" class="odometer speed">0</span>
                                <span>{{html localeString("Mbps")}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start sharing your data, please switch the Central Storage on")}}
        </div>
    </div>

    <div class="hidden wanOffMessage">
        <div class="text center">
            {{html localeString("There is no internet connecion.")}}
        </div>
    </div>

    <div class="hidden connectionDNSErrorMessage">
        <div class="text center">
            {{html localeString("The speed test cannot be launched.  Please use another device to launch the test or check the DNS network settings on your computer. In order to use the speed test, the DNS settings assigned by the Internet-Box have to be used.")}}
        </div>
    </div>

    <div class="hidden connectionErrorMessage">
        <div class="text center">
            {{html localeString("The Speedtest could not be started. Please make sure that Applications are enabled.")}}
        </div>
    </div>

    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Central Storage is starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 Min")}}</span>
            </div>
        </div>
    </div>
    
    <div id="flash-content"></div>
    
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Error while speed testing.")}}</span>
        <span class="translation-string">{{html localeString("Please try again.")}}</span>
        <span class="translation-string">{{html localeString("The Speed-Check Server is curently not available.")}}</span>
        <span class="translation-string">{{html localeString("Please try later again.")}}</span>
        <span class="translation-string">{{html localeString("WAN greater 300")}}</span>
        <span class="translation-string">{{html localeString("WAN less 300 greater 100")}}</span>
        <span class="translation-string">{{html localeString("WAN less 100")}}</span>
        <span class="translation-string">{{html localeString("LAN greater 100")}}</span>
        <span class="translation-string">{{html localeString("LAN less 100")}}</span>
        <span class="translation-string">{{html localeString("Internet-Speed check running")}}</span>
        <span class="translation-string">{{html localeString("WLAN Speedcheck running")}}</span>
        <span class="translation-string">{{html localeString("Homenetwork Speed-Check running")}}</span>
        <span class="translation-string">{{html localeString("Ping test is running")}}</span>
        <span class="translation-string">{{html localeString("HOMENETWORK SPEED")}}</span>
        <span class="translation-string">{{html localeString("WLAN SPEED")}}</span>
        <span class="translation-string">{{html localeString("Start Speed-Check")}}</span>
        <span class="translation-string">{{html localeString("Stop Speed-Check")}}</span>
        <span class="translation-string">{{html localeString("Flash plugin error")}}</span>
        <span class="translation-string">{{html localeString("Invalid flash version")}}</span>
        <span class="translation-string">{{html localeString("No flash")}}</span>
        <span class="translation-string">{{html localeString("Another test is in progress.")}}</span>
        <span class="translation-string">{{html localeString("Please try again after test ends.")}}</span>
        <span class="translation-string">{{html localeString("Mbps")}}</span>
        <span class="translation-string">{{html localeString("Speed test server error.")}}</span>
        <span class="translation-string">{{html localeString("Speedtest could not to be started because the speed server is momentarily unavailable. Please try again later.")}}</span>
        <span class="translation-string">{{html localeString("Your browser uses a not supported flash plugin.")}}</span>
        <span class="translation-string">{{html localeString("Speedtest error")}}</span>
        <span class="translation-string">{{html localeString("The Speedtest could not be started.")}}</span>
    </span>
</script>

<script id="core:scheduler:table" type="text/x-jquery-tmpl">
    <div class="schedulers{{if isDisabled}} disabled{{/if}}">
        {{if isDisabled}}
            <div class="showDisabledBackDrop no-highlighting schedulerDisabledOverlay"></div>
            <div class="hover-message-overlay">
                <div class="hover-message text">
                    <span class="translation-string">
                    {{if type === 'wifi'}}
                    {{html localeString("Activate Scheduling to manage access to your WiFi")}}.
                    {{else type === 'storage'}}
                    {{html localeString("Activate Scheduling to manage access to your Central Storage")}}.
                    {{else}}
                    {{html localeString("Activate Scheduling to manage access to Internet")}}.
                    {{/if}}
                    </span>
                </div>
            </div>
        {{/if}}
        {{each(key, value) schedulers}}
        <div class="week-day">
            <div class='text day-name'>
                {{if key === "monday"}}<span class="translation-string">{{html localeString("Mon")}}</span>{{/if}}
                {{if key === "tuesday"}}<span class="translation-string">{{html localeString("Tue")}}</span>{{/if}}
                {{if key === "wednesday"}}<span class="translation-string">{{html localeString("Wed")}}</span>{{/if}}
                {{if key === "thursday"}}<span class="translation-string">{{html localeString("Thu")}}</span>{{/if}}
                {{if key === "friday"}}<span class="translation-string">{{html localeString("Fri")}}</span>{{/if}}
                {{if key === "saturday"}}<span class="translation-string">{{html localeString("Sat")}}</span>{{/if}}
                {{if key === "sunday"}}<span class="translation-string">{{html localeString("Sun")}}</span>{{/if}}
            </div>
            {{if key === currentDay}}
                <div class="time-parent has-popover has-tooltip" style="margin-left: ${currentTimePos}px"
                     data-popover-template-id="core:scheduler:popovers:currenttime"
                     data-popover-template-data='{"currentTime":"${currentTime}"}'
                     data-popover-placement="top"
                     data-popover-holder=".time-parent">
                         <span class="time-element"></span>
                         <span class="time-element timer-current"></span>
                         <span class="time-element"></span>
                     </div>
                <span class="time-element timer-current has-popover has-tooltip"
                      data-popover-template-id="core:scheduler:popovers:currenttime"
                      data-popover-template-data='{"currentTime":"${currentTime}"}'
                      data-popover-placement="top"
                      style="margin-left: ${currentTimePosOverflow}px; margin-top:${currentTimePosOverflowHeight}px;"></span>
            {{/if}}
            <div class="liner ${key}">
                <div class="diap_container has-popover" style="width:${scaleWidth+1}px;"
                     data-popover-template-id="core:scheduler:popovers:addinfo"
                     data-popover-placement="top"
                     data-popover-holder=".scheduler_slick_to_add">
                    {{each value}}
                    <div class='diapazon has-popover has-tooltip' style="left: ${begin}px;"
                        data-popover-template-id="core:scheduler:popovers:timerange"
                        data-popover-template-data= '{"from":"${begin}", "till": "${end}"}'
                        data-popover-placement="top"
                        data-popover-holder=".time_range">
                        <div class="part-empty part-left has-popover has-tooltip"></div>
                        {{if (end-begin) === 9}}
                            <div class="part half modifiers has-popover has-tooltip"
                                data-popover-template-id="core:scheduler:popovers:timerange"
                                data-popover-template-data= '{"from":"${begin}", "till": "${end}"}'
                                data-popover-placement="top"
                                data-popover-holder=".time_range"></div>
                        {{else}}
                            <div class="part modifiers left_part has-popover no-click has-tooltip"
                                 data-popover-template-id="core:scheduler:popovers:timemarker"
                                 data-popover-template-data= '{"left":"${begin}", "action": "on"}'
                                 data-popover-placement="top"
                                 data-popover-holder=".left_part">
                            </div>
                            {{each returnArray((end-begin)/stepWidth-2)}}
                            <div class="part"></div>
                            {{/each}}
                            <div class="part modifiers right_part has-popover no-click has-tooltip"
                                 data-popover-template-id="core:scheduler:popovers:timemarker"
                                 data-popover-template-data='{"left":"${end}", "action": "off"}'
                                 data-popover-placement="top"
                                 data-popover-holder=".right_part">
                            </div>
                        {{/if}}
                        <div class="part-empty part-right has-popover has-tooltip"></div>
                    </div>
                    {{/each}}
                </div>
            </div>
            <div class="delete-icon">
                <div class="icons has-popover trash do-delete has-tooltip ${key}"
                     data-popover-template-id="core:scheduler:popovers:delete"
                     data-popover-placement="top"
                     data-popover-holder=".scheduler_delete">
                 </div>
            </div>
        </div>
        {{/each}}
        <div class="text timer-scale">
             <div class="time-current-parent has-popover has-tooltip" style="margin-left: ${currentTimePos}px"
                     data-popover-template-id="core:scheduler:popovers:currenttime"
                     data-popover-template-data='{"currentTime":"${currentTime}"}'
                     data-popover-placement="top"
                     data-popover-holder=".time-current-parent">
                 <span class="time-element"></span>
                 <span class="time-element current"></span>
                 <span class="time-element"></span>
             </div>
        </div>
        <ul class="text timer">
            <li>0:00</li>
            <li>2:00</li>
            <li>4:00</li>
            <li>6:00</li>
            <li>8:00</li>
            <li>10:00</li>
            <li>12:00</li>
            <li>14:00</li>
            <li>16:00</li>
            <li>18:00</li>
            <li>20:00</li>
            <li>22:00</li>
            <li>24:00</li>
        </ul>
        <div class="legend">
            <div class="inline-blocks">
                <div class="block">
                    <div class="sched_on"></div>
                </div>
                <div class="block">
                    <span class="translation-string">
                        {{if type === 'wifi'}}
                            {{html localeString("WiFi is On")}}
                        {{else type === 'storage'}}
                            {{html localeString("Central Storage is On")}}
                        {{else}}
                            {{html localeString("Internet is On")}}
                        {{/if}}
                    </span>
                </div>
                <div class="block">
                    <div class="sched_off"></div>
                </div>
                <div class="block">
                    <span class="translation-string">
                        {{if type === 'wifi'}}
                            {{html localeString("WiFi is Off")}}
                        {{else type === 'storage'}}
                            {{html localeString("Central Storage is Off")}}
                        {{else}}
                            {{html localeString("Internet is Off")}}
                        {{/if}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="core:scheduler:popovers:timemarker" type="text/x-jquery-tmpl">
    <div class="blocks is-tooltip">
    {{if action === "on"}}
        <span class="translation-string">{{html localeString("On at")}}</span>
    {{else}}
        <span class="translation-string">{{html localeString("Off at")}}</span>
    {{/if}}
    &nbsp;${Math.floor(parseFloat(left)/18)}:{{if Math.floor(parseFloat(left)/18) === parseFloat(left)/18}}00{{else}}30{{/if}}
    </div>
</script>

<script id="core:scheduler:popovers:timerange" type="text/x-jquery-tmpl">
    <div class="blocks is-tooltip">
        &nbsp;${Math.floor(parseFloat(from)/18)}:{{if Math.floor(parseFloat(from)/18) === parseFloat(from)/18}}00{{else}}30{{/if}}
        -
        &nbsp;${Math.floor(parseFloat(till)/18)}:{{if Math.floor(parseFloat(till)/18) === parseFloat(till)/18}}00{{else}}30{{/if}}
    </div>
</script>

<script id="core:scheduler:popovers:delete" type="text/x-jquery-tmpl">
    <div class="blocks is-tooltip">
        <span class="translation-string">{{html localeString("Delete")}}</span>
    </div>
</script>

<script id="core:scheduler:popovers:currenttime" type="text/x-jquery-tmpl">
    <div class="blocks is-tooltip">
        <span class="translation-string">{{html localeString("Current time: %currentTime%", { 'currentTime': currentTime })}}</span>
    </div>
</script>

<script id="core:scheduler:popovers:addinfo" type="text/x-jquery-tmpl">
    <div class="blocks is-tooltip">
        <span class="translation-string">{{html localeString("Click to add time slot")}}</span>
    </div>
</script>

<script id="ruler" type="text/x-jquery-tmpl">
    <div class="ruler-container ${className}">
        <div class="ruler">
            <div class="fill" style="width:0px;">
            </div>
        </div>
    </div>
</script>


<script id="swc-checkbox" class="not-translatable" type="text/x-jquery-tmpl">
    <div class="swc-checkbox {{ if className !== '' }}${className}{{ /if }} {{ if checked }}checked{{ /if }}">
        <div class="icon"></div>
        <div class="text">
            ${text}
        </div>
        <input type="checkbox" {{ if checked }}checked="checked"{{ /if }}>
    </div>
</script>

<script id="swc-switcher" type="text/x-jquery-tmpl">
    <div class="swc-switcher {{ if className !== '' }}${className}{{ /if }} {{ if checked }}checked{{ /if }}">
        <div class="text">
            ${text}
        </div>
        <div class="switcher-container">
            <div class="btn"></div>
            <div class="icon">
                <div class="container">
                    <div class="bg">
                        <span class="translation-string">{{html localeString("On")}}</span>
                        <span class="translation-string">{{html localeString("Off")}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="swc-dropdown" class="not-translatable" type="text/x-jquery-tmpl">
    <div class="swc-dropdown-overlay ${className} no-highlighting" data-class="${className}">
        <ul class="options">
            {{if selectedOption}}
                <li class="option selected" data-key="${selectedOption.value}" data-value="${selectedOption.value}">
                    <span>${selectedOption.name}</span>
                    {{if selectedOption.additionalLabel}}
                        <span>${selectedOption.additionalLabel}</span>
                    {{/if}}
                </li>
            {{else}}
                <li class="option selected" data-key="default-option" data-value="${selectedDefault}">
                    <span>${selectedDefault}</span>
                </li>
            {{/if}}

            {{if optionList}}
                {{each(idx, option) options}}
                    {{if !option.isDefault || (option.isDefault && !hideDefault)}}
                        <li class="option {{if (selectedOption && selectedOption.value === option.value)}}selected-item{{/if}}" data-key="${option.value}" data-value="${option.value}">
                            <span>${option.name}</span>    
                            {{if option.additionalLabel}}
                                <span>${option.additionalLabel}</span>
                            {{/if}}
                        </li>
                    {{/if}}
                {{/each}}
            {{else}}
                {{each(key, option) options}}
                    {{if !option.isDefault || (option.isDefault && !hideDefault)}}
                        <li class="option {{if selectedOption && selectedOption.value === key}}selected-item{{/if}}" data-key="${key}" data-value="${option.value}">
                            <span>${option.name}</span>
                            {{if option.additionalLabel}}
                                <span>${option.additionalLabel}</span>
                            {{/if}}
                        </li>
                    {{/if}}
                {{/each}}
            {{/if}}
        </ul>
    </div>
</script>

<script id="swc-select-option" class="not-translatable" type="text/x-jquery-tmpl">
    <span>${selectedOption.name}</span>
    {{if selectedOption.additionalLabel}}
        <span>${selectedOption.additionalLabel}</span>
    {{/if}}
</script>

<script id="components:expandable-list" type="text/x-jquery-tmpl">
    <div class="expandable-list">
        <div class="expandable-list-title">
            {{each(blockID, blockHTML) titleBlocks}}
                <div class="block ${blockID}" data-key="${blockID}">
                    {{html blockHTML}}
                </div>
            {{/each}}

            <div class="block show-hide">&nbsp;</div>
        </div>

        {{each(key, item) items}}
        <div class="expandable-list-item ${key}" data-key="${key}">
            <div class="blocks">
                {{each(blockID, blockHTML) item.blocks}}
                <div class="block ${blockID}" data-key="${blockID}">
                    {{html blockHTML}}
                </div>
                {{/each}}

                {{if item.isEditAble}}
                <div class="block block-edit">
                    <div class="icons pencil default do-edit"></div>
                    <div class="icons pencil disabled active-edit do-edit"></div>
                </div>
                {{/if}}

                {{if item.isDeleteAble}}
                <div class="block block-delete">
                    <div class="icons trash do-delete"></div>
                </div>
                {{/if}}

                <div class="block show-hide">
                    <div class="show-hidden default">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("Details")}}</span>
                        </div>

                    </div>
                    <div class="show-hidden expanded">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("Hide")}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list-item-hidden">{{html item.hiddenPart }}</div>
        </div>
        {{/each}}
    </div>
</script>

<script id="components:device" type="text/x-jquery-tmpl">
    <div class="device ${device.icon} ${className} ${lastInRow} {{if popoverEnable}}has-popover{{/if}}"
        {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="${popoverPlacement}"
            data-popover-holder=".device[data-macaddress='${device.mac}']"
            data-popover-element=".icon"
            data-popover-container="${popoverContainer}"
        {{/if}}
            data-macaddress="${device.mac}">
            <div class="parental-icon"></div>
            <div class="icon"></div>

            <div class="{{if popoverEnable}}has-popover{{/if}}" {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="${popoverPlacement}"
            data-popover-holder=".device[data-macaddress='${device.mac}']"
            data-popover-element=".name"
            data-popover-container="${popoverContainer}"
        {{/if}}>
        <div class="name popoverName">{{if device.isVPNDevice }}{{html localeString("VPN Remote")}}{{else}}${ device.nameShort }{{/if}}</div>
        </div>
    </div>
</script>

<script id="components:device-dect" type="text/x-jquery-tmpl">
    <div class="device ${device.icon} {{if popoverEnable}}has-popover{{/if}}"
        {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="left"
            data-popover-holder=".device[data-dectid='${device.id}']"
            data-popover-element=".icon"
            data-popover-container="${popoverContainer}"
        {{/if}}
        data-dectid="${device.id}">
    <div class="parental-icon"></div>
    <div class="icon"></div>
    <div class="{{if popoverEnable}}has-popover{{/if}}" 
        {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="left"
            data-popover-holder=".device[data-dectid='${device.id}']"
            data-popover-element=".name"
            data-popover-container="${popoverContainer}"
        {{/if}}>
        <div class="name popoverName">${device.nameDisplay}</div>
    </div>
    </div>
</script>

<script id="components:device-storage" type="text/x-jquery-tmpl">
    <div class="device ${device.type} {{if popoverEnable}}has-popover{{/if}}"
        {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="left"
            data-popover-holder=".device[data-usbid='${device.id}']"
            data-popover-element=".icon"
            data-popover-container="${popoverContainer}"
        {{/if}}
        data-usbid="${device.id}">
        <div class="parental-icon"></div>
        <div class="icon"></div>
        {{if deviceIsSupported}}
            <div class="{{if popoverEnable}}has-popover{{/if}}" 
                {{if popoverEnable}}
                    data-popover-template-id="${popoverTemplateID}"
                    data-popover-template-data="${popoverTemplateData}"
                    data-popover-placement="left"
                    data-popover-holder=".device[data-usbid='${device.id}']"
                    data-popover-element=".name"
                    data-popover-container="${popoverContainer}"
                {{/if}}>
                <div class="name popoverName">${device.label}</div>
            </div>
        {{else}}
            <div class="name">
                <div class="{{if popoverEnable}}has-popover{{/if}}" 
                    {{if popoverEnable}}
                        data-popover-template-id="${popoverTemplateID}"
                        data-popover-template-data="${popoverTemplateData}"
                        data-popover-placement="left"
                        data-popover-holder=".device[data-usbid='${device.id}']"
                        data-popover-element=".translation-string"
                        data-popover-container="${popoverContainer}"
                    {{/if}}>
                    <span class="translation-string popoverName">{{html localeString("Unsupported Device")}}</span>
                </div>
            </div>
        {{/if}}
    </div>
</script>

<script id="components:device-emergency" type="text/x-jquery-tmpl">
    <div class="device backup-stick {{if popoverEnable}}has-popover{{/if}}"
        {{if popoverEnable}}
            data-popover-template-id="${popoverTemplateID}"
            data-popover-template-data="${popoverTemplateData}"
            data-popover-placement="left"
            data-popover-holder=".device[data-usbid='${device.id}']"
            data-popover-element=".icon"
            data-popover-container="${popoverContainer}"
        {{/if}}
        data-usbid="${device.id}">
        <div class="parental-icon"></div>
        <div class="icon"></div>
        <div class="name">
            <div class="{{if popoverEnable}}has-popover{{/if}}" 
                    {{if popoverEnable}}
                        data-popover-template-id="${popoverTemplateID}"
                        data-popover-template-data="${popoverTemplateData}"
                        data-popover-placement="left"
                        data-popover-holder=".device[data-usbid='${device.id}']"
                        data-popover-element=".translation-string"
                        data-popover-container="${popoverContainer}"
                    {{/if}}>
                    <span class="translation-string popoverName">{{html localeString("Internet Emergency Stick")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="popover:loading" class="not-translatable" type="text/x-jquery-tmpl">
    <div class="loading">
        <img src="/static/images/loader.gif">
    </div>
</script>

<script id="developers" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1> Developers Info </h1>
        </div>
    </div>

    <div class="base-content tabs-content">
        <div class="text">
            Image configuration information is available on this page.
        </div>

        <div class="separator"></div>

        <div class="text jenkins-info-block">
            <span class="text title">
                <div class="block">
                    <div class="text-block">
                        General Image Info:
                    </div>
                </div>
            </span>
        </div>

        <div class="table">
            <div class="table-row">
                <div class="left">
                    <div class="block">
                        <div class="text-block">
                            Software Version:
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.jenkins["SW version"]}
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row">
                <div class="left">
                    <div class="block">
                        <div class="text-block">
                            Build Configuration:
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.jenkins["build configuration"]}
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row">
                <div class="left">
                    <div class="block">
                        <div class="text-block">
                            Image Created:
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.jenkins["Image created"]}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="separator"></div>

        <div class="inline-blocks jenkins-info-block">
            <div class="text">
                <span class="text title">
                    Build Jobs Info:
                </span>
            </div>
            <div class="text">
                You can see list of jenkins jobs, which were used to create this image:
            </div>
        </div>

        <div class="jobs-list">
            <div class="expandable-list" data-key="jobs-list">
                <div class="expandable-list-title">
                    <div class="block job-name">
                        Job Name
                    </div>
                    <div class="block build-number">
                        Build Number
                    </div>
                    <div class="block git-repositories">
                        Git Repositories
                    </div>
                    <div class="block show-hide">&nbsp;</div>
                </div>
                <div class="jobs">
                    {{each(key, job) data.jenkins.jobs}}
                        <div class="expandable-list-item" data-key="${key}">

                            <div class="block job-name">
                                <span class="text">
                                    ${job["job name"]}
                                </span>
                            </div>

                            <div class="block build-number">
                                # ${job["build number"]}
                            </div>

                            <div class="block git-repositories">
                                {{each(keyRepository, repository) job["git repositories"]}}
                                    <div class="git-repository {{if keyRepository == 0}} first {{/if}}">
                                        <div class="row">
                                            <div class="title">
                                                Branch:
                                            </div>
                                            <div class="value">
                                                ${repository["branch"]}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="title">
                                                Revision:
                                            </div>
                                            <div class="value">
                                                ${repository["revision"]}
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="title">
                                                SSH:
                                            </div>
                                            <div class="value">
                                                ${repository["ssh"]}
                                            </div>
                                        </div>
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</script>
<script id="login-layout:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "From 8 to 16 char" }}
        <span class="translation-string">{{html localeString("Your Password must be from 8 to 16 characters long and should contain at list one digit(0-9), full stop(.), hyphen(-) or underscore(_).")}}</span>
        {{/if}}
    </div>
</script>

<!-- Global Login layout -->
<script id="login-layout" type="text/x-jquery-tmpl">
    <div class="top-panel"></div>

    <div class="table logo-language">
        <div class="table-row">
            <div class="left block-logo">
                <div class="logo"></div>
            </div>
            <div class="right block-locale">
                <div class="swc-dropdown locale-selector disable-gradient" data-class="locale-selector" data-value="" data-selected="">
                    <div class="selected-option"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div id="current-page" class="current-page"></div>
    </div>

    <div class="bottom-panel">
        <div class="panel-content">
            <div class="text-block links">
                <div class="text-link">
                     <a href="{{html staticPagesLinks.legal}}" target="_blank">{{html localeString("Legal Aspects")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.openSource}}" target="_blank">{{html localeString("Open Source")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.imprint}}" target="_blank">{{html localeString("Imprint")}}</span></a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.contact}}" target="_blank">{{html localeString("Contact")}}</a>
                </div>
            </div>
            <div class="text-block copyright">
                <span>&copy; {{html localeString("Swisscom AG")}} 2015</span>
            </div>
        </div>
    </div>
</script>

<!-- Login View -->
<script id="login" type="text/x-jquery-tmpl">
    <div class="label-image"></div>

    <span class="text title">{{html localeString("Gateway Login")}}</span>

    <div class="field-container">
        <span class="text-label">{{html localeString("Gateway User Name")}}</span>
        <input type="text" value="admin" class="swc-input disabled" disabled name="login-name">
    </div>

    <div class="field-container" style="margin-top: 5px;">
        <span class="text-label">{{html localeString("Gateway Password")}}</span>
        <div class="login-password">
            <input type="password" value="" class="swc-input" name="login-password">
            <input type="text" value="" class="swc-input" style="display: none;" name="login-password-copy">
        </div>
        <div class="swc-checkbox display-password">
            <div class="icon"></div>
            <div class="text">{{html localeString("Show Password")}}</div>
        </div>
    </div>

    <div class="info-messages">
        <div class="message error brute-force">
            <div class="icon"></div>
            <div>
                <span style="display:inline-block;">{{html localeString("Too many failed login attempts, wait ")}}</span>
                <span style="display:inline-block;"></span>
                <span style="display:inline-block;">{{html localeString(" seconds.")}}</span>
            </div>
        </div>
        <div class="message error login">
            <div class="icon"></div>
            <span>{{html localeString("Login or password is incorrect")}}</span>
        </div>
        <div class="message error login-device">
            <div class="icon"></div>
            <span>{{html localeString("Unable establish connection to the device")}}</span>
        </div>
        <div class="message info logout">
            <div class="icon"></div>
            <span>{{html localeString("You have successfully logged out")}}</span>
        </div>
        <div class="message warning session-expired">
            <div class="icon"></div>
            <span>{{html localeString("Your session has expired. Please re-login")}}</span>
        </div>
        <div class="message warning both-fields-required">
            <div class="icon"></div>
            <span>{{html localeString("Both fields are required")}}</span>
        </div>
    </div>

    <div class="buttons" style="line-height: 0.0;">
        {{if data.recoveryEnable}}
        <div class="recover-pass-block disabled-for-superadmin">
            <span class="text-label">{{html localeString("First time login or forgotten your Gateway Password?")}}</span>
        </div>
        {{else}}
        <div class="recover-pass-block disabled-for-superadmin">
            <span class="text-label">{{html localeString("Forgot your password?")}}</span>
        </div>
        {{/if}}
        <div class="buttons-container">
            {{if data.recoveryEnable}}<a name="restore-button" class="button secondary disabled-for-superadmin">{{html localeString("Get access here")}}</a>
            {{else}}
                <div class="recover-pass-block disabled-for-superadmin">
                    <span class="text-label" style="display:inline;">{{html localeString("Look it up in the Swisscom </span><a href='support site in appropriate language URL' target='_blank' style='display:inline;'>customer center</a>")}}
                </div>
            {{/if}}
            <a name="login-button" class="button primary big no-highlighting">{{html localeString("Log In")}}</a>
        </div>
    </div>
</script>

<script id="network:settings:port-forwarding:expandable-list" type="text/x-jquery-tmpl">
    {{each(key, rule) rules}}
        {{if rule.destinationIPAddress !== '0.0.0.0' && !rule.isInRestrictedPorts}}
            <div class="expandable-list-item" data-key="${key}">
                <div class="block activate-service">
                    <div class="swc-checkbox enable-service {{if rule.enable}}checked{{/if}}" data-value="{{if rule.enable}}true{{else}}false{{/if}}" data-name="${key}">
                        <div class="icon"></div>
                        <div class="text service-name state-default">
                            ${rule.description}
                        </div>
                    </div>
                    <div class="state-default entry-port">
                        {{html localeString("Entry Port")}}:
                        {{if rule.externalPort[1]}}
                            ${rule.externalPort[0]} <span class="translation-string">{{html localeString("to")}}</span> ${rule.internalPort[1]}
                        {{else}}
                            ${rule.externalPort[0]}
                        {{/if}}
                    </div>
                </div>

                <div class="block protocol">
                    <div class="protocol-type state-default">
                        ${rule.protocolName}
                    </div>
                </div>

                <div class="block needed-by-device">
                    <div class="device-name state-default">
                        ${rule.deviceRealName}
                    </div>
                    <div class="state-default destination-port">
                        {{html localeString("Destination Port")}}:
                        {{if rule.internalPort[1]}}
                            ${rule.internalPort[0]} <span class="translation-string">{{html localeString("to")}}</span> ${rule.internalPort[1]}
                        {{else}}
                            ${rule.internalPort[0]}
                        {{/if}}
                    </div>
                </div>

                <div class="block block-delete">
                    <div class="icons pencil do-custom-edit"></div>
                    <div class="icons trash do-delete"></div>
                </div>

                <div class="block block-delete-process">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
        {{/if}}
    {{/each}}
</script>

<script id="network:settings:ipv6-firewall:expandable-list" type="text/x-jquery-tmpl">
    {{each(key, rule) rules}}
        <div class="expandable-list-item" data-key="${key}">
            <div class="block activate-service">
                <div class="swc-checkbox enable-service {{if rule.Enable}}checked{{/if}}"
                  data-value="{{if rule.Enable}}true{{else}}false{{/if}}" data-name="${key}">
                    <div class="icon"></div>
                    <div class="text service-name state-default">${rule.Description}</div>
                </div>
            </div>

            <div class="block protocol">
                <div class="protocol-type state-default">
                    ${rule.protocolName}
                </div>
            </div>

            <div class="block port">
                <div class="port-type state-default">
                    {{if rule.destPort[1]}}
                        ${rule.destPort[0]} <span class="translation-string">{{html localeString("to")}}</span> ${rule.destPort[1]}
                    {{else}}
                        ${rule.destPort[0]}
                    {{/if}}
                </div>
            </div>

            <div class="block rule-policy">
                <div class="policy-type state-default">
                    ${rule.actionName}
                </div>
            </div>

            <div class="block block-delete">
                <div class="icons pencil do-custom-edit"></div>
                <div class="icons trash do-delete"></div>
            </div>

            <div class="block block-delete-process">
                <img src="/static/images/loader.gif">
            </div>
        </div>
    {{/each}}
</script>

<script id="network:settings:ip-settings:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Gateway IP Address" }}
            <span class="translation-string">{{html localeString("Gateway IP Address Info Popup")}}</span>
        {{/if}}

        {{if component === "Netmask" }}
            <span class="translation-string">{{html localeString("Netmask Info Popup")}}</span>
        {{/if}}
        
        {{if component === "Central Storage IP Address" }}
            <span class="translation-string">{{html localeString("Central Storage IP Address Info Popup")}}</span>
        {{/if}}

        {{if component === "Enable IP Address Distribution (DHCP)" }}
            <span class="translation-string">{{html localeString("Enable IP Address Distribution Info Popup")}}</span><br/>
        {{/if}}

        {{if component === "Enable IP Passthrough" }}
            <span class="translation-string">{{html localeString("enable ip passthrough info popup")}}</span>
        {{/if}}

        {{if component === "Assign Static IP" }}
            <span class="translation-string">{{html localeString("Assign Static IP popup")}}</span>
        {{/if}}

    </div>
</script>

<script id="network:settings:ip-settings:warning-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Network Settings has been changed")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
            {{if data.messageID === '1_ip' || data.messageID === '2_mask'}}
                {{html localeString("You have changed your network settings. To make sure that all your network devices like computer, tablet or a Swisscom TV-Box still can reach the Internet, you need to reboot all your devices.")}}
            {{else data.messageID === '3_lease_ip'}}
                {{html localeString("In order to apply changes, you need to reboot or reconnect your device to the %ProductName%.")}}
            {{/if}}
        </span>
        {{if data.messageID === '1_ip'}}
        <div class="ip-adress-changing-label">
            {{html localeString("Please wait, %ProductName% is changing IP address...")}}
        </div>
        {{/if}}
    </div>

    <div class="modal-buttons">
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="network:settings:ip-settings:addstaticlease-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Static lease added")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
             {{html localeString("Static lease added for device %deviceIP%", { 'deviceIP': data.deviceIP })}}
        </span>
    </div>

    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="network:settings:port-forwarding:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Enable Automatic Port Forwarding" }}
            <span class="translation-string">{{html localeString("Enable Automatic Port Forwarding Info Popup")}}</span>
        {{/if}}

        {{if component === "Entry ports Single or Range mode toggle" }}
            <span class="translation-string">{{html localeString("Entry ports Single or Range mode toggle")}}</span>
        {{/if}}

        {{if component === "Destination ports Single or Range mode toggle" }}
            <span class="translation-string">{{html localeString("Destination ports Single or Range mode toggle")}}</span>
        {{/if}}

        {{if component === "Protocol type" }}
            <span class="translation-string">{{html localeString("Protocol type")}}</span>
        {{/if}}

        {{if component === "Device selection" }}
            <span class="translation-string">{{html localeString("Device selection")}}</span>
        {{/if}}
    </div>
</script>

<script id="network:settings:dyndns:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        <span class="translation-string">{{html localeString("Enable DynDNS Info Popup")}}</span>
    </div>
</script>

<script id="network:settings:ipv6-firewall:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate IPv6" }}
            <span class="translation-string">{{html localeString("Activate IPv6 Info Popup")}}</span>
        {{/if}}

        {{if component === "Security Level Off" }}
            <span class="translation-string">{{html localeString("Security Level Off Info Popup")}}</span>
        {{/if}}

        {{if component === "Security Level Balanced" }}
            <span class="translation-string">{{html localeString("Security Level Balanced Info Popup")}}</span>
        {{/if}}

        {{if component === "Security Level Strict" }}
            <span class="translation-string">{{html localeString("Security Level Strict Info Popup")}}</span>
        {{/if}}

        {{if component === "Security Level Custom" }}
            <span class="translation-string">{{html localeString("Security Level Custom Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="network:settings:ipv6-firewall:rules-list:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Default behaviour" }}
            <span class="translation-string">{{html localeString("Default behaviour Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="network:backup:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="network:devices:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="network:devices:ip-conflict" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{html localeString("At least two of your connected devices use the same IP address. Please make sure that you have not setup any fixed IP addresses on the affected devices. ")}}
    </div>
</script>


<script id="network" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Generic Device")}}</span>
        <span class="translation-string">{{html localeString("Miscellaneous")}}</span>
        <span class="translation-string">{{html localeString("Unrecognized device")}}</span>
        <span class="translation-string">{{html localeString("Computer")}}</span>
        <span class="translation-string">{{html localeString("Laptop")}}</span>
        <span class="translation-string">{{html localeString("TV Box")}}</span>
        <span class="translation-string">{{html localeString("Mobile Phone")}}</span>
        <span class="translation-string">{{html localeString("iPad")}}</span>
        <span class="translation-string">{{html localeString("Tablet")}}</span>
        <span class="translation-string">{{html localeString("IP Radio")}}</span>
        <span class="translation-string">{{html localeString("IP-Phone")}}</span>
        <span class="translation-string">{{html localeString("IP Camera")}}</span>
        <span class="translation-string">{{html localeString("Imaging")}}</span>
        <span class="translation-string">{{html localeString("Wireless device")}}</span>
        <span class="translation-string">{{html localeString("Wireless Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Wireless Repeater")}}</span>
        <span class="translation-string">{{html localeString("Game Console")}}</span>
        <span class="translation-string">{{html localeString("Set-Top Box")}}</span>
        <span class="translation-string">{{html localeString("Printer")}}</span>
        <span class="translation-string">{{html localeString("Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Homeplug")}}</span>
        <span class="translation-string">{{html localeString("Network Storage")}}</span>
		<span class="translation-string">{{html localeString("Guest-5GHz")}}</span>
		<span class="translation-string">{{html localeString("Guest-2.4GHz")}}</span>
    </span>
</script>

<script id="network:settings" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1>
            <span class="translation-string">{{html localeString("Manage Network Settings")}}</span>
        </h1>
    </div>
    <ul class="page-tabs">
        <li class="tab-ip-settings first standard-mode-tab-last tab">
            <a href="#network/settings/ip-settings">
                <span class="translation-string">{{html localeString("IP Settings")}}</span>
            </a>
        </li>
        <li class="tab-port-forwarding hide-starlink expert-mode-only tab">
            <a href="#network/settings/port-forwarding">
                <span class="translation-string">{{html localeString("Port Forwarding")}}</span>
            </a>
        </li>
        <li class="tab-dyndns hide-starlink tab expert-mode-only disabled-for-superadmin">
            <a href="#network/settings/dyndns">
                <span class="translation-string">{{html localeString("DynDNS")}}</span>
            </a>
        </li>
        <li class="tab-ipv6-firewall hide-starlink last tab expert-mode-only">
            <a href="#network/settings/ipv6-firewall">
                <span class="translation-string">{{html localeString("IPv6 Firewall")}}</span>
            </a>
        </li>

        <div class="tabs-content"></div>
    </ul>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Allow inbound/Block outbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound/Allow outbound")}}</span>
        <span class="translation-string">{{html localeString("Allow inbound and outbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound and outbound")}}</span>
        <span class="translation-string">{{html localeString("Allow inbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound")}}</span>
        <span class="translation-string">{{html localeString("Allow outbound")}}</span>
        <span class="translation-string">{{html localeString("Block outbound")}}</span>
    </span>
    <!-- - - - - - - - - - - - - -->
</script>

<script id="network:settings:ip-settings" type="text/x-jquery-tmpl">
    <div class="tab-content-container">

        <div class="table gateway-settings">

            <div class="table-row">
                <div class="left">
                     <span class="translation-string">{{html localeString("Gateway IP Address")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <input type="text" value="${data.Address}" class="swc-input validatable ip-address characters-filter"
                               data-default-value="${data.Address}" name="Address">
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info gateway-settings-info"
                             data-popover-template-id="network:settings:ip-settings:info-icons"
                             data-popover-template-data='{ "component": "Gateway IP Address" }'
                             data-popover-placement="top"
                             data-popover-holder=".gateway-settings-info"></div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="Address">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
                        {{html localeString("Validation message IP Address: Invalid IPv4 address format")}}
                    </span>

                    <!-- Subnet messages -->
                    <span class="error-message translation-string" data-error="Bad netmask">
                        {{html localeString("Your netmask is invalid. Please change it first.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Non-private subnet">
                        {{html localeString("Validation message IP Address: IP Address must be in the private network range (192.168.x.x, 10.x.x.x, 172.16.x.x - 172.32.x.x )")}}
                    </span>
                    <span class="error-message translation-string" data-error="The subnetmask does not fit to the ip range">
                        {{html localeString("Validation message IP Address: The subnetmask does not fit to the ip range.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match broadcast">
                        {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match subnet">
                        {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.128.0.0/16 is used for guest wlan">
                        {{html localeString("Validation message IP Address: Subnet 10.128.0.0/16 is used for guest wlan")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.129.0.0/16 is used for internal purposes">
                        {{html localeString("Validation message IP Address: Subnet 10.129.0.0/16 is used for internal purposes")}}
                    </span>

                    <!-- DHCP messages -->
                    <span class="error-message translation-string" data-error="DHCP Subnet doesnt match">
                        {{html localeString("Validation message IP Address: DHCP address range does not fit allowed network addresses")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                        {{html localeString("Validation message DHCPSettings: IPv4 address within DHCP range")}}
                    </span>

                </div>
            </div>

            <div class="table-row">
                <div class="left">
                     <span class="translation-string">{{html localeString("Subnet Mask")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <input type="text" value="${data.Netmask}" class="swc-input validatable ip-address characters-filter"
                               data-default-value="${data.Netmask}" name="Netmask">
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info netmask-settings-info"
                             data-popover-template-id="network:settings:ip-settings:info-icons"
                             data-popover-template-data='{ "component": "Netmask" }'
                             data-popover-placement="top"
                             data-popover-holder=".netmask-settings-info"></div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="Netmask">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid Netmask format">
                        {{html localeString("Validation message Netmask: Invalid Netmask Format")}}
                    </span>

                    <!-- Subnet messages -->
                    <span class="error-message translation-string" data-error="Non-private subnet">
                        {{html localeString("Validation message IP Address: IP Address must be in the private network range (192.168.x.x, 10.x.x.x, 172.16.x.x - 172.32.x.x )")}}
                    </span>
                    <span class="error-message translation-string" data-error="The subnetmask does not fit to the ip range">
                        {{html localeString("Validation message IP Address: The subnetmask does not fit to the ip range.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match broadcast">
                        {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match subnet">
                        {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.128.0.0/16 is used for guest wlan">
                        {{html localeString("Validation message IP Address: Subnet 10.128.0.0/16 is used for guest wlan")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.129.0.0/16 is used for internal purposes">
                        {{html localeString("Validation message IP Address: Subnet 10.129.0.0/16 is used for internal purposes")}}
                    </span>

                    <!-- DHCP messages -->
                    <span class="error-message translation-string" data-error="DHCP Subnet doesnt match">
                        {{html localeString("Validation message IP Address: DHCP address range does not fit allowed network addresses")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                        {{html localeString("Validation message DHCPSettings: IPv4 address within DHCP range")}}
                    </span>
                </div>
            </div>
            
            <div class="table-row hide-starlite hide-starlink" style="margin-top: 20px;">
                <div class="left">
                     <span class="translation-string">{{html localeString("Central Storage IP Address")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <input type="text" value="${data.APAddress}" class="swc-input validatable ip-address characters-filter"
                               data-default-value="${data.APAddress}" name="APAddress">
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info gateway-settings-info"
                             data-popover-template-id="network:settings:ip-settings:info-icons"
                             data-popover-template-data='{ "component": "Central Storage IP Address" }'
                             data-popover-placement="top"
                             data-popover-holder=".gateway-settings-info"></div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="APAddress">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
                        {{html localeString("Validation message IP Address: Invalid IPv4 address format")}}
                    </span>
                    
                    <span class="error-message translation-string" data-error="Address already used">
                        {{html localeString("Validation message IP Address: Address already used")}}
                    </span>

                    <!-- Subnet messages -->
                    <span class="error-message translation-string" data-error="Bad netmask">
                        {{html localeString("Your netmask is invalid. Please change it first.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Non-private subnet">
                        {{html localeString("Validation message IP Address: IP Address must be in the private network range (192.168.x.x, 10.x.x.x, 172.16.x.x - 172.32.x.x )")}}
                    </span>
                    <span class="error-message translation-string" data-error="IP addresses do not match">
                        {{html localeString("The IP address of Application Part does not match Internet-Box IP address.")}}
                    </span>
                    <span class="error-message translation-string" data-error="The subnetmask does not fit to the ip range">
                        {{html localeString("Validation message IP Address: The subnetmask does not fit to the ip range.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match broadcast">
                        {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match subnet">
                        {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.128.0.0/16 is used for guest wlan">
                        {{html localeString("Validation message IP Address: Subnet 10.128.0.0/16 is used for guest wlan")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.129.0.0/16 is used for internal purposes">
                        {{html localeString("Validation message IP Address: Subnet 10.129.0.0/16 is used for internal purposes")}}
                    </span>

                    <!-- DHCP messages -->
                    <span class="error-message translation-string" data-error="DHCP Subnet doesnt match">
                        {{html localeString("Validation message IP Address: DHCP address range does not fit allowed network addresses")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                        {{html localeString("Validation message DHCPSettings: IPv4 address within DHCP range")}}
                    </span>
                </div>
            </div>
        </div>

        <div class="separator"></div>

        <div class="inline-blocks dhcp-settings-title">
            <div class="block">
                <div class="swc-checkbox {{if data.DHCPState}}checked{{/if}} DHCPEnable validatable"
                     data-value="{{if !data.DHCPState}}false{{else}}true{{/if}}"
                     data-default-value="{{if !data.DHCPState}}false{{else}}true{{/if}}"
                     data-name="DHCPEnable">
                    <div class="icon"></div>
                    <div class="text">
                        <span class="translation-string">{{html localeString("Enable IP Address Distribution (DHCP)")}}</span>
                    </div>
                </div>
            </div>
            <div class="block block-info">
                <div class="icons has-popover info dhcp-settings-info"
                     data-popover-template-id="network:settings:ip-settings:info-icons"
                     data-popover-template-data='{ "component": "Enable IP Address Distribution (DHCP)", "subnetMask": "${data.Netmask}", "subnetRange": "${data.AddressRange}" }'
                     data-popover-placement="top"
                     data-popover-holder=".dhcp-settings-info"></div>
            </div>
        </div>

        <div class="table dhcp-settings">
            <div class="table-row">
                <div class="left">
                     <span class="translation-string">{{html localeString("DHCP IP Range from")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <input type="text" value="${data.DHCPMin}" {{if !data.DHCPState}}disabled{{/if}}
                               class="swc-input validatable {{if !data.DHCPState}}disabled skip-validation{{/if}} ip-address range-from characters-filter"
                               data-default-value="${data.DHCPMin}" name="DHCPRange">
                    </div>
                    <div class="block">
                        <div class="text-block"><span class="translation-string">{{html localeString("to")}}</span></div>
                    </div>
                    <div class="block">
                       <input type="text" placeholder="" value="${data.DHCPMax}" {{if !data.DHCPState}}disabled{{/if}}
                                   class="swc-input validatable {{if !data.DHCPState}}disabled skip-validation{{/if}} ip-address range-to characters-filter"
                                   data-default-value="${data.DHCPMax}" name="DHCPRange">
                    </div>
                </div>
            </div>
        </div>

        <div class="validation-message dhcp-setting" data-parameter-name="DHCPRange">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
                    {{html localeString("Validation message DHCPSettings: invalid IPv4 address format")}}
                </span>

                <!-- DHCP messages -->
                <span class="error-message translation-string" data-error="Bad netmask">
                        {{html localeString("Your netmask is invalid. Please change it first.")}}
                    </span>
                <span class="error-message translation-string" data-error="DHCP Subnet doesnt match">
                    {{html localeString("Validation message IP Address: DHCP address range does not fit allowed network addresses")}}
                </span>
                <span class="error-message translation-string" data-error="Incorrect DHCP range">
                        {{html localeString("Validation message DHCPSettings: Incorrect DHCP address range")}}
                    </span>
                <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                    {{html localeString("Validation message DHCPSettings: IPv4 address within DHCP range")}}
                </span>
            </div>
        </div>

        <div class="expert-mode-only">
            <div class="inline-blocks static-ip-header">
                <div class="block static-ip-title">
                    <span class="translation-string">
                        {{html localeString("Assign Static IP Address to selected devices in your Network")}}
                    </span>
                </div>
                <div class="block block-info">
                    <div class="icons has-popover info static-ip-info"
                         data-popover-template-id="network:settings:ip-settings:info-icons"
                         data-popover-template-data='{"component": "Assign Static IP"}'
                         data-popover-placement="top"
                         data-popover-holder=".static-ip-info"></div>
                </div>
            </div>

            <input type="hidden" value="hidden" data-default-value="hidden"
            name="DHCPLeaseEditFlag" class="swc-input validatable edit-form-flag"/>
            <div class="expandable-static-ip">
                <div class="expandable-list dhcp-leases-list{{if !data.DHCPState}} disabled{{/if}}" data-key="dhcp-leases-list">
                    <div class="hover-message-overlay{{if data.DHCPState}} disabled{{/if}}">
                        <div class="hover-message text">
                            <span class="translation-string">
                                {{html localeString("To manage Static IP Addresses, please enable IP Address Distribution(DHCP)")}}.
                            </span>
                        </div>
                    </div>
                    <div class="expandable-list-title">
                        <div data-key="lease-name" class="block lease-name">
                            <span class="translation-string">
                                {{html localeString("Device Name")}}
                            </span>
                        </div>
                        <div data-key="macaddress" class="block lease-mac-address">
                            <span class="translation-string">
                                {{html localeString("Mac Address")}}
                            </span>
                        </div>
                        <div data-key="ip-address" class="block lease-ip-address">
                            <span class="translation-string">
                                {{html localeString("Static IP Address")}}
                            </span>
                        </div>
                        <div data-key="actions" class="block lease-actions">
                            <span class="translation-string">
                                {{html localeString("Actions")}}
                            </span>
                        </div>
                        <div class="block show-hide">&nbsp;</div>
                    </div>
                    <div class="leases">
                        {{each(key, lease) data.DHCPLeases}}
                            <div class="expandable-list-item {{if lease.device.hasConflict}}conflict{{/if}}" data-key="${key}">
                                <div class="block lease-name">
                                    <div class="lease-name state-default ${lease.device.statusClass}">
                                        <div class="connection ${lease.device.interfaceType}"></div>
                                        <div class="device small ${lease.device.icon} ${lease.device.statusClass}">
                                            <div class="icon"></div>
                                        </div>
                                        <div class="block lease-device-name">
                                            ${lease.device.name}
                                        </div>
                                    </div>

                                    <div class="lease-name state-edit">
                                        <div class="swc-dropdown dhcplease-device-selection lease-edit validatable skip-validation"
                                            data-name="DHCPLeaseEditedDevice" data-class="dhcplease-device-selection-${key}" data-selected=""
                                            data-value="" data-edited-lease="${key}">
                                            <div class="selected-option">
                                                <span class="translation-string">${lease.device.name}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="block lease-mac-address">
                                    <div class="lease-mac-address state-default">
                                        ${lease.MACAddress}
                                    </div>
                                    <div class="lease-mac-address state-edit">
                                        <input type="text" placeholder="" value="${lease.MACAddress}"
                                           class="swc-input disabled lease-edit validatable mac-address skip-validation"
                                           data-default-value="${lease.MACAddress}"
                                           data-edited-lease="${key}" disabled name="DHCPLeaseEditedMacAddress">
                                    </div>
                                </div>

                                <div class="block lease-ip-address">
                                    <div class="lease-ip-address state-default">
                                        ${lease.IPAddress}
                                    </div>
                                    <div class="lease-ip-address state-edit">
                                        <input type="text" placeholder="" value="${lease.IPAddress}"
                                           class="swc-input validatable lease-ip-address lease-edit characters-filter skip-validation"
                                           data-default-value="${lease.IPAddress}" data-edited-lease="${key}"
                                           data-characters-regexp="^[0-9]*[\b]*\.*$" name="DHCPLeaseIPAddress">
                                    </div>
                                </div>

                                <div class="block lease-actions">
                                    <div class="icons pencil do-edit"></div>
                                    <div class="icons trash do-delete"></div>
                                </div>

                                <div class="block block-delete-process">
                                    <img src="/static/images/loader.gif">
                                </div>
                            </div>
                        {{/each}}
                        <div class="expandable-list-item new-dhcplease-form" data-key="newItem">
                            <div class="block lease-name">
                                <div class="lease-name state-default">
                                    <div class="swc-dropdown dhcplease-device-selection validatable skip-validation"
                                      data-name="DHCPLeaseNewDevice" data-class="dhcplease-device-selection" data-selected="" data-value="">
                                        <div class="selected-option">
                                            <span class="translation-string">{{html localeString("Choose a Device")}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="block lease-mac-address">
                                <div class="lease-mac-address">
                                    <input type="text" placeholder="" value=""
                                           class="swc-input disabled validatable mac-address skip-validation"
                                           data-default-value="" disabled name="DHCPLeaseMacAddress">
                                </div>
                            </div>

                            <div class="block lease-ip-address">
                                <div class="lease-ip-address">
                                    <input type="text" placeholder="" value=""
                                           class="swc-input validatable lease-ip-address characters-filter skip-validation"
                                           data-default-value="" name="DHCPLeaseIPAddress">
                                </div>
                            </div>

                            <div class="block lease-actions">

                            </div>
                        </div>
                        <div class="validation-message" data-parameter-name="DHCPLeaseIPAddress">
                            <div class="icon"></div>
                            <div class="text">
                                <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
                                    {{html localeString("Validation message IP Address: invalid IPv4 address format")}}
                                </span>
                                <span class="error-message translation-string" data-error="IPv4 Address is outside of allowed host addresses range">
                                    {{html localeString("Validation message IP Address: IPv4 Address is outside of allowed host addresses range")}}
                                </span>
                                <span class="error-message translation-string" data-error="Invalid IPv4 Address Format Custom">
                                    {{html localeString("Validation message IP Address: doesn`t match 192.168.[0-255].[1-254]")}}
                                </span>
                                <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                                    {{html localeString("Validation message IP Address: IPv4 address within DHCP range")}}
                                </span>
                                <span class="error-message translation-string" data-error="IPv4 Address Already in use">
                                    {{html localeString("Ip Address already in use")}}
                                </span>
                                <span class="error-message translation-string" data-error="Not match broadcast">
                                    {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
                                </span>
                                <span class="error-message translation-string" data-error="Not match subnet">
                                    {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
                                </span>
                                <span class="error-message translation-string" data-error="Cant set rule to AP address">
                                    {{html localeString("Validation message IP Address: Cant set rule to AP address")}}
                                </span>
                            </div>
                        </div>
                        <div class="validation-message" data-parameter-name="DHCPLeaseNewDevice">
                            <div class="icon"></div>
                            <div class="text">
                                <span class="error-message translation-string" data-error="global">
                                    {{html localeString("Please select device from list")}}
                                </span>
                            </div>
                        </div>

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

        <div class="expert-mode-only hide-starlink">

            <div class="text dmz-title">
                <span class="translation-string">
                    {{html localeString("By enabling DMZ-feature you can access the choosen device directly from the Internet")}}
                </span>
            </div>

            <div class="inline-blocks dmz-settings">
                <div class="block">
                    <div class="swc-checkbox enable-dmz validatable" data-name="DMZEnable">
                        <div class="icon"></div>
                        <div class="text"> <span class="translation-string">{{html localeString("Enable DMZ for device")}}</span></div>
                    </div>
                </div>
                <div class="block">
                    <div class="swc-dropdown dmz-device disabled validatable" data-class="dmz-device" data-name="DMZIPAddress">
                        <div class="selected-option">
                            <span class="translation-string">{{html localeString("Choose a Device")}}</span>
                        </div>
                    </div>
                </div>
                <div class="block block-info">
                    <div class="icons has-popover info dmz-title-info"
                         data-popover-template-id="network:settings:ip-settings:info-icons"
                         data-popover-template-data='{ "component": "Enable IP Passthrough" }'
                         data-popover-placement="top"
                         data-popover-holder=".dmz-title-info"></div>
                </div>
				<div class="block">
                	<input type="text" 	value="${data.DMZCustomIpAddress}" 
										class="swc-input ip-address validatable characters-filter"
                              			data-default-value="${data.DMZCustomIpAddress}" 
										name="DMZCustomIpAddress">
                </div>
            </div>
            <div class="validation-message dmz-setting" data-parameter-name="DMZIPAddress">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Please select device from list")}}
                    </span>
                </div>
            </div>
            <div class="validation-message dmz-custom-ip-setting" data-parameter-name="DMZCustomIpAddress">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format Custom">
                        {{html localeString("Validation message IP Address: doesn`t match 192.168.[0-255].[1-254]")}}
                    </span>
                    <span class="error-message translation-string" data-error="DMZ custom ip address can not be the same as central storage ip address">
                        {{html localeString("DMZ custom ip address can not be the same as central storage ip address")}}
                    </span>
                    <span class="error-message translation-string" data-error="DMZ custom ip address can not be the same as Internet-Box ip address">
                        {{html localeString("DMZ custom ip address can not be the same as Internet-Box ip address")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
                        {{html localeString("Validation message IP Address: IPv4 address within DHCP range")}}
                    </span>
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
                        {{html localeString("Validation message IP Address: invalid IPv4 address format")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address is outside of allowed host addresses range">
                        {{html localeString("Validation message IP Address: IPv4 Address is outside of allowed host addresses range")}}
                    </span>
                    <span class="error-message translation-string" data-error="IPv4 Address Already in use">
                        {{html localeString("Ip Address already in use")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match broadcast">
                        {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Not match subnet">
                        {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
                    </span>
                    <span class="error-message translation-string" data-error="Cant set rule to AP address">
                        {{html localeString("Validation message IP Address: Cant set rule to AP address")}}
                    </span>
                    <span class="error-message translation-string" data-error="Selected DMZ IP address must belong to the subnet">
                        {{html localeString("Validation message IP Address: Selected DMZ IP address must belong to the subnet")}}
                    </span>
                    <span class="error-message translation-string" data-error="Non-private subnet">
                        {{html localeString("Validation message IP Address: IP Address must be in the private network range (192.168.x.x, 10.x.x.x, 172.16.x.x - 172.32.x.x )")}}
                    </span>
                    <span class="error-message translation-string" data-error="The subnetmask does not fit to the ip range">
                        {{html localeString("Validation message IP Address: The subnetmask does not fit to the ip range.")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.128.0.0/16 is used for guest wlan">
                        {{html localeString("Validation message IP Address: Subnet 10.128.0.0/16 is used for guest wlan")}}
                    </span>
                    <span class="error-message translation-string" data-error="Subnet 10.129.0.0/16 is used for internal purposes">
                        {{html localeString("Validation message IP Address: Subnet 10.129.0.0/16 is used for internal purposes")}}
                    </span>
                    <span class="error-message translation-string" data-error="DHCP Subnet doesnt match">
                        {{html localeString("Validation message IP Address: DHCP address range does not fit allowed network addresses")}}
                    </span>
                </div>
            </div>
        </div>

    </div>
    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Network settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Network settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="network:settings:port-forwarding" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text">
             {{html localeString("Port forwarding allows remote computers to connect to a specific computer or service within your network. You can create rules to determine which service is required by which device")}}
        </span>

        <div class="separator"></div>

        <div class="inline-blocks">
            <div class="block">
                <div class="swc-checkbox upnp validatable {{if data.upnpStatus}}checked{{/if}}" data-name="upnp" data-default-value="${data.upnpStatus}"
                     data-value="${data.upnpStatus}">
                    <div class="icon"></div>
                    <div class="text">
                        {{html localeString("Enable Automatic Port Forwarding (UPnP IGD)")}}
                    </div>
                </div>
            </div>
            <div class="block block-info">
                <div class="icons has-popover info set-forwarding-info"
                     data-popover-template-id="network:settings:port-forwarding:info-icons"
                     data-popover-template-data='{ "component": "Enable Automatic Port Forwarding" }'
                     data-popover-placement="top"
                     data-popover-holder=".set-forwarding-info"></div>
            </div>
        </div>

        <span class="text title rules-list-title">
            {{html localeString("Port Forwarding Rules")}}
        </span>

        <div class="expandable-list rules-list" data-key="rules-list">
            <div class="expandable-list-title">
                <div data-key="activate-service" class="block activate-service">
                    {{html localeString("Activate Service")}}
                </div>
                <div data-key="protocol" class="block protocol">
                    {{html localeString("Protocol")}}
                </div>
                <div data-key="rule-policy" class="block assigned-device">
                    {{html localeString("To Device")}}
                </div>
                <div data-key="actions" class="block actions">
                    {{html localeString("Actions")}}
                </div>
            </div>
            <div class="rules">
            	{{each(key, item) data.rules}}
            		{{if item.list[0]}}
	            		{{if item.name}}
	            			<div class="expandable-list-title list-group-title text">
			            		{{html localeString(item.name)}}
			            	</div>
			            {{/if}}
		            	{{each(key, rule) item.list}}
		                    <div class="expandable-list-item" data-key="${rule.id}">
		                        <div class="block activate-service">
		                            <div class="swc-checkbox enable-rule {{if rule.status}}checked{{/if}} validatable"
		                                 data-name="ruleState" data-rule="${rule.id}"
		                                 data-default-value="${rule.status}" data-value="${rule.status}">
		                                <div class="icon"></div>
		                                <div class="text service-name state-default">${rule.name}</div>
		                            </div>
		                            <div class="entry-port-block">
		                                <span class="text small">
		                                    {{html localeString("Entry Port:")}}
		
		                                    {{if rule.ports.entry[1]}}
		                                        ${rule.ports.entry[0]}-${rule.ports.entry[1]}
		                                    {{else}}
		                                        ${rule.ports.entry[0]}
		                                    {{/if}}
		                                </span>
		                            </div>
		                        </div>
		                        <div class="block protocol">
		                            <span class="protocol-name">
		                                {{if rule.protocol == "6"}}
		                                    {{html localeString("TCP")}}
		                                {{else rule.protocol == "17"}}
		                                    {{html localeString("UDP")}}
		                                {{else}}
		                                    {{html localeString("TCP/UDP")}}
		                                {{/if}}
		                            </span>
		                        </div>
		                        <div class="block assigned-device">
		                            <div class="device-name-block">
		                                <span>
		                                    ${rule.deviceName}
		                                </span>
		                            </div>
		                            <div class="destination-port-block">
		                                <span class="text small">
		                                    {{html localeString("Destination Port:")}}
		
		                                    {{if rule.ports.destination[1]}}
		                                        ${rule.ports.destination[0]}-${rule.ports.destination[1]}
		                                    {{else}}
		                                        ${rule.ports.destination[0]}
		                                    {{/if}}
		                                </span>
		                            </div>
		                        </div>
		                        <div class="block actions">
		                            <div class="icons pencil process-edit" data-rule="${rule.id}"></div>
		                            <div class="icons trash process-delete" data-rule="${rule.id}"></div>
		                        </div>
		                    </div>
		                {{/each}}
	                {{/if}}
                {{/each}}

                {{if !data.isAnyRule}}
                    <span class="no-rules-message">
                        {{html localeString("There are no Port Forwarding Rules. Click 'Add Rule' button to create a Port Forwarding Rule.")}}
                    </span>
                {{/if}}
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <a class="button big no-highlighting secondary add-rule" href="#network/settings/port-forwarding/add">
            <span class="translation-string">{{html localeString("Add Rule")}}</span>
        </a>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error save-error-default">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-error save-error-overlapping">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("The port is already in use by the system")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="network:settings:port-forwarding:rules-edit" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text header-description">
            {{html localeString("Port Forwarding allows remote computers to connect to a specific computer or service within your network.")}}
            {{html localeString("You can create rules to determine which service is required by which device.")}}
        </span>

        <div class="separator"></div>

        <span class="text title rule-create-title">
            {{html localeString("Edit Port Forwarding Rule")}}
        </span>

        <div class="table">

            <div class="table-row rule-name-section">
                <div class="left">
                    <span class="text">
                        {{html localeString("Service")}}
                    </span>
                </div>
                <div class="right">
                    <input type="text" class="swc-input validatable" name="serviceName" data-default-value="${data.name}" placeholder="{{html localeString('Enter rule name')}}">
                    <input type="text" class="swc-input validatable hidden" name="serviceID" value="${data.id}" data-default-value="${data.id}">
                    <input type="text" class="swc-input validatable hidden" name="ipAddressAP" value="${data.ipAddressAP}" data-default-value="${data.ipAddressAP}">
                </div>
            </div>
            <div class="validation-message" data-parameter-name="serviceName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="global">
                        {{html localeString("Must be unique, from 1 to 40 characters, allowed characters ASCI non-printable")}}
                    </span>
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="must be from 1 to 40 characters">
                        {{html localeString("Must be from 1 to 40 characters")}}
                    </span>
                    <span class="error-message" data-error="allowed characters ASCI non-printable">
                        {{html localeString("Allowed characters ASCI non-printable")}}
                    </span>
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row entry-port-mode-section">
                <div class="left">
                    {{html localeString("Entry Port")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-radio-buttons entry-mode" data-name="entry-ports-mode" data-default-value="single" data-value="single">
                            <div class="mode active" data-value="single">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Single")}}
                                </div>
                            </div>
                            <div class="mode" data-value="range">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Range")}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info entry-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Entry ports Single or Range mode toggle" }'
                             data-popover-placement="top"
                             data-popover-holder=".entry-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row entry-port-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="block-from">
                        <input type="text" class="swc-input from validatable" name="entryPort">
                    </div>
                    <div class="block-to">
                        {{html localeString("to")}} <input type="text" class="swc-input to validatable" name="entryPort">
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="entryPort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="ports 1024-1048 are not allowed because this ports reserved for system use">
                        {{html localeString("Ports 1024-1048 are not allowed because this ports reserved for system use")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports are reserved for voip")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row protocol-section">
                <div class="left">
                    {{html localeString("Protocol")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown protocol-selection" data-name="protocol"
                             data-class="protocol-selection" data-selected="" data-value="">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info protocol-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Protocol type" }'
                             data-popover-placement="top"
                             data-popover-holder=".protocol-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row device-section">
                <div class="left">
                    {{html localeString("To Device")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown device-selection validatable" data-name="deviceIP"
                             data-class="device-selection" data-selected="" data-value="">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info device-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Device selection" }'
                             data-popover-placement="top"
                             data-popover-holder=".device-selection-info"></div>
                    </div>
                    <div class="block">
                        <input type="text" value="${data.address}" class="swc-input ip-address validatable characters-filter"
                               data-default-value="${data.address}" name="address">
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="deviceIP">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="device must be selected">
                        {{html localeString("Device must be selected")}}
                    </span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="address">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
	                    {{html localeString("Validation message IP Address: invalid IPv4 address format")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address is outside of allowed host addresses range">
	                    {{html localeString("Validation message IP Address: IPv4 Address is outside of allowed host addresses range")}}
	                </span>
	                <span class="error-message translation-string" data-error="Invalid IPv4 Address Format Custom">
	                    {{html localeString("Validation message IP Address: doesn`t match 192.168.[0-255].[1-254]")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
	                    {{html localeString("Validation message IP Address: IPv4 address within DHCP range")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address Already in use">
	                    {{html localeString("Ip Address already in use")}}
	                </span>
	                <span class="error-message translation-string" data-error="Not match broadcast">
	                    {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
	                </span>
	                <span class="error-message translation-string" data-error="Not match subnet">
	                    {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
	                </span>
                    <span class="error-message translation-string" data-error="Cant set rule to AP address">
                        {{html localeString("Validation message IP Address: Cant set rule to AP address")}}
                    </span>
                </div>
            </div>

            <div class="table-row destination-port-mode-section">
                <div class="left">
                    {{html localeString("Destination Port")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-radio-buttons destination-mode" data-name="destination-ports-mode" data-default-value="single" data-value="single">
                            <div class="mode active" data-value="single">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Single")}}
                                </div>
                            </div>
                            <div class="mode" data-default-value="range" data-value="range">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Range")}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info destination-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Destination ports Single or Range mode toggle" }'
                             data-popover-placement="top"
                             data-popover-holder=".destination-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row destination-port-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="text-section">
                        <span class="text-block-destination-from"></span>
                        {{html localeString("to")}}
                        <span class="text-block-destination-to"></span>
                    </div>
                    <div class="inputs-section">
                        <div class="block-from">
                            <input type="text" class="swc-input from validatable" name="destinationPort">
                        </div>
                        <div class="block-to">
                            <input type="text" class="swc-input to validatable" name="destinationPort">
                        </div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="destinationPort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="ports 1024-1048 are not allowed because this ports reserved for system use">
                        {{html localeString("Ports 1024-1048 are not allowed because this ports reserved for system use")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports are reserved for voip")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>

        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding rule added successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding rule adding failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("Choose a device")}}</span>
        <span>{{html localeString("TCP")}}</span>
        <span>{{html localeString("UDP")}}</span>
        <span>{{html localeString("TCP/UDP")}}</span>
    </span>
</script>

<script id="network:settings:port-forwarding:rules-add" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text header-description">
            {{html localeString("Port Forwarding allows remote computers to connect to a specific computer or service within your network.")}}
            {{html localeString("You can create rules to determine which service is required by which device.")}}
        </span>

        <div class="separator"></div>

        <span class="text title rule-create-title">
            {{html localeString("Create Port Forwarding Rule")}}
        </span>

        <div class="table">
            <div class="table-row service-section">
                <div class="left">
                    <span class="text">
                        {{html localeString("Service")}}
                    </span>
                </div>
                <div class="right">
                    <div class="swc-radio-buttons service-mode validatable" data-name="service-mode" data-value="custom">
                        <div class="mode active" data-value="custom">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Create Your Own")}}
                            </div>
                        </div>
                        <div class="mode" data-value="predefined">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Use Predefined")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row rule-name-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="custom-mode">
                        <input type="text" class="swc-input validatable" name="serviceName" placeholder="{{html localeString('Enter rule name')}}">
                        <input type="text" class="swc-input validatable hidden" name="ipAddressAP" value="${data.ipAddressAP}" data-default-value="${data.ipAddressAP}">
                    </div>
                    <div class="predefined-mode">
                        <div class="swc-dropdown service-name-selection validatable" data-name="predefinedServiceName"
                             data-class="service-name-selection" data-selected="" data-value="">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="serviceName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="global">
                        {{html localeString("Must be unique, from 1 to 40 characters, allowed characters ASCI non-printable")}}
                    </span>
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="must be from 1 to 40 characters">
                        {{html localeString("Must be from 1 to 40 characters")}}
                    </span>
                    <span class="error-message" data-error="allowed characters ASCI non-printable">
                        {{html localeString("Allowed characters ASCI non-printable")}}
                    </span>
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="predefinedServiceName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row entry-port-mode-section">
                <div class="left">
                    {{html localeString("Entry Port")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-radio-buttons entry-mode" data-name="entry-ports-mode" data-value="single">
                            <div class="mode active" data-value="single">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Single")}}
                                </div>
                            </div>
                            <div class="mode" data-value="range">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Range")}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info entry-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Entry ports Single or Range mode toggle" }'
                             data-popover-placement="top"
                             data-popover-holder=".entry-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row entry-port-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="block-from">
                        <input type="text" class="swc-input from validatable" name="entryPort">
                    </div>
                    <div class="block-to">
                        {{html localeString("to")}} <input type="text" class="swc-input validatable to" name="entryPort">
                    </div>
                    <div class="value-section">
                        <span class="text-block-entry"></span>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="entryPort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="ports 1024-1048 are not allowed because this ports reserved for system use">
                        {{html localeString("Ports 1024-1048 are not allowed because this ports reserved for system use")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports are reserved for voip")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row protocol-section">
                <div class="left">
                    {{html localeString("Protocol")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown protocol-selection" data-name="protocol"
                             data-class="protocol-selection" data-selected="" data-value="">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info protocol-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Protocol type" }'
                             data-popover-placement="top"
                             data-popover-holder=".protocol-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row device-section">
                <div class="left">
                    {{html localeString("To Device")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown device-selection validatable" data-name="deviceIP"
                             data-class="device-selection" data-selected="" data-value="">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info device-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Device selection" }'
                             data-popover-placement="top"
                             data-popover-holder=".device-selection-info"></div>
                    </div>
                    <div class="block">
                        <input type="text" value="${data.address}" class="swc-input ip-address validatable characters-filter"
                               data-default-value="${data.address}" name="address">
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="deviceIP">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="device must be selected">
                        {{html localeString("Device must be selected")}}
                    </span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="address">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="Invalid IPv4 Address Format">
	                    {{html localeString("Validation message IP Address: invalid IPv4 address format")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address is outside of allowed host addresses range">
	                    {{html localeString("Validation message IP Address: IPv4 Address is outside of allowed host addresses range")}}
	                </span>
	                <span class="error-message translation-string" data-error="Invalid IPv4 Address Format Custom">
	                    {{html localeString("Validation message IP Address: doesn`t match 192.168.[0-255].[1-254]")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address Within DHCP Range">
	                    {{html localeString("Validation message IP Address: IPv4 address within DHCP range")}}
	                </span>
	                <span class="error-message translation-string" data-error="IPv4 Address Already in use">
	                    {{html localeString("Ip Address already in use")}}
	                </span>
	                <span class="error-message translation-string" data-error="Not match broadcast">
	                    {{html localeString("Validation message IP Address: IP Address should not end with 255 (match broadcast address)")}}
	                </span>
	                <span class="error-message translation-string" data-error="Not match subnet">
	                    {{html localeString("Validation message IP Address: IP Address should not end with 0 (match network address)")}}
	                </span>
                    <span class="error-message translation-string" data-error="Cant set rule to AP address">
                        {{html localeString("Validation message IP Address: Cant set rule to AP address")}}
                    </span>
                </div>
            </div>

            <div class="table-row destination-port-mode-section">
                <div class="left">
                    {{html localeString("Destination Port")}}
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-radio-buttons destination-mode" data-name="destination-ports-mode" data-value="single">
                            <div class="mode active" data-value="single">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Single")}}
                                </div>
                            </div>
                            <div class="mode" data-value="range">
                                <div class="icon"></div>
                                <div class="text">
                                    {{html localeString("Range")}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info destination-selection-info"
                             data-popover-template-id="network:settings:port-forwarding:info-icons"
                             data-popover-template-data='{ "component": "Destination ports Single or Range mode toggle" }'
                             data-popover-placement="top"
                             data-popover-holder=".destination-selection-info"></div>
                    </div>
                </div>
            </div>

            <div class="table-row destination-port-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="text-section">
                        <span class="text-block-destination-from"></span>
                        {{html localeString("to")}}
                        <span class="text-block-destination-to"></span>
                    </div>
                    <div class="value-section">
                        <span class="text-block-destination"></span>
                    </div>
                    <div class="inputs-section">
                        <div class="block-from">
                            <input type="text" class="swc-input from validatable" name="destinationPort">
                        </div>
                        <div class="block-to">
                            <input type="text" class="swc-input to validatable" name="destinationPort">
                        </div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="destinationPort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="ports 1024-1048 are not allowed because this ports reserved for system use">
                        {{html localeString("Ports 1024-1048 are not allowed because this ports reserved for system use")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports are reserved for voip")}}
                    </span>
                    <span class="error-message" data-error="ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547">
                        {{html localeString("Ports 500 and 4500 are not allowed because these ports reserved for voip and port forwarding rules must not include the port 7547")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>

        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding rule added successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Port Forwarding rule adding failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("Choose a device")}}</span>
        <span>{{html localeString("TCP")}}</span>
        <span>{{html localeString("UDP")}}</span>
        <span>{{html localeString("TCP/UDP")}}</span>
    </span>
</script>

<script id="network:settings:dyndns" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <div class="text">
             <span class="translation-string">
                 {{html localeString("A client program on your network that periodically establishes a connection with DynDNS, which tells it to update to the IP that the inbound connection coming from")}}
             </span>
        </div>
         <div class="text hide-starlite hide-starlink hide-AP5 expert-mode-only">
             <span class="translation-string">
                 {{html localeString("As an alternative you can setup your own Swisscom DynDNS account <a href='#applications/dyndns'>here</a> for free.")}}
             </span>
        </div>

        <div class="inline-blocks service-state-section">
            <div class="block">
                <div class="swc-checkbox DynDNSEnable {{if data.dyndnsStatus}}checked{{/if}} validatable"
                     data-default-value="${data.dyndnsStatus}"
                     data-value="${data.dyndnsStatus}"
                     data-name="DynDNSEnable">
                     <div class="icon"></div>
                     <div class="text">{{html localeString("Enable DynDNS")}}</div>
                </div>
            </div>
            <div class="block block-info">
                <div class="icons has-popover info dyndns-settings-info"
                     data-popover-template-id="network:settings:dyndns:info-icons"
                     data-popover-template-data=''
                     data-popover-placement="right"
                     data-popover-holder=".dyndns-settings-info"></div>
            </div>
        </div>

        <div class="faded">
            <div class="table dyndns-settings">
                <div class="table-row">
                    <div class="left">
                         <span class="translation-string">{{html localeString("Provider")}}</span>
                    </div>
                    <div class="right">
                        <div class="block provider-type">
                            <div class="swc-dropdown provider-selection validatable" data-name="Service" data-class="provider-selection" data-selected="" data-value="">
                                <div class="selected-option">&nbsp;</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{! This is template of form to keep DynDNS Provider credentials and settings}}
            <div class="table provider-data disabled-for-superadmin"></div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("DynDNS data saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("DynDNS data saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the DynDNS page")}}</span>
            </div>
        </div>
    </div>

    <div class="hidden dynDnsOffMessage">
        <div class="text center">
            {{html localeString("DynDNS is disactivated.")}}
        </div>
    </div>

</script>

<script id="network:settings:dyndns:service-settings-form" type="text/x-jquery-tmpl">
    {{! This is template of form to keep DynDNS Provider credentials and settings}}
    <div class="table-row">
        <div class="left">
            <span class="translation-string">{{html localeString("Hostname")}}</span>
        </div>
        <div class="right input-container">
            <input type="text" class="swc-input validatable hostname" name="hostname" value="${service.hostname}"
                   data-provider="${service.id}" data-default-value="${service.hostname}">
           <span class="valid-tick"></span>
        </div>
    </div>

    <div class="validation-message" data-parameter-name="hostname">
        <div class="icon"></div>
        <div class="text">
            <span class="error-message translation-string" data-error="global">
                {{html localeString("Validation message Hostname: DynDNS Hostname requirements")}}
            </span>
        </div>
        <div class="text">
            <span class="error-message translation-string" data-error="should not be empty">
                {{html localeString("Validation message Username: DynDNS Hostname cannot be empty")}}
            </span>
            <span class="error-message translation-string" data-error="hostname domain address invalid">
                {{html localeString("Validation message Username: DynDNS hostname domain addres is invalid")}}
            </span>
        </div>
    </div>

    <div class="table-row">
        <div class="left">
            <span class="translation-string">{{html localeString("DynDNS Username")}}</span>
        </div>
        <div class="right input-container">
            <input type="text" class="swc-input validatable username" name="username" value="${service.username}"
                   data-provider="${service.id}" data-default-value="${service.username}">
           <span class="valid-tick"></span>
        </div>
    </div>

    <div class="validation-message" data-parameter-name="username">
        <div class="icon"></div>
        <div class="text">
            <span class="error-message translation-string" data-error="global">
                {{html localeString("Validation message Username: DynDNS Username requirements")}}
            </span>
        </div>
        <div class="text">
            <span class="error-message translation-string" data-error="should not be empty">
                {{html localeString("Validation message Username: DynDNS Username cannot be empty")}}
            </span>
            <span class="error-message translation-string" data-error="username contain not allowed characters">
                {{html localeString("Validation message Username: DynDNS Username can contain only printable characters")}}
            </span>
        </div>
    </div>

    <div class="table-row password-row">
        <div class="left">
            <span class="translation-string">{{html localeString("DynDNS Password")}}</span>
        </div>
        <div class="right">
            <div class="block input-container">
                <input type="password" data-provider="${service.id}" class="swc-input password password-original validatable"
                       name="password" value="${service.password}" data-default-value="${service.password}">
                <input type="text" data-provider="${service.id}" class="swc-input password password-copy validatable"
                       name="password" value="${service.password}" data-default-value="${service.password}">
                <span class="valid-tick"></span>
            </div>
            <div class="block">
                <div class="swc-checkbox show-password skip-validation" data-name="showPassword" data-value="false">
                    <div class="icon"></div>
                    <div class="text"><span class="translation-string">{{html localeString("Show Password")}}</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="validation-message" data-parameter-name="password">
        <div class="icon"></div>
        <div class="text">
            <span class="error-message translation-string" data-error="global">
                {{html localeString("Validation message Password: DynDNS password requirements")}}
            </span>
        </div>

        <div class="text">
            <span class="error-message translation-string" data-error="should not be empty">
                {{html localeString("Validation message Password: DynDNS password requirements")}}
            </span>
            <span class="error-message translation-string" data-error="password contain not allowed characters">
                {{html localeString("Validation message Password: DynDNS Password can contain only printable characters")}}
            </span>
        </div>
    </div>

    {{if dyndnsStatus && dnsProviderData && (dnsProviderData.status === "UPDATED" || dnsProviderData.status === "UNKNOWN")}}
    <div class="table-row">
        <div class="left">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="right last-date">
            <span class="text">
                <span class="translation-string">{{html localeString("activated")}}</span>
                <br>
                <span class="translation-string">{{html localeString("Last update")}}:</span>
                {{if dnsProviderData.status === "UNKNOWN"}}
                    <span class="error-text">
                        {{html localeString("Failed")}}
                        ${dnsProviderData.lastUpdate}
                    </span>
                {{else}}
                    <span>${dnsProviderData.lastUpdate}</span>
                {{/if}}
            </span>
        </div>
    </div>
    {{/if}}

</script>

<script id="network:settings:ipv6-firewall" type="text/x-jquery-tmpl">
    <div class="inline-blocks">
        <div class="block">
            <div class="swc-checkbox IPv6Enable {{if data.IPv6Status}}checked{{/if}} validatable"
                 data-default-value="${data.IPv6Status}" data-value="${data.IPv6Status}" data-name="IPv6Enable">
                <div class="icon"></div>
                <div class="text"><span class="translation-string">{{html localeString("Activate IPv6")}}</span></div>
            </div>
        </div>
        <div class="block block-info">
            <div class="icons has-popover info ipv6-settings-info"
                 data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                 data-popover-template-data='{ "component": "Activate IPv6" }'
                 data-popover-placement="top"
                 data-popover-holder=".ipv6-settings-info"></div>
        </div>
    </div>

    <div class="separator"></div>

    <div class="text title settings">
         <span class="translation-string">
             {{html localeString("IPv6 Firewall Settings")}}
         </span>
    </div>

    <div class="text settings-description">
        <span class="translation-string">
            {{html localeString("When IPv6 is activated you can use the IPv6 Firewall to prevent unwanted connections from the internet or other networks")}}
        </span>
    </div>

    <div class="text title choose-level">
         <span class="translation-string">
             {{html localeString("Choose Your Security Level")}}
         </span>
    </div>

    <div class="swc-radio-buttons {{if !data.IPv6Status}}disabled{{/if}} security-selection validatable"
         data-default-value="${data.securityLevel}" data-name="security-level"
         data-value="${data.securityLevel}">

        <div class="mode {{if data.securityLevel === 'off'}}active{{/if}}" data-value="off">
            <div class="icon"></div>
            <div class="text">
                <div class="table">
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-title">
                                <span class="translation-string">{{html localeString("Off")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-description">
                                <span class="translation-string">
                                    {{html localeString("All inbound and outbound connections are allowed")}}
                                </span>
                            </div>
                            <div class="block block-info">
                                <div class="icons has-popover info security-level-off-info"
                                     data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                                     data-popover-template-data='{ "component": "Security Level Off" }'
                                     data-popover-placement="top"
                                     data-popover-holder=".security-level-off-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mode {{if data.securityLevel === 'balanced'}}active{{/if}}" data-value="balanced">
            <div class="icon"></div>
            <div class="text">
                <div class="table">
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-title">
                                <span class="translation-string">{{html localeString("Balanced")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-description">
                                <span class="translation-string">
                                    {{html localeString("Most of inbound and outbound connections are allowed")}}
                                </span>
                            </div>
                            <div class="block block-info balanced">
                                <div class="icons has-popover info security-level-balanced-info"
                                     data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                                     data-popover-template-data='{ "component": "Security Level Balanced" }'
                                     data-popover-placement="top"
                                     data-popover-holder=".security-level-balanced-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mode {{if data.securityLevel === 'strict'}}active{{/if}}" data-value="strict">
            <div class="icon"></div>
            <div class="text">
                <div class="table">
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-title">
                                <span class="translation-string">{{html localeString("Strict")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-description">
                                <span class="translation-string">
                                    {{html localeString("All inbound connections are blocked, except for those required for basic internet services")}}
                                </span>
                                <span class="translation-string">
                                    {{html localeString("All outbound connections are allowed")}}
                                </span>
                            </div>
                            <div class="block block-info strict">
                                <div class="icons has-popover info security-level-strict-info"
                                     data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                                     data-popover-template-data='{ "component": "Security Level Strict" }'
                                     data-popover-placement="top"
                                     data-popover-holder=".security-level-strict-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mode {{if data.securityLevel === 'custom'}}active{{/if}}" data-value="custom">
            <div class="icon"></div>
            <div class="text">
                <div class="table">
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-title">
                                <span class="translation-string">{{html localeString("Custom")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="right">
                            <div class="block rule-description">
                                <span class="translation-string">
                                    {{html localeString("You can define rules for inbound and outbound connections")}}
                                </span>
                            </div>
                            <div class="block block-info custom">
                                <div class="icons has-popover info security-level-custom-info"
                                     data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                                     data-popover-template-data='{ "component": "Security Level Custom" }'
                                     data-popover-placement="top"
                                     data-popover-holder=".security-level-custom-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="buttons-customize-container">
        <a class="button secondary button-customize {{if data.securityLevel !== 'custom' || !data.IPv6Status}}disabled{{/if}} no-highlighting">
            <span class="translation-string">{{html localeString("Customize")}}</span>
        </a>
    </div>

    <div class="buttons-container-message">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Firewall settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Firewall settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="network:settings:ipv6-firewall:rules-list" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <div class="inline-blocks header">
            <div class="text">
                {{html localeString("You can set up Firewall Access for applications and services.")}}
            </div>
            <div class="block behaviour-title">
                {{html localeString("Select the default Firewall behavior for all data traffic")}}
            </div>
            <div class="block">
                <div class="swc-dropdown policy-selection validatable" data-name="policy"
                     data-class="default-option-selection policy-selection" data-selected="" data-value="">
                    <div class="selected-option">
                        {{html localeString("Select default policy")}}
                    </div>
                </div>
            </div>
            <div class="block block-info">
                <div class="icons has-popover info default-option-info"
                     data-popover-template-id="network:settings:ipv6-firewall:rules-list:info-icons"
                     data-popover-template-data='{ "component": "Default behaviour" }'
                     data-popover-placement="top"
                     data-popover-holder=".default-option-info"></div>
            </div>
        </div>

        <div class="separator"></div>

        <div class="inline-blocks rules-title">
            <div class="text">
                <span class="text title">
                    {{html localeString("Additional Firewall Rules")}}
                </span>
            </div>
            <div class="text title-description">
                {{html localeString("You can add your own rules to the table")}}
            </div>
        </div>

        <div class="expandable-list rules-list" data-key="rules-list">
            <div class="expandable-list-title">
                <div data-key="activate-service" class="block activate-service">
                    {{html localeString("Activate Service")}}
                </div>
                <div data-key="protocol" class="block protocol">
                    {{html localeString("Protocol")}}
                </div>
                <div data-key="rule-policy" class="block rule-policy">
                    {{html localeString("Policy")}}
                </div>
                <div data-key="actions" class="block actions">
                    {{html localeString("Actions")}}
                </div>
            </div>
            <div class="rules">
                {{each(key, rule) data.rules}}
                    <div class="expandable-list-item" data-key="${rule.id}">
                        <div class="block activate-service">
                            <div class="swc-checkbox enable-service validatable {{if rule.status}}checked{{/if}}"
                                 data-value="{{if rule.status}}true{{else}}false{{/if}}" data-default-value="{{if rule.status}}true{{else}}false{{/if}}" data-name="ruleState" data-rule="${rule.id}">
                                <div class="icon"></div>
                                <div class="text service-name state-default">${rule.name}</div>
                            </div>
                            <div class="ports-block">
                                <span class="text small">
                                    {{html localeString("Port:")}}

                                    {{if rule.port[1]}}
                                        ${rule.port[0]} {{html localeString("to")}} ${rule.port[1]}
                                    {{else}}
                                        ${rule.port[0]}
                                    {{/if}}
                                </span>
                            </div>
                        </div>
                        <div class="block protocol">
                            {{if rule.protocol === "6"}}
                                <span class="protocol-name">{{html localeString("TCP")}}</span>
                            {{/if}}

                            {{if rule.protocol === "17"}}
                                <span class="protocol-name">{{html localeString("UDP")}}</span>
                            {{/if}}

                            {{if rule.protocol === "6,17"}}
                                <span class="protocol-name">{{html localeString("TCP/UDP")}}</span>
                            {{/if}}
                        </div>
                        <div class="block rule-policy">
                            <div class="action-name-block">
                                {{if rule.policy === "Accept_inbound"}}
                                    <span>{{html localeString("Allow incoming")}}</span>
                                {{/if}}

                                {{if rule.policy === "Accept_outbound"}}
                                    <span>{{html localeString("Allow outgoing")}}</span>
                                {{/if}}

                                {{if rule.policy === "Drop_inbound"}}
                                    <span>{{html localeString("Block incoming")}}</span>
                                {{/if}}

                                {{if rule.policy === "Drop_outbound"}}
                                    <span>{{html localeString("Block outgoing")}}</span>
                                {{/if}}
                            </div>
                        </div>
                        <div class="block actions">
                            <div class="icons pencil process-edit" data-rule="${rule.id}"></div>
                            <div class="icons trash process-delete" data-rule="${rule.id}"></div>
                        </div>
                    </div>
                {{/each}}

                {{if !data.rules.length}}
                    <span class="no-rules-message">
                        {{html localeString("There are no Firewall Rules.")}}
                        {{html localeString("Click `Add Rule` button to create a Firewall Rule.")}}
                    </span>
                {{/if}}
            </div>

            <input type="text" class="swc-input hidden validatable" value="" name="rules-to-delete" data-default-value="">
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <a class="button big no-highlighting secondary add-rule" href="#network/settings/ipv6-firewall/add">
            <span class="translation-string">{{html localeString("Add Rule")}}</span>
        </a>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Firewall settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-success from-rule">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Rule saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Firewall settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-error from-rule">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("IPv6 Rule saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
    
    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Established by UPnP IGD")}}</span>
    </span>
    <!-- - - - - - - - - - - - - -->
</script>

<script id="network:settings:ipv6-firewall:rules-add" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text description">
            {{html localeString("You can create your own additional rules for Firewall Access.")}}
        </span>

        <div class="separator"></div>

        <span class="text title create-rule-title">
            {{html localeString("Create Firewall Rule")}}
        </span>

        <div class="table rule-form">

            <div class="table-row service-section">
                <div class="left">
                    <span class="text">
                        {{html localeString("IPv6 Firewall Rule")}}
                    </span>
                </div>
                <div class="right">
                    <div class="swc-radio-buttons skip-validation service-mode" data-name="service-mode" data-default-value="${data.ruleType}" data-value="${data.ruleType}">
                        <div class="mode {{if data.ruleType == 'custom'}}active{{/if}}" data-value="custom">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Create Your Own")}}
                            </div>
                        </div>
                        <div class="mode {{if data.ruleType == 'custom'}}predefined{{/if}}" data-value="predefined">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Use Predefined")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row rule-name-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="custom-mode">
                        <input type="text" class="swc-input validatable" name="RuleName" placeholder="{{html localeString('Enter rule name')}}"
                               value="${data.ruleName}" data-default-value="${data.ruleName}">
                    </div>
                    <div class="predefined-mode">
                        <div class="swc-dropdown service-name-selection skip-validation" data-name="PredefinedRuleName"
                             data-class="service-name-selection" data-value="${data.ruleName}" data-default-value="${data.ruleName}">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="RuleName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="global">
                        {{html localeString("Must be unique, from 1 to 40 characters, allowed characters ASCII non-printable")}}
                    </span>
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="must be from 1 to 40 characters">
                        {{html localeString("Must be from 1 to 40 characters")}}
                    </span>
                    <span class="error-message" data-error="allowed characters ASCII non-printable">
                        {{html localeString("Allowed characters ASCII non-printable")}}
                    </span>
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="predefinedRuleName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row protocol-section">
                <div class="left">
                    {{html localeString("Protocol")}}
                </div>
                <div class="right">
                    <div class="swc-dropdown validatable protocol-selection" data-name="protocol" data-class="protocol-selection"
                         data-value="${data.ruleProtocol}" data-default-value="${data.ruleProtocol}">
                        <div class="selected-option"></div>
                    </div>
                </div>
            </div>

            <div class="table-row ports-mode-section">
                <div class="left">
                    {{html localeString("Port")}}
                </div>
                <div class="right">
                    <div class="swc-radio-buttons validatable ports-mode" data-name="ports-mode" data-default-value="${data.rulePortsMode}" data-value="${data.rulePortsMode}">
                        <div class="mode {{if data.rulePortsMode == 'single'}}active{{/if}}" data-default-value="single" data-value="single">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Single")}}
                            </div>
                        </div>
                        <div class="mode {{if data.rulePortsMode == 'range'}}active{{/if}}" data-default-value="single" data-value="range">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Range")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row ports-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="block-from">
                        <input type="text" class="swc-input from validatable" name="RulePort" value="${data.rulePorts[0]}" data-default-value="${data.rulePorts[0]}">
                    </div>
                    <div class="block-to">
                        {{html localeString("to")}}

                        {{if data.rulePorts[1]}}
                            <input type="text" class="swc-input validatable to" name="RulePort" value="${data.rulePorts[1]}" data-default-value="${data.rulePorts[1]}">
                        {{else}}
                            <input type="text" class="swc-input validatable to" name="RulePort" value="" data-default-value="">
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="RulePort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="rule port must not be empty">
                        {{html localeString("Rule port must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row policy-section">
                <div class="left">
                    {{html localeString("Policy")}}
                </div>
                <div class="right">
                    <div class="swc-dropdown policy-selection validatable" data-name="policy" data-class="policy-selection" data-value="${data.rulePolicy}"  data-default-value="${data.rulePolicy}">
                        <div class="selected-option"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes">
                {{html localeString("Cancel")}}
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                {{html localeString("Apply")}}
            </a>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("Fix errors on the page")}}
            </div>
        </div>
    </div>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("TCP")}}</span>
        <span>{{html localeString("UDP")}}</span>
        <span>{{html localeString("TCP/UDP")}}</span>
        <span>{{html localeString("Enter Device by IP")}}</span>
    </span>
</script>

<script id="network:settings:ipv6-firewall:rules-edit" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text description">
            {{html localeString("You can create your own additional rules for Firewall Access.")}}
        </span>

        <div class="separator"></div>

        <span class="text title create-rule-title">
            {{html localeString("Edit Firewall Rule")}}
        </span>

        <div class="table rule-form">

            <div class="table-row service-section hidden">
                <div class="left">
                    <span class="text">
                        {{html localeString("IPv6 Firewall Rule")}}
                    </span>
                </div>
                <div class="right">
                    <div class="swc-radio-buttons skip-validation service-mode" data-name="service-mode" data-value="custom">
                        <div class="mode active" data-value="custom">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Create Your Own")}}
                            </div>
                        </div>
                        <div class="mode" data-value="predefined">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Use Predefined")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row rule-name-section">
                <div class="left">
                    <span class="text">
                        {{html localeString("IPv6 Firewall Rule")}}
                    </span>
                </div>
                <div class="right">
                    <div class="custom-mode">
                        <input type="text" class="swc-input validatable" name="RuleName" placeholder="{{html localeString('Enter rule name')}}"
                               value="${data.ruleName}" data-default-value="${data.ruleName}">
                        <input type="text" class="swc-input validatable hidden" name="RuleKey"
                               value="${data.ruleKey}" data-default-value="${data.ruleKey}">
                    </div>
                    <div class="predefined-mode hidden">
                        <div class="swc-dropdown service-name-selection skip-validation" data-name="predefinedRuleName"
                             data-class="service-name-selection" data-value="${data.ruleName}" data-default-value="${data.ruleName}">
                            <div class="selected-option"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="RuleName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="global">
                        {{html localeString("Must be unique, from 1 to 40 characters, allowed characters ASCII non-printable")}}
                    </span>
                    <span class="error-message" data-error="must not be empty">
                        {{html localeString("Must not be empty")}}
                    </span>
                    <span class="error-message" data-error="must be from 1 to 40 characters">
                        {{html localeString("Must be from 1 to 40 characters")}}
                    </span>
                    <span class="error-message" data-error="allowed characters ASCII non-printable">
                        {{html localeString("Allowed characters ASCII non-printable")}}
                    </span>
                    <span class="error-message" data-error="already existed rule names are not allowed">
                        {{html localeString("Already existed rule names are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row protocol-section">
                <div class="left">
                    {{html localeString("Protocol")}}
                </div>
                <div class="right">
                    <div class="swc-dropdown validatable protocol-selection" data-name="protocol" data-class="protocol-selection"
                         data-value="${data.ruleProtocol}" data-default-value="${data.ruleProtocol}">
                        <div class="selected-option"></div>
                    </div>
                </div>
            </div>

            <div class="table-row ports-mode-section">
                <div class="left">
                    {{html localeString("Port")}}
                </div>
                <div class="right">
                    <div class="swc-radio-buttons validatable ports-mode" data-name="ports-mode" data-value="${data.rulePortsMode}">
                        <div class="mode {{if data.rulePortsMode == 'single'}}active{{/if}}" data-value="single">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Single")}}
                            </div>
                        </div>
                        <div class="mode {{if data.rulePortsMode == 'range'}}active{{/if}}" data-value="range">
                            <div class="icon"></div>
                            <div class="text">
                                {{html localeString("Range")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row ports-values-section">
                <div class="left">
                    &nbsp;
                </div>
                <div class="right">
                    <div class="block-from">
                        <input type="text" class="swc-input from validatable" name="RulePort" data-value="${data.rulePorts[0]}" data-default-value="${data.rulePorts[0]}">
                    </div>
                    <div class="block-to">
                        {{html localeString("to")}}

                        {{if data.rulePorts[1]}}
                            <input type="text" class="swc-input validatable to" name="RulePort" data-value="${data.rulePorts[1]}" data-default-value="${data.rulePorts[1]}">
                        {{else}}
                            <input type="text" class="swc-input validatable to" name="RulePort" data-value="" data-default-value="">
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="RulePort">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="rule port must not be empty">
                        {{html localeString("Rule port must not be empty")}}
                    </span>
                    <span class="error-message" data-error="allowed range 1 to 65535">
                        {{html localeString("Allowed range 1 to 65535")}}
                    </span>
                    <span class="error-message" data-error="allowed characters 0-9">
                        {{html localeString("Allowed characters 0-9")}}
                    </span>
                    <span class="error-message" data-error="range option first value MUST be less then second value">
                        {{html localeString("Range option first value MUST be less then second value")}}
                    </span>
                    <span class="error-message" data-error="already used ports are not allowed">
                        {{html localeString("Already used ports are not allowed")}}
                    </span>
                    <span class="error-message" data-error="already used ports for same device are not allowed">
                        {{html localeString("Already used ports for same device are not allowed")}}
                    </span>
                </div>
            </div>

            <div class="table-row policy-section">
                <div class="left">
                    {{html localeString("Policy")}}
                </div>
                <div class="right">
                    <div class="swc-dropdown policy-selection validatable" data-name="policy" data-class="policy-selection" data-value="${data.rulePolicy}"  data-default-value="${data.rulePolicy}">
                        <div class="selected-option"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes">
                {{html localeString("Cancel")}}
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                {{html localeString("Apply")}}
            </a>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("Fix errors on the page")}}
            </div>
        </div>
    </div>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("TCP")}}</span>
        <span>{{html localeString("UDP")}}</span>
        <span>{{html localeString("TCP/UDP")}}</span>
    </span>
</script>

<script id="network:devices" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("View Info on devices connected to your network")}}</span></h1>
    </div>
    <div class="base-content">
        <div class="expandable-list" data-key="devices-list">
            <div class="expandable-list-title">
                <div data-key="deviceName" class="block device-name">
                    <span class="translation-string">
                        {{html localeString("Device Name")}}
                    </span>
                </div>
                <div data-key="deviceAddress" class="block ipaddress">
                    <span class="translation-string">
                        {{html localeString("IP Address")}}
                    </span>
                </div>
                <div data-key="devicePhysAddress" class="block macaddress">
                    <span class="translation-string">
                        {{html localeString("MacAddress")}}
                    </span>
                </div>
                <div class="block show-hide">&nbsp;</div>
            </div>
            <div class="devices">
                {{each(key, device) data.devices}}
                    <div class="expandable-list-item {{if device.hasConflict}}conflict{{/if}} ${device.statusClass} ${device.mac}" data-key="${device.mac}">

                        <div data-key="deviceName" class="block device-name">
                            <div class="device-info">
                                <div class="connection ${device.interfaceType}"></div>
                                <div class="device small ${device.icon} ${device.statusClass}  {{if device.hasConflict}}conflict{{/if}}">
                                    <div class="icon"></div>
                                </div>
                                <div class="device-name">
                                    ${device.name}
                                </div>
                            </div>
                        </div>

                        <div data-key="deviceAddress" class="block ipaddress">
                            <div class="connected">
                                {{if device.hasConflict}}
                                    <div class="conflict-button has-popover"  
                                    data-popover-template-id="network:devices:ip-conflict"
                                    data-popover-placement="top"></div>
                                {{/if}}
                                {{if device.address.IPv4 && device.address['static']}}
                                <div class="label-ipaddress-static">({{html localeString("static")}})</div>
                                {{/if}}
                                <div class="text">
                                    {{if device.address.IPv4}}
                                        ${device.address.IPv4}
                                    {{else}}
                                        {{html localeString('Unknown')}}
                                    {{/if}}
                                </div>
                            </div>
                            <div class="disconnected">
                                <span class="translation-string">{{html localeString("Not Connected")}}</span>
                            </div>
                        </div>
                        <div data-key="devicePhysAddress" class="block macaddress">
                            ${device.mac}
                        </div>

                        <div class="block show-hide">
                            <div class="show-hidden default">
                                <div class="icon"></div>
                                <div class="text">
                                    <span class="translation-string">{{html localeString("Details")}}</span>
                                </div>
                            </div>
                            <div class="show-hidden expanded">
                                <div class="icon"></div>
                                <div class="text">
                                    <span class="translation-string">{{html localeString("Hide")}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="list-item-hidden">
                            <a class="customize-device" data-macaddress="${device.mac}" data-type="${device.interfaceType}">
                                {{html localeString("Customize Device")}}
                            </a>

                            <div class="table">

                                {{if !device.status}}
                                    {{if device.parentalControlStatus}}
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("Parental Control Profile")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    <span class="translation-string">{{html localeString("Enabled")}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    {{/if}}
                                    <div class="table-row">
                                        <div class="left">
                                            <span class="translation-string">{{html localeString("Status")}}</span>
                                        </div>
                                        <div class="right">
                                            <div class="block text">
                                                <span class="translation-string">{{html localeString("Not Connected")}}</span>
                                            </div>
                                        </div>
                                    </div>

                                {{else}}

                                    {{if data.IPv6Enabled && device.address.IPv6.length }}
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("IPv6")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    {{each(ipKey, ipValue) device.address.IPv6}}
                                                        ${ipValue} <br>
                                                    {{/each}}
                                                </div>
                                            </div>
                                        </div>
                                    {{/if}}

                                    {{if device.parentalControlStatus}}
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("Parental Control Profile")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    <span class="translation-string">{{html localeString("Enabled")}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    {{/if}}

                                    {{if device.portForwarding.length}}
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("Port Forwarding")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    {{each(portKey, portValue) device.portForwarding}}
                                                        <span>
                                                            {{if portValue.ports.entry.length > 1 }}
                                                                <span class="translation-string">{{html localeString("Ports:")}}</span>
                                                            {{else}}
                                                                 <span class="translation-string">{{html localeString("Port:")}}</span>
                                                            {{/if}}
                                                        </span>
                                                        <span>
                                                            {{if portValue.ports.entry.length > 1 }}
                                                                ${portValue.ports.entry[0]}-${portValue.ports.entry[1]}
                                                            {{else}}
                                                                ${portValue.ports.entry[0]}
                                                            {{/if}}
                                                        </span><br>
                                                        <span class="translation-string">{{html localeString("Service:")}}</span>
                                                        <span>${portValue.name}</span>
                                                        <br>

                                                        {{if (portKey + 1) < device.portForwarding.length }}
                                                            <br>
                                                        {{/if}}
                                                    {{/each}}
                                                </div>
                                            </div>
                                        </div>
                                    {{/if}}
                                {{/if}}

                                {{if device.status}}
                                    {{if device.interfaceType === 'wireless'}}
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    ${device.interfaceSSID}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("WiFi Interface")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    ${device.interfaceAPName}
                                                </div>
                                            </div>
                                        </div>
                                        <!-- temprarly disabled due to no NP support
                                        <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("Operating Mode")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">802.11${device.wlanStandart}</div>
                                            </div>
                                        </div> -->
                                    {{else}}
                                       <div class="table-row">
                                            <div class="left">
                                                <span class="translation-string">{{html localeString("Gateway Port")}}</span>
                                            </div>
                                            <div class="right">
                                                <div class="block text">
                                                    ${device.gatewayPort}
                                                </div>
                                            </div>
                                        </div>
                                    {{/if}}
                                {{/if}}
                            </div>

                            {{if !device.status}}
                                <a class="button no-highlighting secondary do-delete remove-device">
                                    <span class="translation-string">{{html localeString("Remove Device")}}</span>
                                </a>
                            {{/if}}
                        </div>
                    </div>
                {{/each}}
            </div>
            {{if data.WPSStatus || swc.Utils.NPVersion === 'NP5'}}
            <a class="button no-highlighting secondary wps-pairing {{if data.wifiState !== 'on'}}disabled{{/if}}">
                <span class="translation-string">{{html localeString("Add WiFi Device")}}</span>
            </a>
            {{/if}}
        </div>
    </div>

    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Generic Device")}}</span>
        <span class="translation-string">{{html localeString("Miscellaneous")}}</span>
        <span class="translation-string">{{html localeString("Unrecognized device")}}</span>
        <span class="translation-string">{{html localeString("Computer")}}</span>
        <span class="translation-string">{{html localeString("Laptop")}}</span>
        <span class="translation-string">{{html localeString("TV Box")}}</span>
        <span class="translation-string">{{html localeString("Mobile Phone")}}</span>
        <span class="translation-string">{{html localeString("iPad")}}</span>
        <span class="translation-string">{{html localeString("Tablet")}}</span>
        <span class="translation-string">{{html localeString("IP Radio")}}</span>
        <span class="translation-string">{{html localeString("IP-Phone")}}</span>
        <span class="translation-string">{{html localeString("IP Camera")}}</span>
        <span class="translation-string">{{html localeString("Imaging")}}</span>
        <span class="translation-string">{{html localeString("Wireless device")}}</span>
        <span class="translation-string">{{html localeString("Wireless Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Wireless Repeater")}}</span>
        <span class="translation-string">{{html localeString("Game Console")}}</span>
        <span class="translation-string">{{html localeString("Set-Top Box")}}</span>
        <span class="translation-string">{{html localeString("Printer")}}</span>
        <span class="translation-string">{{html localeString("Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Homeplug")}}</span>
        <span class="translation-string">{{html localeString("Network Storage")}}</span>
        <span class="translation-string">{{html localeString("Operating Mode")}}</span>
    </span>
</script>

<!-- Global Login layout -->
<script id="login-layout" type="text/x-jquery-tmpl">
    <div class="top-panel"></div>

    <div class="table logo-language">
        <div class="table-row">
            <div class="left block-logo">
                <div class="logo"></div>
            </div>
            <div class="right block-locale">
                <div class="swc-dropdown locale-selector disable-gradient" data-class="locale-selector" data-value="" data-selected="">
                    <div class="selected-option"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div id="current-page" class="current-page"></div>
    </div>

    <div class="bottom-panel">
        <div class="panel-content">
            <div class="text-block links">
                <div class="text-link">
                     <a href="{{html staticPagesLinks.legal}}" target="_blank">{{html localeString("Legal Aspects")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.openSource}}" target="_blank">{{html localeString("Open Source")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.imprint}}" target="_blank">{{html localeString("Imprint")}}</span></a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.contact}}" target="_blank">{{html localeString("Contact")}}</a>
                </div>
            </div>
            <div class="text-block copyright">
                <span>&copy; {{html localeString("Swisscom AG")}} 2015</span>
            </div>
        </div>
    </div>
</script>

<!-- Content View -->
<script id="nocookies" type="text/x-jquery-tmpl">
    <span class="label-image"></span>
    <span class="text title">{{html localeString("Access is not possible")}}</span>

    <div class="bock">
        <div class="message">
            <span class="text">{{html localeString("You do not have Cookies enabled in your browser.")}}</span>
        </div>
    </div>
</script>


<!-- Global Login layout -->
<script id="login-layout" type="text/x-jquery-tmpl">
    <div class="top-panel"></div>

    <div class="table logo-language">
        <div class="table-row">
            <div class="left block-logo">
                <div class="logo"></div>
            </div>
            <div class="right block-locale">
                <div class="swc-dropdown locale-selector disable-gradient" data-class="locale-selector" data-value="" data-selected="">
                    <div class="selected-option"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div id="current-page" class="current-page"></div>
    </div>

    <div class="bottom-panel">
        <div class="panel-content">
            <div class="text-block links">
                <div class="text-link">
                     <a href="{{html staticPagesLinks.legal}}" target="_blank">{{html localeString("Legal Aspects")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.openSource}}" target="_blank">{{html localeString("Open Source")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.imprint}}" target="_blank">{{html localeString("Imprint")}}</span></a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.contact}}" target="_blank">{{html localeString("Contact")}}</a>
                </div>
            </div>
            <div class="text-block copyright">
                <span>&copy; {{html localeString("Swisscom AG")}} 2015</span>
            </div>
        </div>
    </div>
</script>

<!-- Content View -->
<script id="oldie" type="text/x-jquery-tmpl">
    <span class="label-image"></span>
    <span class="text title">{{html localeString("Internet Browser not supported")}}</span>

    <div class="bock">
        <div class="message">
            <span class="text">{{html localeString("Your Internet Explorer version is outdated and is not supported")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:device" type="text/x-jquery-tmpl">
    <span class="translation-string">{{html localeString("connected")}}</span>
</script>

<script id="overview:popovers:internet-connected" type="text/x-jquery-tmpl">
    <div class="blocks internet-connection no-border narrow">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-success">
            <span class="translation-string">{{html localeString("Internet-Connected")}}</span>
        </div>
    </div>
    <div class="blocks internet-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Line Mode")}}</span>
        </div>
        <div class="block right text-grey">
            <span class="translation-string">{{html localeString(connectionType)}}</span>
        </div>
    </div>
    
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Ethernet")}}</span>
        <span class="translation-string">{{html localeString("VDSL")}}</span>
        <span class="translation-string">{{html localeString("ADSL")}}</span>
        <span class="translation-string">{{html localeString("ADSL")}}</span>
        <span class="translation-string">{{html localeString("GSM")}}</span>
    </span>
</script>

<script id="overview:popovers:internet-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks internet-connection no-border narrow">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            <span class="translation-string">{{html localeString("Not Connected")}}</span>
        </div>
    </div>
    <div class="blocks internet-connection">
        <div class="block left text-grey fullwidth">
            <span class="translation-string">{{html localeString("Please check your cable connection")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:cloud-connected" type="text/x-jquery-tmpl">
    <div class="blocks cloud-connection has-cloud-icons no-border">
        <div class="block left label">
            <div class="text">
                <span class="translation-string">{{html localeString("Status")}}</span>
            </div>
        </div>
        <div class="block right text-blue link js-go-to-cloud">
            {{if cloudService.status === 'COMPLETE'}}
                    <span class="translation-string">{{html localeString("Synced")}}</span>
            {{else cloudService.status === 'IN_PROGRESS'}}
                    <span class="translation-string">{{html localeString("Sync in progress")}}</span>
            {{else cloudService.status === 'DISABLED'}}
                    <span class="translation-string">{{html localeString("Sync stopped")}}</span>
            {{else cloudService.status === 'STORAGE_DISCONNECTED'}}
                <span class="translation-string">{{html localeString("Storage Disconnected")}}</span>
            {{else cloudService.status === 'ERROR'}}
                {{if cloudService.error === 'INVALID_CREDENTIALS'}}
                    <span class="translation-string">{{html localeString("Could not connect")}}</span>
                {{else cloudService.error === 'COMMUNICATION_ERROR'}}
                    <span class="translation-string">{{html localeString("Unable to sync data")}}</span>
                {{else cloudService.error === 'NOT_ENOUGH_LOCAL_SPACE'}}
                    <span class="translation-string">{{html localeString("Not enough space to sync data")}}</span>
                {{else cloudService.error === 'NOT_ENOUGH_REMOTE_SPACE'}}
                    <span class="translation-string">{{html localeString("Not enough space to sync data")}}</span>
                {{/if}}
            {{/if}}
        </div>
        <div class="block fullwidth text-grey">
            {{if cloudService.status === 'ERROR'}}
                {{if cloudService.error === 'INVALID_CREDENTIALS'}}
                    <span class="translation-string">{{html localeString("Last login attempt on %lastLogin% has failed. Please check your internet connection and try to login later again.", {lastLogin: cloudService.lastLogin})}}</span>
                {{else cloudService.error === 'COMMUNICATION_ERROR'}}
                    <span class="translation-string">{{html localeString('There are troubles syncing some content. Try again by clicking "Sync" button or wait for 1 min for next sync attempt.')}}</span>        
                {{else cloudService.error === 'NOT_ENOUGH_LOCAL_SPACE'}}
                     <span class="translation-string">{{html localeString("There is not enough space on your Central Storage to sync data. Please free some space.")}}</span>
                {{else cloudService.error === 'NOT_ENOUGH_REMOTE_SPACE'}}
                    <span class="translation-string">{{html localeString("There is not enough space on your Cloud Account to sync data.")}}</span>
                {{/if}}
            {{else cloudService.status === 'STORAGE_DISCONNECTED'}}
                <span class="translation-string">{{html localeString("Please check if your Central Storage device is connected to the %ProductName%")}}</span>
            {{/if}}
        </div>
    </div>

    {{if cloudService.accountName}}
        <div class="blocks cloud-connection disabled-for-superadmin">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Account")}}</span>
            </div>
            <div class="block right text-grey">
            <div class="service {{if cloudService.status=='INVALID_CREDENTIALS'}}credentialsProblem{{/if}}">
                <div class="icons {{if cloudService.id === 'dropbox'}}dropbox{{else}}googledrive{{/if}}"></div>
                ${cloudService.accountName}
            </div>
        </div>
    {{/if}}

    <div class="blocks cloud-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Space")}}</span>
        </div>
        <div class="block right text-grey">
            {{if cloudService.status === 'ERROR' && cloudService.error === 'NOT_ENOUGH_REMOTE_SPACE'}}
            <span class="translation-string">{{html localeString('<span class="text-error">%free% (%freePercents%%)</span> free of %total%', {free: cloudService.freeSpace, freePercents: cloudService.freePercents, total: cloudService.totalSpace})}}</span>
            {{else}}
            <span class="translation-string">{{html localeString("%free% (%freePercents%%) free of %total%", {free: cloudService.freeSpace, freePercents: cloudService.freePercents, total: cloudService.totalSpace})}}</span>
            {{/if}}
        </div>
    </div>

    {{if cloudService.lastSyncDate}}
        <div class="blocks cloud-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Last Sync")}}</span>
            </div>
            <div class="block right text-grey">
                {{html cloudService.lastSync}}
            </div>
        </div>
    {{/if}}
</script>

<script id="overview:popovers:gateway-connected" type="text/x-jquery-tmpl">
    <div class="blocks gateway-connection no-border">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-success">
            <span class="translation-string">{{html localeString("Connected to the Internet")}}</span>
        </div>
    </div>
     {{if conflict && !APconflict}}
     <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            <span class="translation-string">{{html localeString("IP conflict")}}</span>
        </div>
    </div>
    <div class="blocks gateway-connection">
        <div class="block left text-grey fullwidth">
            <span class="translation-string">{{html localeString("At least two of your connected devices use the same IP address. Please make sure that you have not setup any fixed IP addresses on the affected devices. ")}}</span>
        </div>
    </div>
    {{/if}}
    {{if APconflict}}
     <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            <span class="translation-string">{{html localeString("Central Storage IP conflict")}}</span>
        </div>
    </div>
    <div class="blocks gateway-connection">
        <div class="block left text-grey fullwidth">
            <span class="translation-string">{{html localeString("At least one of your connected devices use the same IP address as the Central Storage. Please make sure that you have not setup any fixed IP addresses on the affected devices. ")}}</span>
        </div>
    </div>
    {{/if}}
    <!--
    <div class="blocks gateway-connection">
        <div class="block left">
            <span class="translation-string">{{html localeString("Name")}}</span>
        </div>
        <div class="block right text-grey">
            ${deviceName}
        </div>
    </div>
    -->
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Internet IP Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${remoteIPAddress}
        </div>
    </div>
    {{if IPv6Address}}
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Internet IPv6 Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${IPv6Address}
        </div>
    </div>
    {{/if}}
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Local IP Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${localIPAddress}
        </div>
    </div>
    {{if GlobalEnable}}
    <div class="blocks gateway-connection hide-starlite hide-starlink">
        <div class="block left label">
            <span class="translation-string nowrap">{{html localeString("Central Storage IP Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${storageIPAddress}
        </div>
    </div>
    {{/if}}
</script>

<script id="overview:popovers:gateway-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks gateway-connection no-border">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            {{if connectionMode === "CONNECTION_IN_PROGRESS"}}
                <span class="translation-string">{{html localeString("Internet problem detected")}}</span>
            {{else}}
                <span class="translation-string">{{html localeString("Not Connected to the Internet")}}</span>
            {{/if}}
        </div>
    </div>
    <div class="blocks gateway-connection">
        <div class="block left text-grey fullwidth">
            {{if connectionMode === "CONNECTION_IN_PROGRESS"}}
                <span class="translation-string">{{html localeString("The Internet-Box is connected to the Swisscom network but has no Internet access. Please reboot the Internet-Box. In case the problem remains, contact the Swisscom Service center.")}}</span>
            {{else}}
                <span class="translation-string">{{html localeString("Please check your cable connection")}}</span>
            {{/if}}
        </div>
    </div>
    {{if conflict && !APconflict}}
     <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            <span class="translation-string">{{html localeString("IP conflict")}}</span>
        </div>
    </div>
    <div class="blocks gateway-connection">
        <div class="block left text-grey fullwidth">
            <span class="translation-string">{{html localeString("At least two of your connected devices use the same IP address. Please make sure that you have not setup any fixed IP addresses on the affected devices. ")}}</span>
        </div>
    </div>
    {{/if}}
    {{if APconflict}}
     <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-error">
            <span class="translation-string">{{html localeString("Central Storage IP conflict")}}</span>
        </div>
    </div>
    <div class="blocks gateway-connection">
        <div class="block left text-grey fullwidth">
            <span class="translation-string">{{html localeString("At least one of your connected devices use the same IP address as the Central Storage. Please make sure that you have not setup any fixed IP addresses on the affected devices. ")}}</span>
        </div>
    </div>
    {{/if}}
    <!--
    <div class="blocks gateway-connection">
        <div class="block left">
            <span class="translation-string">{{html localeString("Name")}}</span>
        </div>
        <div class="block right text-grey">
            ${deviceName}
        </div>
    </div>
    -->
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Local IP Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${localIPAddress}
        </div>
    </div>
    {{if GlobalEnable && swc.Utils.DeviceType === 'default'}}
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string nowrap">{{html localeString("Central Storage IP Address")}}</span>
        </div>
        <div class="block right text-grey">
            ${storageIPAddress}
        </div>
    </div>
    {{/if}}
    <div class="blocks gateway-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Last Connection")}}</span>
        </div>
        <div class="block right text-grey">
            {{html formatDate(lastConnection)}}
        </div>
    </div>
</script>

<script id="overview:popovers:wired-connected" type="text/x-jquery-tmpl">
    <div class="blocks wired-connection no-border narrow">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-grey">
            {{if wiredDevicesCount === 0 || wiredDevicesCount > 1}}
                ${wiredDevicesCount} <span class="translation-string">{{html localeString("devices connected")}}</span>
            {{else}}
                ${wiredDevicesCount} <span class="translation-string">{{html localeString("device connected")}}</span>
            {{/if}}
        </div>
    </div>

</script>

<script id="overview:popovers:wired-disconnected" type="text/x-jquery-tmpl">
    <div class="connections no-border">
        <div class="wired-connection disconnected narrow">
            <span class="translation-string">{{html localeString("No devices connected")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:phones-connected" type="text/x-jquery-tmpl">
    <div class="blocks no-border">
        <div class="block left label">
            <span class="translation-string">{{html localeString("VOIP")}}</span>
        </div>
        <div class="block right {{if voipStatus}}text-success{{else}}text-error{{/if}}">
            <span class="translation-string">{{if voipStatus}}{{html localeString("Connected")}}{{else}}{{html localeString("Disconnected")}}{{/if}}</span>
        </div>
    </div>
    <div class="blocks phones-connection has-switcher">
        <div class="block left label">
            <div class="text">
                <span class="translation-string">{{html localeString("DECT")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher checked set-dect-state" data-value="true">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="overview:popovers:phones-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks no-border narrow">
        <div class="block left label">
            <span class="translation-string">{{html localeString("VOIP")}}</span>
        </div>
        <div class="block right {{if voipStatus}}text-success{{else}}text-error{{/if}}">
            <span class="translation-string">{{if voipStatus}}{{html localeString("Connected")}}{{else}}{{html localeString("Disconnected")}}{{/if}}</span>
        </div>
    </div>
    <div class="blocks phones-connection has-switcher narrow">
        <div class="block left label">
            <div class="text">
                <span class="translation-string">{{html localeString("DECT")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher set-dect-state enable" data-value="false">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="overview:popovers:usb-connected" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection has-switcher no-border hide-starlite hide-starlink" style="display:none">
        <div class="block left label label media-and-data">
            <div class="text">
                <span class="translation-string">{{html localeString("Media & Data Sharing")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher checked set-central-storage-state" data-value="true">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block left">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-grey">
            {{if usbDevicesCount === 0 || usbDevicesCount > 1}}
                ${usbDevicesCount} <span class="translation-string">{{html localeString("devices connected")}}</span>
            {{else}}
                ${usbDevicesCount} <span class="translation-string">{{html localeString("device connected")}}</span>
            {{/if}}
        </div>
    </div>
    <div class="blocks usb-connection hide-starlite hide-starlink" style="display:none">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Media Server (DLNA Streaming)")}}</span>
        </div>
        <div class="block right text-blue">
            <span class="translation-string">
                {{if mediaServerStatus}}
                    {{html localeString("On")}}
                {{else}}
                    {{html localeString("Off")}}
                {{/if}}
            </span>
        </div>
    </div>
</script>

<script id="overview:popovers:usb-disconnected" type="text/x-jquery-tmpl">
    {{if GlobalEnable}}
    <div class="blocks usb-connection has-switcher hide-stargate hide-starlite hide-starlink no-border" style="display: none">
        <div class="block left label media-and-data">
            <div class="text">
                <span class="translation-string">{{html localeString("Media & Data Sharing")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher set-central-storage-state enable" data-value="false">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block left label">
            <span class="translation-string">{{html localeString("Status")}}</span>
        </div>
        <div class="block right text-grey">
            <span class="translation-string">{{html localeString("No devices connected")}}</span>
        </div>
    </div>
    {{else}}
    <div class="blocks no-border">
        <div class="text">
            <span class="translation-string">{{html localeString("USB Port and SD card are not supported yet.")}}</span>
        </div>
    </div>
    {{/if}}
</script>

<script id="overview:popovers:wifi-connected" type="text/x-jquery-tmpl">
    <div class="blocks wifi-connection has-switcher no-border">
        <div class="block wifi-status left label">
            <div class="text">
                <span class="translation-string">{{html localeString("Wi-Fi")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher checked set-wifi-state" data-value="true">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{if wifi24GHzStatus && !wifiCombinedMode }}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Wi-Fi Name 2.4 GHz (SSID)")}}</span>
            </div>
            <div class="block right text-grey">
                ${wifi24GHzName}
            </div>
        </div>
    {{/if}}

    {{if wifi5GHzStatus && !wifiCombinedMode }}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Wi-Fi Name 5.0 GHz (SSID)")}}</span>
            </div>
            <div class="block right text-grey">
                ${wifi5GHzName}
            </div>
        </div>
    {{/if}}

    {{if wifiCombinedMode}}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Wi-Fi Name (SSID)")}}</span>
            </div>
            <div class="block right text-grey">
                ${wifi24GHzName}
            </div>
        </div>
    {{/if}}

    {{if wifiGuestStatus }}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Guest Wi-Fi Name")}}</span>
            </div>
            <div class="block right text-grey">
                ${wifiGuestName}
            </div>
        </div>
    {{/if}}

    {{if wifiSchedulerState }}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Scheduling")}}</span>
            </div>
            <div class="block right text-blue">
                <span class="translation-string">{{html localeString("Activated")}}</span>
            </div>
        </div>
    {{/if}}
</script>

<script id="overview:popovers:wifi-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks wifi-connection has-switcher no-border">
        <div class="block wifi-status left label">
            <div class="text">
                <span class="translation-string">{{html localeString("Wi-Fi")}}</span>
            </div>
        </div>
        <div class="block right">
            <div class="swc-switcher set-wifi-state enable" data-value="false">
                <div class="switcher-container">
                    <div class="btn"></div>
                    <div class="icon">
                        <div class="container">
                            <div class="bg">
                                <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{if wifiSchedulerState }}
        <div class="blocks wifi-connection">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Scheduling")}}</span>
            </div>
            <div class="block right text-blue">
                <span class="translation-string">{{html localeString("Activated")}}</span>
            </div>
        </div>
    {{/if}}
</script>

<script id="overview:popovers:device-connected" type="text/x-jquery-tmpl">
    <div class="blocks devices no-border narrow">
        <div class="block left label">
            ${name}
        </div>
        <div class="block right text-blue">
            <a class="customize-device" data-macaddress="${mac}" data-type="${interfaceType}">{{html localeString("Customize")}}</a>
        </div>
    </div>

     {{if hasConflict}}
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Status")}}</span>
            </div>
            <div class="block right">
                <span class="text-error">{{html localeString("IP conflict")}}</span>
            </div>
        </div>
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("MAC address")}}</span>
            </div>
            <div class="block right">
                <span>${mac}</span>
            </div>
        </div>
    {{/if}}

    {{if interfaceSSID}}
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
            </div>
            <div class="block right">
                <span class="translation-string">${interfaceSSID}</span>
            </div>
        </div>
    {{/if}}

    {{if address.IPv4}}
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("IP Address")}}</span>
            </div>
            <div class="block right">
                {{if address['static']}}
                    <span class="label-ipaddress-static">({{html localeString("static")}})</span>
                {{/if}}
                <span>${address.IPv4}</span>
            </div>
        </div>
    {{/if}}

    {{if address.IPv6.length && IPv6Enabled}}
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("IPv6 Address")}}</span>
            </div>
            <div class="block right">
                <ul>
                {{each address.IPv6}}
                    <li>${$value}</li>
                {{/each}}
                </ul>
            </div>
        </div>
    {{/if}}
</script>

<script id="overview:popovers:device-vpn" type="text/x-jquery-tmpl">
    <div class="blocks devices no-border narrow">
        <div class="block left label">
            {{html localeString("Connection over VPN")}}
        </div>
    </div>

    {{if address.IPv4}}
        <div class="blocks devices narrow">
            <div class="block left label">
                <span class="translation-string">{{html localeString("Remote IP Address")}}</span>
            </div>
            <div class="block right">
                {{if address['static']}}
                    <span class="label-ipaddress-static">({{html localeString("static")}})</span>
                {{/if}}
                <span>${address.IPv4}</span>
            </div>
        </div>
    {{/if}}
</script>

<script id="overview:popovers:device-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks devices no-border narrow">
        <div class="block not-connected text-grey left label">
            <span class="translation-string">{{html localeString("Not Connected")}}</span>
        </div>
        <div class="block right">
            <a class="button no-highlighting disabled primary">
                <span class="translation-string">{{html localeString("Remove Device")}}</span>
            </a>
        </div>
    </div>
    <div class="blocks devices narrow">
        <div class="block left label">
            ${name}
        </div>
        <div class="block right text-blue">
            <span class="translation-string">{{html localeString("Customize")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:phone-port-connected" type="text/x-jquery-tmpl">
    <div class="blocks phone-port no-border">
        <div class="block left label text-purple fullwidth">
            {{html localeString("Phone port")}} ${number}
        </div>
     </div>
     <div class="blocks phone-port external-number">
        <div class="block left label text-purple">
            {{html localeString("Phone number")}}
        </div>
        <div class="block right text-grey">
            ${numbers.external}
        </div>
     </div>
      <div class="blocks phone-port no-border internal-number">
        <div class="block left label text-grey">
            {{html localeString("Internal")}}
        </div>
        <div class="block right text-grey">
            ${numbers.internal}
        </div>
     </div>
</script>

<script id="overview:popovers:phone-port-disconnected" type="text/x-jquery-tmpl">
    <div class="blocks phone-port no-border">
        <div class="block fullwidth not-connected text-grey left">
            <span class="translation-string">{{html localeString("Not Registered")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:device-storage" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection no-border">
        <div class="block left label text-purple">
            ${label}
        </div>
        <div class="block right text-blue">
            <span class="translation-string hidden-strings">{{html localeString("Customize")}}</span>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block left label text-purple">
            <span class="translation-string">{{html localeString("Space")}}</span>
        </div>
        <div class="block right text-grey">
            ${freeSpace} <span class="translation-string">{{html localeString("free of")}}</span> ${capacity}
        </div>
    </div>
    {{if cloudServicesState}}
        <div class="blocks usb-connection">
            <div class="block left label text-purple">
                <span class="translation-string">{{html localeString("Cloud Sync")}}</span>
            </div>
            <div class="block right text-blue">
                {{if isSync}}
                    <span class="translation-string">{{html localeString("Enabled")}}</span>
                {{else}}
                    <span class="translation-string">{{html localeString("Disabled")}}</span>
                {{/if}}
            </div>
        </div>
    {{/if}}
    <div class="blocks usb-connection disabled-for-superadmin">
        <div class="block fullwidth right text-purple">
            <a class="button primary usb-secure-remove no-highlighting" data-id="${id}">
                <span class="translation-string">{{html localeString("Secure Remove")}}</span>
            </a>
        </div>
    </div>
</script>

<script id="overview:popovers:device-storage-usb-disc-unsupported" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection no-border">
        <div class="block fullwidth text-purple left ">
            <span class="translation-string">{{html localeString("Unsupported file format")}}</span>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block fullwidth text-grey left ">
            <span class="translation-string">{{html localeString("Please use another USB disk")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:device-storage-sd-card-unsupported" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection no-border">
        <div class="block fullwidth text-purple left ">
            <span class="translation-string">{{html localeString("Unsupported file format")}}</span>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block fullwidth text-grey left ">
            <span class="translation-string">{{html localeString("Please use another SD card")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:device-storage-usb-device-unsupported" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection no-border">
        <div class="block fullwidth text-purple left ">
            <span class="translation-string">{{html localeString("Unsupported USB device")}}</span>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block fullwidth text-grey left ">
            <span class="translation-string">{{html localeString("Please use another USB device")}}</span>
        </div>
    </div>
</script>

<script id="overview:popovers:device-emergency" type="text/x-jquery-tmpl">
    <div class="blocks usb-connection no-border">
        <div class="block left label text-purple">
            <span>
                {{html localeString("Status")}}
            </span>
        </div>
        <div class="block right {{if isConnected}}text-success {{else}} text-grey{{/if}} ">
            <span>
                {{html localeString(status)}}
            </span>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block left label text-purple provider-info">
            <span class="connection-info">
                {{html localeString("Connection")}}
            </span>
        </div>
        <div class="block right text-grey provider-info">
            <div class="icons emergency-power power-${signalLevel}"></div>
            <div class="emergency-provider">
                {{html localeString(technology)}}
            </div>
        </div>
    </div>
    <div class="blocks usb-connection">
        <div class="block left label text-purple">
            <span>
                {{html localeString("Type")}}
            </span>
        </div>
        <div class="block right text-grey device-name">
            <span>
               ${deviceName}
            </span>
        </div>
    </div>
    
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("3G-Unconfigured")}}</span>
        <span class="translation-string">{{html localeString("3G-Connecting")}}</span>
        <span class="translation-string">{{html localeString("3G-Connected")}}</span>
        <span class="translation-string">{{html localeString("3G-Disconnected")}}</span>
        <span class="translation-string">{{html localeString("3G-PendingDisconnect")}}</span>
        <span class="translation-string">{{html localeString("3G-Disconnecting")}}</span>
        <span class="translation-string">{{html localeString("none")}}</span>
        <span class="translation-string">{{html localeString("gprs")}}</span>
        <span class="translation-string">{{html localeString("edge")}}</span>
        <span class="translation-string">{{html localeString("umts")}}</span>
        <span class="translation-string">{{html localeString("hsdpa")}}</span>
        <span class="translation-string">{{html localeString("hsupa")}}</span>
        <span class="translation-string">{{html localeString("hspa")}}</span>
        <span class="translation-string">{{html localeString("lte")}}</span>
    </span>
</script>

<script id="overview:popovers:device-dect" type="text/x-jquery-tmpl">
    <div class="blocks dect-device no-border">
        <div class="block left label text-purple">
            ${name}
        </div>
        <div class="block right text-blue">
            <a class="customize-dect" data-name="${name}" data-line="${line}" data-phonenumber="${phoneNumber}" data-internalnumber="${internalNumber}" data-outgoingtrunkline="${outgoingTrunkLine}">{{html localeString("Customize")}}</a>
        </div>
    </div>
    <div class="blocks dect-device phone-numer">
        <div class="block left label text-purple">
            <span class="translation-string">{{html localeString("Phone number")}}</span>
        </div>
        <div class="block right text-grey">
            ${phoneNumber}
        </div>
    </div>
    <div class="blocks dect-device inter-number">
        <div class="block left label text-grey">
            <span class="translation-string">{{html localeString("Internal")}}</span>
        </div>
        <div class="block right text-grey">
            ${internalNumber}
        </div>
    </div>
</script>

<script id="overview:modal-windows:customize-device" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Customize a Device")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Device Name")}}</span>

        <div class="device-info">
            <div class="name-edit">
                <input type="text" class="swc-input" value="${data.device.name}" name="device-name"
                       data-mac="${data.device.mac}"
                       data-name="${data.device.name}"
                       data-type="${data.device.type}">
            </div>
            <div class="validation-message" data-parameter-name="device-name">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Device Name: Global Device Name requirements")}}
                    </span>
                </div>
            </div>
        </div>

        {{if !_.isUndefined(data.sahDeviceTypes) }}
        <div class="device-icon">
            <div class="icon-title">
                <span class="translation-string">
                    {{html localeString("Device Icon")}}
                </span>                 
            </div>
            <div class="icon-list">
                <ul class="devices-list-scroll" data-page="1">
                    {{each(idx, deviceType) data.sahDeviceTypes}}
                        <li>
                            <div class="device ${data.supported[deviceType].deviceIcon} {{if data.device.type === deviceType}}selected{{/if}}" data-type="${deviceType}">
                                <div class="icon"></div>
                                <div class="name">${data.supported[deviceType].deviceTypeText}</div>
                            </div>
                        </li>
                        {{if ((parseInt((idx+1) % data.pageItems, 10) === 0) && (data.pages > 1))}}
                        </ul>
                        <ul class="devices-list-scroll" data-page="${parseInt((idx+1)/data.pageItems, 10) + 1}">
                        {{/if}}
                    {{/each}}
                </ul>
            </div>
            {{if data.pages > 1 }}
                <div class="icon-pagination">
                    <div class="container">
                        <div class="items navigation left"></div>

                        {{each(key, page) data.pagesArray}}
                            <div class="items page switch-page {{if (key + 1) === data.pageActive}}active{{/if}}" data-page="${(key + 1)}"></div>
                        {{/each}}

                        <div class="items navigation right"></div>
                    </div>
                </div>
            {{/if}}
        </div>
        {{/if}}        
    </div>
    <div class="modal-buttons" {{if _.isUndefined(data.sahDeviceTypes) }}style="border-top: 0px;"{{/if}}>
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Save Changes")}}</span>
        </a>
    </div>

    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Generic Device")}}</span>
        <span class="translation-string">{{html localeString("Miscellaneous")}}</span>
        <span class="translation-string">{{html localeString("Unrecognized device")}}</span>
        <span class="translation-string">{{html localeString("Computer")}}</span>
        <span class="translation-string">{{html localeString("Laptop")}}</span>
        <span class="translation-string">{{html localeString("TV Box")}}</span>
        <span class="translation-string">{{html localeString("Mobile Phone")}}</span>
        <span class="translation-string">{{html localeString("iPad")}}</span>
        <span class="translation-string">{{html localeString("Tablet")}}</span>
        <span class="translation-string">{{html localeString("IP Radio")}}</span>
        <span class="translation-string">{{html localeString("IP-Phone")}}</span>
        <span class="translation-string">{{html localeString("IP Camera")}}</span>
        <span class="translation-string">{{html localeString("Imaging")}}</span>
        <span class="translation-string">{{html localeString("Wireless device")}}</span>
        <span class="translation-string">{{html localeString("Wireless Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Wireless Repeater")}}</span>
        <span class="translation-string">{{html localeString("Game Console")}}</span>
        <span class="translation-string">{{html localeString("Set-Top Box")}}</span>
        <span class="translation-string">{{html localeString("Printer")}}</span>
        <span class="translation-string">{{html localeString("Video Bridge")}}</span>
        <span class="translation-string">{{html localeString("Homeplug")}}</span>
        <span class="translation-string">{{html localeString("Network Storage")}}</span>
        <span class="translation-string">{{html localeString("AV Player")}}</span>
    </span>
</script>

<script id="overview:modal-windows:customize-dect" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Customize DECT Device")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Device Name")}}</span>

        <div class="device-info">
            <div class="name-edit">
                <input type="text" class="swc-input" value="${data.device.name}" name="device-name"
                       data-line="${data.device.line}"
                       data-name="${data.device.name}"
                       data-type="${data.device.type}">
            </div>
            <div class="validation-message" data-parameter-name="device-name">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Device Name: Global Device Name requirements")}}
                    </span>
                </div>
            </div>
        </div>

    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Save Changes")}}</span>
        </a>
    </div>
</script>

<script id="overview" type="text/x-jquery-tmpl">
	<span class="hidden-strings">
        <span class="translation-string">{{html localeString("Unsupported Device")}}</span>
        <span class="translation-string">{{html localeString("VPN Remote")}}</span>
	</span>
    <h1> <span class="translation-string">{{html localeString("Home Network Overview")}}</span></h1>

    <div class="connections-info">
        <div class="connection has-popover {{if data.internetState === false}}disconnected{{/if}} internet" data-type="internet">
            <div class="text title"> <span class="translation-string">{{html localeString("Internet")}}</span></div>
            <div class="icon"></div>
            <div class="wire"></div>
            <div class="lteModem"></div>
        </div>
        <div class="speed-check-module hide-starlite hide-starlink">
            <div class="speed-check text disconnected">
                <span class="image"></span>
                <span class="translation-string">{{html localeString("Speed-Check")}}</span>
            </div>
        </div>

        <div class="connection has-popover gateway {{if data.conflict}}conflict{{/if}}" data-type="gateway">
            <div class="icon"></div>
            <div class="title no-highlighting"> <span class="translation-string">{{html localeString("Gateway")}}</span></div>
        </div>

        <div class="connection has-popover cloud
            {{if !data.cloudService.status || !data.centralStorageState}}
                disconnected
            {{else}}
                {{if data.cloudService.status === 'COMPLETE'}}
                    complete
                {{else data.cloudService.status === 'IN_PROGRESS'}}
                    synching
                {{else data.cloudService.status === 'DISABLED'}}
                    pause
                {{else data.cloudService.status === 'STORAGE_DISCONNECTED'}}
                    error
                {{else data.cloudService.status === 'ERROR'}}
                    {{if data.cloudService.error === 'INVALID_CREDENTIALS'}}
                        credentialsProblem
                    {{else data.cloudService.error === 'COMMUNICATION_ERROR'}}
                        warning
                    {{else data.cloudService.error === 'NOT_ENOUGH_LOCAL_SPACE'}}
                        warning
                    {{else data.cloudService.error === 'NOT_ENOUGH_REMOTE_SPACE'}}
                        warning
                    {{/if}}
                {{/if}}            
            {{/if}}
            " data-type="cloud">
            <div class="title no-highlighting">
                <div class="cloud-service dropbox-account {{if !data.cloudService || data.cloudService.id !== 'dropbox'}}hidden{{/if}}">
                    <span class="translation-string">{{html localeString("Dropbox")}}</span>
                </div>
                <div class="cloud-service googledrive-account {{if !data.cloudService || data.cloudService.id !== 'googledrive'}}hidden{{/if}}">
                    <span class="translation-string">{{html localeString("Google Drive")}}</span>
                </div>
            </div>
            <div class="icon"></div>
            <div class="wire"></div>
        </div>

        <div class="connection {{if data.wiredState === false}}disconnected{{/if}} has-popover wired" data-type="wired">
            <div class="wire"></div>
            <div class="icon"></div>
            <div class="title no-highlighting"> <span class="translation-string">{{html localeString("Wired Network")}}</span></div>
        </div>

        <div class="connection {{if data.dectState === false}}disconnected{{/if}} {{if data.voipStatus === true}}partially{{/if}} has-popover phones" data-type="phones">
            <div class="wire"></div>
            <div class="icon"></div>
            <div class="title no-highlighting"> <span class="translation-string">{{html localeString("Phones and DECT")}}</span></div>
        </div>

        <div class="connection {{if (!data.centralStorageState || !data.GlobalEnable) && data.device === 'default'}}disconnected{{/if}} has-popover usb" data-type="usb">
            <div class="wire"></div>
            <div class="icon"></div>
            <div class="title no-highlighting"> <span class="translation-string">{{html localeString("SD Card and USB")}}</span></div>
        </div>
        <div class="connection {{if data.wifiState !== 'on'}}disconnected{{/if}} {{if data.wifiSchedulerState}}scheduled{{/if}} has-popover wifi" data-type="wifi">
            <div class="wire"></div>
            <div class="icon"></div>
            <div class="title no-highlighting">
                <div class="inline-blocks">
                    <div class="block">
                        <div class="text-block">
                            <span class="translation-string">{{html localeString("Wi-Fi")}}</span>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons scheduler regular"></div>
                    </div>
                </div>

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

    <div class="devices-list">
        <div class="list wired">
            <div class="no-devices">
                 <span class="translation-string">{{html localeString("No devices connected to the wired network yet")}}</span>
            </div>
        </div>

        <div class="list phones">
            <div class="ports">
                <div class="block-ports">
                    <div class="device connection {{if !data.voipStatus || (data.wiredPhones[0] && data.wiredPhones[0].isDisabled)}}disconnected{{/if}} static-phone-1 has-popover" data-type="phone-port">
                        <div class="icon"></div>
                        <div class="has-popover">
                            <div class="name popoverName">{{html localeString("Phone Port")}} 1</div>
                        </div>
                    </div>
                </div>
                <div class="block-ports">
                    <div class="device connection {{if !data.voipStatus || (data.wiredPhones[1] && data.wiredPhones[1].isDisabled)}}disconnected{{/if}} static-phone-2 has-popover" data-type="phone-port">
                        <div class="icon"></div>
                        <div class="has-popover">
                            <div class="name popoverName">{{html localeString("Phone Port")}} 2</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dect-devices">
                <div class="text title">
                     <span class="translation-string">{{html localeString("DECT Devices")}}</span>:
                </div>
                <div class="no-devices phones">
                     <span class="translation-string">{{html localeString("No devices connected")}}</span>
                </div>
            </div>
        </div>

        <div class="list usb">
            <div class="no-devices usb">
                 <span class="translation-string">{{html localeString("No devices connected")}}</span>
            </div>
        </div>

        <div class="list wireless">
            <div class="no-devices">
                 <span class="translation-string">{{html localeString("No devices connected to the wireless network yet")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="parental:expandable:visible-part" type="text/x-jquery-tmpl">
    <div data-key="deviceName" class="block device-name">
            <div class="connection ${conType}">

            </div>
            <div class="device small ${icon} {{if isConnected}}connected{{else}}disconnected{{/if}}">
                <div class="icon"></div>
            </div>
            <div class="name">
                ${deviceName}
            </div>
    </div>
    <div data-key="parentalStatus" class='block parental-status'>
        <div class="swc-switcher parental-activate-${key} parental-activate" data-class="parental-activate-${key}" data-name="parental-activate">
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span class="translation-string">{{html localeString("On")}}</span>
                            <span class="translation-string">{{html localeString("Off")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="block show-hide">
        <div class="show-hidden default">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Details")}}</span>
            </div>
        </div>
        <div class="show-hidden expanded">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Hide")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="parental:expandable:hidden-part" class="not-translatable" type="text/x-jquery-tmpl">
    <div class="scheduler-container">
    </div>
</script>


<script id="parental" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1> <span class="translation-string">{{html localeString("Manage Parental Control")}}</span></h1>
        </div>
    </div>

    <div class="base-content tabs-content">
        <div class="devices-content inner-content" style="display: block;">
            <div class="tab-content-container">
                <div class="text" style="margin-bottom: 15px;">
                    <span class="translation-string">
                        {{html localeString("Parental Control lets you restrict the surfing times per computer, tablet and mobile phone in your home network. You define when individual devices can be connected to the Internet via a time switch. So you automatically schedule when your children can surf the Internet and when not. If you want your Parental Control function to work on the move then we recommend the")}}
                    </span>
                    <a href="http://www.swisscom.ch/internetsecurity-ib" target="_blank">
                        <span class="translation-string">
                            {{html localeString("Swisscom Internet Security subscription")}}
                        </span>
                    </a>
                </div>

                <div class="expandable-devices" data-key="devices-list">
                    <div class="expandable-list" data-key="devices-list">
                        <div class="expandable-list-title">
                            <div data-key="deviceName" class="block device-name">
                                <span class="translation-string">
                                    {{html localeString("Device Name")}}
                                </span>
                            </div>
                            <div data-key="deviceAddress" class="block parental-control">
                                <span class="translation-string">
                                    {{html localeString("Parental Control")}}
                                </span>
                            </div>
                            <div class="block show-hide">&nbsp;</div>
                        </div>
                        {{each(key, device) data.devices}}
                            <div class="expandable-list-item ${device.mac} ${device.statusClass}" data-key="${device.mac}">
                                <div class="blocks">
                                    <div class="block visible-part" data-key="visible-part">
                                        <div data-key="deviceName" class="block device-name">
                                            <div class="connection ${device.conType}"></div>
                                            <div class="device small ${device.icon} ${device.statusClass}">
                                                <div class="icon"></div>
                                            </div>
                                            <div class="name ${device.statusClass}">${device.deviceName}</div>
                                        </div>
                                        <div data-key="parentalStatus" class="block parental-status">
                                            <div class="swc-switcher parental-activate-1 parental-activate checked" 
                                                    data-class="parental-activate-1"
                                                    data-name="parental-activate"
                                                    data-default-value="${device.isEnabled}">
                                                <div class="switcher-container">
                                                    {{if device.isEnabled}}
                                                        <div class="btn" style="right: 0px;"></div>
                                                    {{else}}
                                                        <div class="btn" style="right: 40px;"></div>
                                                    {{/if}}
                                                    <div class="icon">
                                                        {{if device.isEnabled}}
                                                            <div class="container" style="right: 0px;">
                                                        {{else}}
                                                            <div class="container" style="right: 38px;">
                                                        {{/if}}
                                                            <div class="bg">
                                                                <span class="translation-string">{{html localeString("On")}}</span><span class="translation-string">{{html localeString("Off")}}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="block show-hide">
                                            <div class="show-hidden default">
                                                <div class="icon"></div>
                                                <div class="text">
                                                    <span class="translation-string">{{html localeString("Details")}}</span>
                                                </div>
                                            </div>
                                            <div class="show-hidden expanded">
                                                <div class="icon"></div>
                                                <div class="text">
                                                    <span class="translation-string">{{html localeString("Close")}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="block show-hide">
                                        <div class="show-hidden default">
                                            <div class="icon"></div>
                                            <div class="text">
                                                <span class="translation-string">{{html localeString("Details")}}</span>
                                            </div>
                                        </div>
                                        <div class="show-hidden expanded">
                                            <div class="icon"></div>
                                            <div class="text">
                                                <span class="translation-string">{{html localeString("Close")}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-item-hidden">
                                    <div class="scheduler-container">
                                    </div>
                                </div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>

        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class="button secondary disabled big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
                <a class="button primary disabled big no-highlighting save-changes"><span class="translation-string">{{html localeString("Apply")}}</span></a>
            </div>
            <div class="save-success">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Parental Control settings saved successfully")}}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Translations for expandable lists, to be refactored and deleted soon -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Device Name")}}</span>
        <span class="translation-string">{{html localeString("Parental Control")}}</span>
        <span class="translation-string">{{html localeString("Details")}}</span>
        <span class="translation-string">{{html localeString("Hide")}}</span>
        <span class="translation-string">{{html localeString("On at")}}</span>
        <span class="translation-string">{{html localeString("Off at")}}</span>
        <span class="translation-string">{{html localeString("Delete")}}</span>
        <span class="translation-string">{{html localeString("Current time: %currentTime%")}}</span>
        <span class="translation-string">{{html localeString("Click to add time slot")}}</span>
    </span>
</script>

<script id="power:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="power:wifi:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You have deleted all time slots in the schedule.")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("WiFi Scheduler will be deactivated and WiFi service will be switched off.")}}</span></div>
    <div class="horiz-line"></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Continue")}}</span></a>
    </div>
</script>

<script id="power:ap:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You have deleted all time slots in the schedule.")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Storage Scheduler will be deactivated and Storage service will be switched off.")}}</span></div>
    <div class="horiz-line"></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Continue")}}</span></a>
    </div>
</script>

<script id="power:both:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("You have deleted all time slots in the schedule.")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("WiFi and Storage Schedulers will be deactivated and WiFi and Storage services will be switched off.")}}</span></div>
    <div class="horiz-line"></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Continue")}}</span></a>
    </div>
</script>


<script id="power" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1> <span class="translation-string">{{html localeString("Power Settings")}}</span></h1>
        </div>
    </div>
    <div class="base-content tabs-content">
        <div class="tab-content-container">
            <div class="powerSettings">
                <div class="text">
                    <span class="translation-string">{{html localeString("To protect the environment, your gateway is automatically reducing power consumption if some features are not used. In order to save more energy, you can disable some features completely or by schedule. For example WiFi could be disabled at night by the WiFi scheduler.")}}</span>
                </div>

                <div class="items">
                    <div class="expandable-list">
                        <div class="expandable-list-title">
                            <div class="block service-name" data-key="service-name"><span class="translation-string">{{html localeString("Function")}}</span></div>
                            <div class="block service-status" data-key="service-status"><span class="translation-string">{{html localeString("Power saving status")}}</span></div>
                        </div>
                        <div class="expandable-list-item wifi" data-key="wifi">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="item switcher">
                                        <div class="swc-switcher {{if data.wifiState}}checked{{/if}} enable-wifi-service"
                                             data-value="{{if data.wifiState}}true{{else}}false{{/if}}">
                                            <div class="switcher-container">
                                                <div class="btn"></div>
                                                <div class="icon">
                                                    <div class="container">
                                                        <div class="bg">
                                                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-items">
                                        <div class="item feature-type">
                                            <div class="icons connection-type wireless">
                                            </div>
                                        </div>
                                        <div class="item name">
                                            <span class="translation-string">{{html localeString("WiFi")}}</span>
                                        </div>
                                        <div class="item status wifi-statuses">
                                            <div class="icons leaf"></div>
                                            <div class="text">
                                                <span class="translation-string not-activated">{{html localeString("Not Activated")}}</span>
                                                <span class="translation-string activated-schedule">{{html localeString("Activated by WiFi Scheduling")}}</span>
                                                <span class="translation-string activated-disable">{{html localeString("Activated by WiFi disabling")}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block show-hide">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Hide")}}</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item-hidden">
                                <div class="swc-checkbox enable-service-schedule {{if data.wifiSchedule}}checked{{/if}}" data-value="${data.wifiSchedule}" data-default-value="${data.wifiSchedule}">
                                    <div class="icon">
                                    </div>
                                    <div class="text"><span class="translation-string">{{html localeString("Enable WiFi Scheduling in order to save energy")}}</span></div>
                                </div>
                                <div class="scheduler-container">
                                </div>
                            </div>
                        </div>
                        {{if data.GlobalEnable}}
                        <div class="expandable-list-item storage hide-starlite" data-key="storage">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="item switcher">
                                        <div class="swc-switcher {{if data.apState}}checked{{/if}} enable-storage-service"
                                             data-value="{{if data.apState}}true{{else}}false{{/if}}">
                                            <div class="switcher-container">
                                                <div class="btn"></div>
                                                <div class="icon">
                                                    <div class="container">
                                                        <div class="bg">
                                                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-items">
                                        <div class="item feature-type">
                                            <div class="device small applications connected">
                                                <div class="icon"></div>
                                            </div>
                                        </div>
                                        <div class="item name">
                                            <span class="translation-string">{{html localeString("Storage and Media")}}</span>
                                        </div>
                                        <div class="item status ap-statuses">
                                            <div class="icons leaf"></div>
                                            <div class="text">
                                                <span class="translation-string not-activated">{{html localeString("Not Activated")}}</span>
                                                <span class="translation-string activated-schedule">{{html localeString("Activated by Storage and Media Scheduling")}}</span>
                                                <span class="translation-string activated-disable">{{html localeString("Activated by Storage and Media disabling")}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block show-hide">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Hide")}}</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item-hidden">
                                <div class="swc-checkbox enable-service-schedule {{if data.apSchedule}}checked{{/if}}" data-value="${data.apSchedule}" data-default-value="${data.apSchedule}">
                                    <div class="icon">
                                    </div>
                                    <div class="text"><span class="translation-string">{{html localeString("Enable Storage Scheduling in order to save energy")}} </span></div>
                                </div>
                                <div class="scheduler-container">
                                </div>
                            </div>
                        </div>
                        {{/if}}
                        <div class="expandable-list-item dect" data-key="dect">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="item switcher">
                                       <div class="swc-switcher {{if data.dectActivated}}checked{{/if}} enable-dect-service"
                                             data-value="{{if data.dectActivated}}true{{else}}false{{/if}}">
                                            <div class="switcher-container">
                                                <div class="btn"></div>
                                                <div class="icon">
                                                    <div class="container">
                                                        <div class="bg">
                                                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                                                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-items">
                                        <div class="item feature-type">
                                            <div class="device small dect connected">
                                                <div class="icon"></div>
                                            </div>
                                        </div>
                                        <div class="item name">
                                            <span class="translation-string">{{html localeString("DECT")}}</span>
                                        </div>
                                        <div class="item status dect-statuses">
                                            <div class="icons leaf"></div>
                                            <div class="text">
                                                <span class="translation-string not-activated">{{html localeString("Not Activated")}}</span>
                                                <span class="translation-string activated-schedule">{{html localeString("Activated by ECO mode")}}</span>
                                                <span class="translation-string activated-disable">{{html localeString("Activated by disabling DECT")}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block show-hide">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Hide")}}</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item-hidden">
                                <div class="swc-checkbox enable-eco-mode {{if !data.dectActivated}}disabled{{/if}} {{if data.dectEco}}checked{{/if}}" data-value="${data.dectEco}" data-default-value="${data.dectEco}">
                                    <div class="icon">
                                    </div>
                                    <div class="text"><span class="translation-string">{{html localeString("Enable ECO mode for DECT devices")}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class="button disabled secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
                <a class="button disabled primary big no-highlighting save-changes"><span class="translation-string">{{html localeString("Apply")}}</span></a>
            </div>
            <div class="save-success">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Power settings saved successfully")}}</span>
                </div>
            </div>
            <div class="save-error">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Power settings saving failed")}}</span>
                </div>
            </div>
        </div>
    </div>
    <span class="hidden-strings">
        <!-- Translations for expandable lists, to be refactored and deleted soon -->
        <span class="translation-string">{{html localeString("Service")}}</span>
        <span class="translation-string">{{html localeString("Power Saving Status")}}</span>
        <span class="translation-string">{{html localeString("Details")}}</span>
        <span class="translation-string">{{html localeString("Hide")}}</span>
        <span class="translation-string">{{html localeString("On at")}}</span>
        <span class="translation-string">{{html localeString("Off at")}}</span>
        <span class="translation-string">{{html localeString("Saving power settings..")}}</span>
        <span class="translation-string">{{html localeString("Delete")}}</span>
        <span class="translation-string">{{html localeString("Current time: %currentTime%")}}</span>
        <span class="translation-string">{{html localeString("Click to add time slot")}}</span>
    </span>
</script>

<script id="recovery:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Allow Recovery" }}
        <span class="translation-string">{{html localeString("Enable Password Recovery process Info Popup")}}</span>
        {{/if}}
        {{if component === 'Password recovery from 8 to 16 char'}}
        <span class="translation-string">{{html localeString("Your password must be from 8 to 16 characters long and should contain at least one digit(0-9), full stop(.), hyphen(-) or underscore(_). No umlauts (ä,ö,ü), accents(à, è, ...) or spaces are allowed. Password is case sensitive.")}}</span>
        {{/if}}
    </div>
</script>

<!-- Start Recovery View -->
<script id="recovery:start" type="text/x-jquery-tmpl">
    <div class="label-image"></div>
    <span class="text title">{{html localeString("Password Recovery")}}</span>

    <div>
        <span class="text">
             {{html localeString("You can set a new %ProductName% password.")}}<br>
             {{html localeString("For authentication, please confirm first with 5 Min the currently shown Display message on the %ProductName% with OK button.")}}
        </span>
    </div>

    {{if data.deviceType === 'default'}}
    <div class="pass-recovery-help-image">
        <div class="text">
            <p>{{html localeString("Set a new password")}}</p>
            <p>{{html localeString('Please press "OK" to allow setting of a new %ProductName% password')}}.</p>
        </div>
    </div>
    {{/if}}

    {{if data.deviceType === 'starlite'}}
    <div class="pass-recovery-help-image-starlite">
    </div>
    {{/if}}

    <div class="client-buttons left">
        <a name="back" class="button secondary big no-highlighting">{{html localeString("Back")}}</a>
    </div>
</script>

<!-- Set New Password View -->
<script id="recovery:set-password" type="text/x-jquery-tmpl">
    <div class="label-image"></div>

    <span class="text title">{{html localeString("Set New Gateway Password")}}</span>

    <div class="field-container description">
        <span class="text">{{html localeString("The new password will be used to access your Gateway.")}}</span>
    </div>

    <div class="table password-section">
        <div class="table-row new-password-section">
            <div class="left">
                {{html localeString("New Password")}}
            </div>
            <div class="right">
                <div class="block input-container">
                    <input type="password" class="swc-input validatable original" name="new-password" placeholder='{{html localeString("From 8 to 16 characters")}}'
                            data-default-value="" data-value="">
                    <input type="text" class="swc-input validatable copy" name="new-password" placeholder='{{html localeString("From 8 to 16 characters")}}'
                           data-default-value="" data-value="">
                    <span class="valid-tick"></span>
                </div>
                <div class="block">
                    <div class="icons has-popover info password-validation-info"
                         data-popover-template-id="recovery:info-icons"
                         data-popover-template-data='{ "component": "Password recovery from 8 to 16 char" }'
                         data-popover-placement="right"
                         data-popover-holder=".recovery-status-info">
                    </div>
                </div>
            </div>
        </div>
        <div class="validation-message" data-parameter-name="new-password">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="invalid characters">
                    {{html localeString("Your Password must be from 8 to 16 characters long and should contain at list one digit(0-9), full stop(.), hyphen(-) or underscore(_).")}}
                    {{html localeString("No umlauts(ä, ö, ü), accents(à, è, ...) and spaces are allowed. Password is case sensitive.")}}
                </span>
            </div>
        </div>

        <div class="table-row new-password-confirm-section">
            <div class="left">
                {{html localeString("Verify Password")}}
            </div>
            <div class="right">
                <div class="block input-container">
                    <input type="password" class="swc-input validatable original" name="new-password-confirm" data-default-value="" data-value="">
                    <input type="text" class="swc-input validatable copy" name="new-password-confirm" data-default-value="" data-value="">
                    <span class="valid-tick"></span>
                </div>
                <div class="block">
                    <div class="swc-checkbox show-password skip-validation" data-value="false">
                        <div class="icon"></div>
                        <div class="text">{{html localeString("Show Password")}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="validation-message" data-parameter-name="new-password-confirm">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="does not match">
                    {{html localeString("Validation message New Password: Does not match")}}
                </span>
            </div>
        </div>
    </div>

    <div class="info-messages">
        <div class="message error internal-error">
            <div class="icon"></div>
            <span>{{html localeString("Something got wrong! Try one more time.")}}</span>
        </div>
        <div class="message error feature-not-available">
            <div class="icon"></div>
            <span>{{html localeString("Set Password: The feature is disabled or not started.")}}</span>
        </div>
    </div>

    <div class="inline-blocks buttons-container-message">
        <div class="block client-buttons">
            <a name="save-password-button" class="button save-changes primary big no-highlighting disabled">
                {{html localeString("Save")}}
            </a>
        </div>
        <div class="block recovery-section">
            <div class="swc-checkbox change-recovery {{if data.recoveryEnable}}checked{{/if}}" data-default-value="${data.recoveryEnable}" data-value="${data.recoveryEnable}">
                <div class="icon"></div>
                <div class="text">
                    {{html localeString("Allow password recovery through activation code.")}}
                </div>
            </div>
        </div>
        <div class="block">
            <div class="popover-block">
                <div class="icons info has-popover allow-recovery"
                     data-popover-template-id="recovery:info-icons"
                     data-popover-template-data='{ "component": "Allow Recovery" }'
                     data-popover-placement="right"
                     data-popover-holder=".enable-recovery">
                </div>
            </div>
        </div>
    </div>
</script>

<script id="sticky:error:no-connection" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon globe"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Your Gateway is not connected to the Internet!")}}
                </span>
            </h1>
        </div>
        <p>
            1.
            <span class="translation-string">
                {{html localeString("Please check that your Gateway is correctly connected to your telephone or fibre line and you only use the original cable and adapters")}}
            </span>
        </p>
        <p>
            2.
            <span class="translation-string">
                {{html localeString("Check that all cables are plugged in correctly")}}
            </span>
        </p>
        <div class="buttons">
            <a class="button primary big open-desired-website" href="{{html url}}">
                <span class="translation-string">
                    {{html localeString("OK")}}
                </span>
            </a>
        </div>
    </div>
</script>

<script id="sticky:error:no-connection-final" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon globe"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Your Gateway still has no connection to the Internet!")}}
                </span>
            </h1>
        </div>
        <p>
            1.
            <span class="translation-string">
                {{html localeString("Restart your gateway manually")}}
            </span>
        </p>
        <p>
            2.
            <span class="translation-string">
                {{html localeString("Wait until the power LED on the Gateway is up and white and push the button below. It takes about 2 minutes to restart")}}
            </span>
        </p>
        <div class="buttons">
            <a class="button primary big reboot-gateway" href="{{html url}}">
                <span class="translation-string">
                    {{html localeString("OK, try again")}}
                </span>
            </a>
            <a class="button disabled big reboot-process" href="#">
                <span class="translation-string">
                    {{html localeString("Reboot in process, please wait")}}
                </span>
            </a>
        </div>
    </div>
</script>

<script id="sticky:error:no-connection-final-support" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon globe"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Your Gateway still has no connection to the Internet!")}}
                </span>
            </h1>
        </div>
        <p class="no-indent">
            <span class="translation-string">
                {{html localeString("Unfortunately it was not possible to fix the Internet Connection. For further assistance please contact the free Swisscom customer support number")}}
            </span>
            <strong>
                <span class="translation-string">
                    {{html localeString("0 800 800 800")}}
                </span>
            </strong>
        </p>
    </div>
</script>

<script id="sticky:error:parental-control" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon parental"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Parental Control: Internet usage is not allowed")}}
                </span>
            </h1>
        </div>
        <p class="no-indent">
            <span class="translation-string">
                {{html localeString("You are currently not allowed to surf the Internet according to Parental Control Scheduler settings")}}
            </span>
        </p>
    </div>
</script>

<script id="sticky:error:emergency-stick-connection-pin" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon backup-stick"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Internet Emergency Stick is connected")}}
                </span>
            </h1>
        </div>
        <div class="form-section">
            <p class="no-indent">
                <span class="translation-string">
                    {{html localeString("In order to start using your mobile LTE/3G stick, please enter the PIN code")}}
                </span>
            </p>
            <p class="no-indent">
                <span class="translation-string">
                    {{html localeString("PIN Code")}}&nbsp;
                </span>
                <input type="text" placeholder="{{html pinCodeHint}}" class="swc-input characters-filter pinCode"
                                   data-characters-regexp="^[0-9]*[\b]*\.*$" name="pinCode">
            </p>
        </div>
        <div class="info-message" data-parameter-name="pinCode" style="display: none;">
            <p class="no-indent">
                <span class="info-message translation-string" data-info="PIN code has been authorized successfully">
                    {{html localeString("PIN code has been authorized successfully.")}}
                </span>
            </p>
        </div>
        <div class="validation-message" data-parameter-name="pinCode" style="display: none;">
            <div class="icon error-icon"></div>
            <div class="text">
                <span class="error-message translation-string" data-error="Invalid PIN Code length">
                    {{html localeString("Validation message PIN Code: Invalid PIN Code length")}}
                </span>
                <span class="error-message translation-string" data-error="Invalid PIN Code value">
                    {{html localeString("Validation message PIN Code: Invalid PIN Code value.")}}
                </span>
            </div>
        </div>
        <div class="buttons">
            <a class="button primary big confirm disabled pin" href="#">
                <span class="translation-string">
                    {{html localeString("Confirm")}}
                </span>
            </a>
        </div>
    </div>
    
    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("OK")}}</span>
    </span>
</script>

<script id="sticky:error:emergency-stick-connection-puk" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon backup-stick"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Internet Emergency Stick is connected")}}
                </span>
            </h1>
        </div>
        <div class="form-section">
            <p class="no-indent">
                <span class="translation-string">
                    {{html localeString("Please enter the PUK Code provided on the SIM card package")}}
                </span>
            </p>
            <p class="no-indent">
                <span class="translation-string label">
                    {{html localeString("PUK Code")}}&nbsp;
                </span>
                <input type="text" class="swc-input characters-filter pukCode" data-characters-regexp="^[0-9]*[\b]*\.*$" subtype="puk" name="pukCode" />
                <span class="icons info has-popover info-icon"
                     data-popover-template-id="sticky:error:emergency-stick-connection-info"
                     data-popover-template-data='{ "component": "PUK Info" }'
                     data-popover-placement="right"
                     data-popover-holder=".info-icon">
                </span>
            </p>
                <div class="validation-message validation-message-puk" data-parameter-name="pukCode" style="display: none;">
                    <div class="icon error-icon"></div>
                    <div class="text">
                        <span class="error-message translation-string" data-error="Invalid PUK Code value">
                            {{html localeString("Validation message PUK Code: Invalid PUK Code value.")}}
                        </span>
                        <span class="error-message translation-string" data-error="Invalid PUK Code length">
                            {{html localeString("Validation message PUK Code: Invalid PUK Code length")}}
                        </span>
                    </div>
                </div>
            <p class="no-indent" style="margin-bottom: 5px;">
                <span class="translation-string label">
                    {{html localeString("New PIN Code")}}&nbsp;
                </span>
                <input type="text" class="swc-input characters-filter newPinCode" data-characters-regexp="^[0-9]*[\b]*\.*$" subtype="puk" name="newPinCode" />
                <span class="icons info has-popover info-icon"
                     data-popover-template-id="sticky:error:emergency-stick-connection-info"
                     data-popover-template-data='{ "component": "New PIN Info" }'
                     data-popover-placement="right"
                     data-popover-holder=".info-icon">
                </span>
            </p>
                <div class="validation-message validation-message-new-pin" data-parameter-name="newPinCode" style="display: none;">
                    <div class="icon error-icon"></div>
                    <div class="text">
                        <span class="error-message translation-string" data-error="Invalid PIN Code length">
                            {{html localeString("Validation message PUK Code: Invalid PIN Code length")}}
                        </span>
                    </div>
                </div>
            <p class="no-indent" style="margin-top: 0;">
                <span class="translation-string label">
                    {{html localeString("Confirm PIN Code")}}&nbsp;
                </span>
                <input type="text" class="swc-input characters-filter confirmPinCode" data-characters-regexp="^[0-9]*[\b]*\.*$" subtype="puk" name="confirmPinCode" />
            </p>
                <div class="validation-message validation-message-confirm-pin" data-parameter-name="confirmPinCode" style="display: none;">
                    <div class="icon error-icon"></div>
                    <div class="text">
                        <span class="error-message translation-string" data-error="Invalid PIN Code length">
                            {{html localeString("Validation message PUK Code: Invalid PIN Code length")}}
                        </span>
                        <span class="error-message translation-string" data-error="Mismatch PIN Code value">
                            {{html localeString("Validation message PUK Code: The PIN code you entered does not match")}}
                        </span>
                    </div>
                </div>
        </div>
        <div class="info-message" data-parameter-name="pinCode" style="display: none;">
            <p class="no-indent">
                <span class="info-message translation-string" data-info="PIN code has been changed successfully">
                    {{html localeString("PIN code has been changed successfully.")}}
                </span>
            </p>
        </div>
        <div class="buttons">
            <a class="button primary big confirm disabled puk" href="#">
                <span class="translation-string">
                    {{html localeString("Confirm")}}
                </span>
            </a>
        </div>
    </div>
    
    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span>{{html localeString("OK")}}</span>
    </span>
</script>

<script id="sticky:error:emergency-stick-connection-puk-locked" type="text/x-jquery-tmpl">
    <div class="error-dialog">
        <div class="header clearfix">
            <div class="icon backup-stick"></div>
            <h1>
                <span class="translation-string">
                    {{html localeString("Internet Emergency Stick is connected")}}
                </span>
            </h1>
        </div>
        <div class="form-section">
            <p class="no-indent">
                <span class="translation-string">
                    {{html localeString("The PUK code you have entered is incorrect. Please call the Swisscom hotline to use your SIM Card.")}}
                </span>
            </p>
        </div>
        <div class="buttons">
            <a class="button primary big confirm done" href="#">
                <span class="translation-string">
                    {{html localeString("OK")}}
                </span>
            </a>
        </div>
    </div>
</script>

<script id="sticky:error:emergency-stick-connection-info" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "PUK Info"}}
            <span class="translation-string">{{html localeString("PUK Code info")}}</span>
        {{/if}}
        {{if component === "New PIN Info"}}
            <span class="translation-string">{{html localeString("New PIN Code info")}}</span>
        {{/if}}
    </div>
</script>
<script id="sticky:application" type="text/x-jquery-tmpl">
    <div class="top-panel">
        <div class="panel-content">
            <div class="buttons">
            </div>
            <div class="search">

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

    <div class="table logo-language">
        <div class="table-row">
            <div class="left block-logo">
                <div class="logo"></div>
            </div>
            <div class="right block-locale">
                <div class="swc-dropdown locale-selector disable-gradient" 
                    data-class="locale-selector" 
                    data-value="" data-selected="">
                    <div class="selected-option">
                        <span class="translation-string">
                            &nbsp;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="sticky-message-container"></div>
    </div>

    <div class="bottom-panel">
        <div class="panel-content">
            <div class="text-block links">
                <div class="text-link">
                     <a href="{{html staticPagesLinks.legal}}" target="_blank">{{html localeString("Legal Aspects")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.openSource}}" target="_blank">{{html localeString("Open Source")}}</a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.imprint}}" target="_blank">{{html localeString("Imprint")}}</span></a>
                </div>
                <div class="text-link">
                     <a href="{{html staticPagesLinks.contact}}" target="_blank"><span class="translation-string">{{html localeString("Contact")}}</span></a>
                </div>
            </div>
            <div class="text-block copyright">
                &copy;  
                <span class="translation-string">
                    {{html localeString("Swisscom AG")}}
                </span> 
                2015
            </div>
        </div>
    </div>
</script>

<script id="storage:settings:modal-windows:disable-cloud-services" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Cloud Sync Service has been disabled")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("Please contact Customer Service for more information")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="storage:data:devices-for-list" type="text/x-jquery-tmpl">
            <div class="items">
                <div class="expandable-list">
                    <div class="expandable-list-title">
                        <div class="block device-name" data-key="device-name"><span class="translation-string">{{html localeString("Device Name")}}</span></div>
                        <div class="block space" data-key="space"><span class="translation-string">{{html localeString("Space")}}</span></div>
                        <div class="block actions" data-key="actions"><span class="translation-string"></span></div>
                    </div>
                    {{if apServiceState}}
                    {{each(key, value) devices}}
                        <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="hoverable">
                                        <div class="block device-type">
                                            <div class="device small active ${value.type}">
                                                <div class='icon'></div>
                                            </div>
                                        </div>
                                        {{if value.deviceIsSupported }}
                                            <div class="block name state-default">${value.label}</div>
                                        {{else}}
                                        <div class="block name state-default">
                                            <span class="translation-string">{{html localeString("Unsupported Device")}}</span>
                                        </div>
                                        {{/if}}
                                    </div>
                                    <div class="block name state-edit" style="padding-top:7px">
                                        <input name='deviceName' type="text" value="${value.label}"/>
                                    </div>
                                    {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                    <div class="block storage">
                                        ${value.freeSpace} <span class="translation-string">{{html localeString("free of")}}</span> ${value.capacity}
                                    </div>
                                    {{/if}}
                                </div>
                                {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                <div class="block show-hide disabled-for-superadmin">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text">
                                            <span class="translation-string">{{html localeString("Hide")}}</span>
                                        </div>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                            {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                            <div class="list-item-hidden disabled-for-superadmin">
                                <div class="inline-blocks direct-access">
                                    <div class="block direct-access-block">
                                        &nbsp;
                                    </div>

                                    <div class="block capacity-ruler"></div>
                                </div>
                                <div class="inline-blocks remote-block">
                                    <div class="block">
                                        <div class="text"><span class="translation-string">{{html localeString("Direct Access through")}}</span> <span class="address">\\internetbox-nas\${value.label}</span></div>
                                    </div>
                                    <div class="block">
                                        <div class="block">
                                            <div class="icons info has-popover direct-access-info"
                                                 data-popover-template-id="storage:settings:info-icons"
                                                 data-popover-template-data='{ "component": "Direct Access" }'
                                                 data-popover-placement="right"
                                                 data-popover-holder=".direct-access-info">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="block" style = "float: right;">
                                        <a class="button secondary no-highlighting remove-storage"><span class="translation-string">{{html localeString("Secure remove")}}</span></a>
                                    </div>
                                </div>
                            </div>
                            {{/if}}
                        </div>
                    {{/each}}
                    {{/if}}
                </div>
            </div>
            {{if (devices.length < 1) && apServiceState}}

            <div class="no-devices">
                <div class="text">
                    <span class="translation-string">{{html localeString("There are no devices attached to Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}

            {{if !apServiceState}}
            <div class="no-np">
                <div class="text">
                    <span class="translation-string">{{html localeString("To see attached devices you should Turn On Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}
</script>

<script id="storage:settings:modal-windows:enable-usb-3" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have enabled USB 3.0 Standard")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("This may influence WiFi 2.4 band signal quality.")}}
            {{html localeString("If you experience some WiFi 2.4 GHz problem, you can disable USB 3.0 Standard")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Continue")}}</span>
        </a>
    </div>
</script>

<script id="storage:settings:modal-windows:unchecked-files" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have unchecked data from syncing.")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("Unchecked data will stop syncing to your Cloud Service and will be removed from it. This data will still be available on your Central Storage Devices, so you can always choose to sync it again in the future.")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Continue")}}</span>
        </a>
    </div>
</script>

<script id="storage:settings:modal-windows:unmount-device-process" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Removing Device.")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("Please wait while")}}
        </span>
        ${data.deviceName}
        <span class="translation-string">
            {{html localeString("will be ready to be safely removed.")}}
        </span>
    </div>
</script>

<script id="storage:settings:modal-windows:unmount-device-complete" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Removing Device.")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("Now")}}
        </span>
        ${data.deviceName}
        <span class="translation-string">
            {{html localeString("can be safely removed from the Internet Box.")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Ok")}}</span>
        </a>
    </div>
</script>

<script id="storage:settings:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Enable Media Server (DLNA Streaming)" }}
            <span class="translation-string">{{html localeString("Enable Media Server (DLNA Streaming) Info Popup")}}</span>
        {{/if}}

        {{if component === "Enable Remote Access" }}
            <span class="translation-string">{{html localeString("Enable Remote Access Info Popup")}}</span>
        {{/if}}

        {{if component === "Access over Smartphone and iPad Info" }}
            <span class="translation-string">{{html localeString("Access over Smartphone and iPad Info Popup")}}</span>
        {{/if}}

        {{if component === "Storage Setting Info" }}
            <span class="translation-string">{{html localeString("Storage Setting Info Popup")}}</span>
        {{/if}}

        {{if component === "Attached central storage devices Info" }}
            <span class="translation-string">{{html localeString("Attached Central Storage devices Info Popup")}}</span>
        {{/if}}

        {{if component === "Enable usb 3.0" }}
            <span class="translation-string">{{html localeString("Enable usb 3.0")}}</span>
        {{/if}}

        {{if component === "Enable data access by AFP" }}
            <span class="translation-string">{{html localeString("Enable data access by AFP Info Popup")}}</span>
        {{/if}}

        {{if component === "Enable iTunes Server" }}
            <span class="translation-string">{{html localeString("Enable iTunes Server Info Popup")}}</span>
        {{/if}}

        {{if component === "Direct Access" }}
            <span class="translation-string">{{html localeString("Direct Access Info Popup")}}</span>
        {{/if}}

        {{if component === "Activate Central Storage" }}
            <span class="translation-string">{{html localeString("Activate Central Storage Info Popup")}}</span>
        {{/if}}

        {{if component === "Activate Cloud Synchronization" }}
            <span class="translation-string">{{html localeString("Activate Cloud Synchronization Info Popup")}}</span>
        {{/if}}

        {{if component === "Password protection" }}
             <span class="translation-string">{{html localeString("Password protection Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="storage:cloud-backup:unsynced-files" type="text/x-jquery-tmpl">
    <div class="info-strings">
        <span class="translation-string">${popoverText}</span>
        <div class="text">
            <a class="show-unsynced-files"
                <span class="translation-string">{{html localeString("List of files")}}</span>
            </a>
        </div>
    </div>
</script>

<script id="storage:cloud-backup:unsynced-files:modal-window" type="text/x-jquery-tmpl">
    <div class="unsynced-files-modal-window">
        <div class="title">
            <span class="translation-string">{{html localeString("List of Files that Could Not be Synced")}}</span>
        </div>
        <div class="text">
            <span class="translation-string">{{html localeString("Last Sync Time")}}:</span> ${data.syncDetails.lastSync}
        </div>
        <div class="unsynced-files-list-wrapper">
            <div class="block account">
                <div class="${data.syncDetails.id}-connection">
                    <div class="icons cloud-type ${data.syncDetails.id}"></div>
                    <div class="text">
                        ${data.syncDetails.cloudServiceName}
                        <span class="disabled-for-superadmin">${data.syncDetails.accountName ? '(' + data.syncDetails.accountName + ')' : ''}:</span>
                    </div>
                </div>
            </div>
            <div class="block text">
                <ul class="unsynced-files-list">
                    {{each(idx, file) data.syncDetails.inaccessibleFiles}}
                        <li class="unsynced-file">
                            {{html file}}
                        </li>
                    {{/each}}
                </ul>
            </div>
            <div class="block text folder-name">
                <div class="icons folder"></div>
                <span class="title translation-string">{{html localeString("Cloud Account Folder")}}:</span>
                 ${swc.settings.application.get('apUrl')}\${data.syncDetails.deviceLabel}\<strong>${data.syncDetails.folderName}</strong>
                {{if data.syncDetails.deviceDisconnected}}
                <span class="error"><span class="translation-string">{{html localeString("(not connected)")}}</span></span>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="storage:cloud-backup:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Attached Storage Devices" }}
            <span class="translation-string">{{html localeString("Attached Storage Devices Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="storage:scheduler:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate Central Storage Scheduler" }}
        <span class="translation-string">{{html localeString("Activate Central Storage Scheduler Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="storage:cloud:account-item" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Sync in progress")}}</span>
        <span class="translation-string">{{html localeString("Sync stopped")}}</span>
        <span class="translation-string">{{html localeString("Synced")}}</span>
        <span class="translation-string">{{html localeString("Some files could not be synced")}}</span>
        <span class="translation-string">{{html localeString("There is not enough space on your Central Storage to sync data. Please free some space.")}}</span>
        <span class="translation-string">{{html localeString("There is not enough space on your Cloud Account %cloudService% (%accountName%) to sync data.")}}</span>
        <span class="translation-string">{{html localeString("Could not connect to %cloudService%. Last login attempt on %lastLogin% has failed. Please try to login again later.")}}</span>
        <span class="translation-string">{{html localeString('There are troubles syncing some content. Try again by clicking "Sync" button or wait for 1 min for next sync attempt.')}}</span>
        <span class="translation-string">{{html localeString("Unable to connect to Cloud Account folder. Please check if your Central Storage device is connected to %ProductName%")}}</span>
    </span>
    <div class="expandable-list-item" data-key="${data.id}">
        <div class="block activate" data-key="device-name">
            <div class="swc-checkbox validatable activate-cloud {{if data.isActivated}}checked{{/if}}" data-value="${data.isActivated}" data-default-value="${data.isActivated}">
                <div class="icon"></div>
            </div>
        </div>
        <div class="block account" data-key="device-name">
            <div class="dropbox-connection">
                <div class="icons cloud-type ${data.id} connected"></div>
                <div class="text title connected">
                    ${data.cloudServiceName} 
                    <span class="disabled-for-superadmin">${data.accountName ? '(' + data.accountName + ')' : ''}</span>
                </div>
                <div class="text data-size">
                    <span class="translation-string">{{html localeString("%free% (%percents%%) free of %total%", {"free": data.freeSpace, "percents": data.freePercents, "total": data.totalSpace})}}</span>
                </div>
            </div>
        </div>
        <div class="block status" data-key="device-name">
            <div
                class="status icon ${data.status} {{if data.status === 'incomplete'}}has-popover{{/if}}"
                {{if data.status === 'incomplete'}}
                data-popover-template-id="storage:cloud-backup:unsynced-files"
                data-popover-placement="top"
                data-popover-container=".expandable-list-item"
                data-popover-template-data='{ "popoverText": "{{html localeString(data.tooltip)}}"}'
                {{/if}}
            >
            </div>
            {{if data.tooltip}}
            <div class="hover-tooltip ${data.status}">
                <div class="hover-tooltip-text">
                    <span class="translation-string">{{html localeString(data.tooltip, {cloudService: data.cloudServiceName, accountName: data.accountName, lastLogin: data.lastLogin})}}</span>
                </div>
            </div>
            {{/if}}
        </div>
        <div class="block sync-time" data-key="device-name">{{if data.lastSync}}${data.lastSync}{{else}}{{html localeString("None")}}{{/if}}</div>
        <div class="block actions" data-key="device-name">
            <div class="icons remove-cloud do-disconnect"></div>
            <div class="hover-tooltip">
                <div class="hover-tooltip-text">
                    <span class="translation-string">{{html localeString("Disconnect")}}</span>
                </div>
            </div>
        </div>

        <div class="block text folder-name">
            <span class="title translation-string">{{html localeString("Cloud Account Folder")}}</span>
            ${swc.settings.application.get('apUrl')}\${data.deviceLabel}\<strong>${data.folderName}</strong>
            {{if data.deviceDisconnected}}
            <span class="error"><span class="translation-string">{{html localeString("(not connected)")}}</span></span>
            {{/if}}
        </div>
        <div class="block actions" data-key="device-name">
            <div class="icons pencil do-custom-edit"></div>
            <div class="hover-tooltip">
                <div class="hover-tooltip-text">
                    <span class="translation-string">{{html localeString("Edit account")}}</span>
                </div>
            </div>
        </div>
        <div class="list-item-buttons">
            <a class="button secondary no-highlighting login-cloud {{if !data.loginAction}}hidden{{/if}}"><span class="translation-string">{{html localeString("Login")}}</span></a>
            {{if false}}
            <a class="button secondary no-highlighting sync-cloud {{if !data.syncAction}}hidden{{/if}}"><span class="translation-string">{{html localeString("Sync now")}}</span></a>
            {{/if}}
        </div>

        <div class="list-item-hidden disabled-for-superadmin">
        </div>
    </div>

</script>

<script id="storage:cloud:cloud-accounts:disconnect-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Disconnect Cloud Account from the Central Storage")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">{{html localeString('Sync with your Cloud Account <span class="title">%cloudService% (%account%)</span> will be stopped. What do you like to do with the content stored on your Central Storage:', {cloudService: data.cloudServiceName, account: data.accountName})}}</span>
    </div>

    <div class="swc-radio-buttons keep-data-selection validatable" data-default-value="keep" data-name="keepData" data-value="keep">
        <div class="mode active" data-value="keep">
            <div class="icon"></div>
            <div class="text"><span class="translation-string">{{html localeString("Keep Cloud Account content on your Central Storage")}}</span></div>
        </div>
        <div class="text indented">
            <span class="translation-string">{{html localeString("Your Cloud Account Folder content will be stored up to the date of the latest sync.")}}</span>
        </div>
        <div class="mode" data-value="remove">
            <div class="icon"></div>
            <div class="text"><span class="translation-string">{{html localeString("Remove Cloud Account content from your Central Storage")}}</span></div>
        </div>
        <div class="text indented">
            <span class="translation-string">{{html localeString("Your Cloud Account Folder content will be removed with your Cloud Account.")}}</span>
        </div>
    </div>

    <div class="buttons-container-message modal-buttons">
        <div>
            <a class="button secondary cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button primary apply-changes">
                <span class="translation-string">{{html localeString("Continue")}}</span>
            </a>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text" data-error="can not remove folder">
                <span class="translation-string">{{html localeString("Unable to remove folder")}}</span>
            </div>
        </div>
    </div>
    <span class="hidden-strings">
        {{html localeString("Dropbox")}}
        {{html localeString("Google drive")}}
    </span>
</script>

<script id="storage:cloud:cloud-accounts:edit-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Edit Your Cloud Account Folder on the Central Storage")}}</span>
    </div>

    <div class="table">
        <div class="table-row row-device-uid">
            <div class="left">{{html localeString("Location")}}</div>
            <div class="right">
                <div class="swc-dropdown device-selection validatable" data-name="usbUID" data-class="device-selection">
                    <div class="selected-option"></div>
                </div>
            </div>
        </div>

        <div class="table-row row-folder-name">
            <div class="left">{{html localeString("Cloud account folder")}}</div>
            <div class="right">
                <input type="text" class="swc-input validatable" name="folderName">
            </div>
        </div>

        <div class="validation-message" data-parameter-name="usbUID">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="no connected devices">
                    {{html localeString("There are no devices connected to the Central Storage.")}}
                    {{html localeString("Please connect a device.")}}
                </span>
            </div>
        </div>

        <div class="validation-message" data-parameter-name="folderName">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="can not be empty">
                    {{html localeString("Folder name can not be empty")}}
                </span>
                <span class="error-message" data-error="unable to create folder">
                    {{html localeString("Unable to create folder.")}}
                    {{html localeString("Folder name may contain not allowed symbols or there is not enough space on the selected location.")}}
                </span>
                <span class="error-message" data-error="already exists">
                    {{html localeString("Folder with such name already exists on selected device.")}}
                    {{html localeString("Please choose other device or change folder name.")}}
                </span>
            </div>
        </div>
    </div>

    <div class="modal-buttons">
        <a class="button secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("Save changes")}}</span>
        </a>
    </div>
</script>

<!-- Translations for expandable lists, to be refactored and deleted soon -->
<script id="storage" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Details")}}</span>
        <span class="translation-string">{{html localeString("Hide")}}</span>
        <span class="translation-string">{{html localeString("Device Name")}}</span>
        <span class="translation-string">{{html localeString("Space")}}</span>
        <span class="translation-string">{{html localeString("Actions")}}</span>
        <span class="translation-string">{{html localeString("On at")}}</span>
        <span class="translation-string">{{html localeString("Off at")}}</span>
        <span class="translation-string">{{html localeString("Delete")}}</span>
        <span class="translation-string">{{html localeString("Current time: %currentTime%")}}</span>
        <span class="translation-string">{{html localeString("Click to add time slot")}}</span>
    </span>
</script>

<script id="storage:settings" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("Manage Your Central Storage")}}</span></h1>
        </div>
    </div>
    <ul class="page-tabs">

        <div class="tabs-content"></div>
    </ul>

    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start sharing your data, please switch the Central Storage on")}}
        </div>
    </div>

    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Central Storage is starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 Min")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:settings:data-sharing" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <div class="text title-application">
                <div class="main-title-link-application">
                    <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
                </div>
                <div class="main-title-link-application title-dot">
                    <span class="translation-string">&#183;</span>
                </div>
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("Central Storage")}}</span>
                </div>
        </div>

        <span class="text">
            {{html localeString("You can enable access to media files like Video, Photos and Music available on devices attached to the Gateway Central Storage to users in your Network.")}}
        </span>

        <div class="inline-blocks storage-setting">
            <div class="block storage-setting-title">
                    <div class="text title">{{html localeString("Storage Setting")}}</div>
            </div>
            <div class="block storage-setting-title-icon">
                <div class="icons info has-popover storage-setting-title-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Storage Setting Info" }'
                     data-popover-placement="top"
                     data-popover-holder=".storage-setting-title-info">
                </div>
            </div>
        </div>

        <span class="text media-server-status-title" style="margin-top: 17px;">
            {{html localeString("With DLNA you can stream all your Music, video and picture files to IP-radios, TV`s, or Media player.")}}
        </span>

        <div class="inline-blocks media-server-status">
            <div class="block">
                <div class="swc-checkbox set-media-server-status {{if data.mediaServerStatus}}checked{{/if}}"
                data-default-value="{{if data.mediaServerStatus}}true{{else}}false{{/if}}" data-value="{{if data.mediaServerStatus}}true{{else}}false{{/if}}">
                    <div class="icon"></div>
                    <div class="text">{{html localeString("Enable Media Server (DLNA Streaming)")}}</div>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover enable-dlna-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Enable Media Server (DLNA Streaming)" }'
                     data-popover-placement="top"
                     data-popover-holder=".enable-dlna-info">
                </div>
            </div>
        </div>

        {{if false}}{{! Temporary removed, until hardware is fixed}}
        <span class="text usb-3-title">
            {{html localeString("You can achieve higher data transfer speeds by enabling USB 3.0 Standard for your USB port.")}}
            {{html localeString("Before activating please read the explanation in the help icon carefully.")}}
        </span>

        <div class="inline-blocks usb-3-section">
            <div class="block">
                <div class="swc-checkbox set-usb-3-status {{if data.usbStatus}}checked{{/if}}"
                     data-default-value="{{if data.afpStatus}}true{{else}}false{{/if}}" data-value="{{if data.usbStatus}}true{{else}}false{{/if}}">
                    <div class="icon"></div>
                    <div class="text">{{html localeString("Enable USB 3.0 Standard")}}</div>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover set-usb-3-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Enable usb 3.0" }'
                     data-popover-placement="top"
                     data-popover-holder=".set-usb-3-info">
                </div>
            </div>
        </div>
        {{/if}}

        <div class="expert-mode-only">
            <span class="text afp-service-title" style="margin-top: 10px;">
                {{html localeString("AFP (Apple File Sharing Protocol) can be activated for Mac OS to access your data faster.")}}
            </span>

            <div class="inline-blocks afp-service-status">
                <div class="block">
                    <div class="swc-checkbox set-afp-status {{if data.afpStatus}}checked{{/if}}"
                    data-default-value="{{if data.afpStatus}}true{{else}}false{{/if}}" data-value="{{if data.afpStatus}}true{{else}}false{{/if}}">
                        <div class="icon"></div>
                        <div class="text">{{html localeString("Enable data access by AFP")}}</div>
                    </div>
                </div>
                <div class="block">
                    <div class="icons info has-popover afp-info"
                         data-popover-template-id="storage:settings:info-icons"
                         data-popover-template-data='{ "component": "Enable data access by AFP" }'
                         data-popover-placement="top"
                         data-popover-holder=".afp-info">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Storage settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Storage settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:settings:access-on-move" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <div class="text title-application">
                <div class="main-title-link-application">
                    <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
                </div>
                <div class="main-title-link-application title-dot">
                    <span class="translation-string">&#183;</span>
                </div>
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("Central Storage Remote Access")}}</span>
                </div>
        </div>

        <span class="text title remote-access-title">
            {{html localeString("Remote Access Account")}}
        </span>

        <span class="text">
            {{html localeString("Remote access allows you to reach your data remotely through the mobile application or web-browser.")}}
        </span>

        <div class="inline-blocks remote-access-status">
            <div class="block">
                <div class="swc-checkbox set-remote-access-status {{if data.remoteNasStatus}}checked{{/if}}"
                data-default-value="{{if data.remoteNasStatus}}true{{else}}false{{/if}}" data-value="{{if data.remoteNasStatus}}true{{else}}false{{/if}}">
                    <div class="icon"></div>
                    <div class="text">{{html localeString("Enable Remote Access")}}</div>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover enable-remote-access-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Enable Remote Access" }'
                     data-popover-placement="top"
                     data-popover-holder=".enable-remote-access-info">
                </div>
            </div>
        </div>

        <div class="separator"></div>

        <div class="inline-blocks access-over-smartphone-title">
            <div class="block access-over-smartphone">
                    <div class="text title">{{html localeString("Access over Smartphone and iPad")}}</div>
            </div>
            <div class="block access-over-smartphone-icon">
                <div class="icons info has-popover enable-remote-access-smart-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Access over Smartphone and iPad Info" }'
                     data-popover-placement="top"
                     data-popover-holder=".enable-remote-access-smart-info">
                </div>
            </div>
        </div>

        <span class="text">
            {{html localeString("Download the %ProductName% App for your Smartphone and iPad. Simply pair the App with your %ProductName%. The creating of an additional login is not necessary.")}}
        </span>

        <div class="expandable-list remote-access-accounts disabled-for-superadmin {{if data.remoteNasStatus && data.rnasError}}disabled{{/if}}">
            <div class="expandable-list-title">
                <div class="block account-name">
                    {{html localeString("Account which have remote access to data")}}
                </div>
                <div class="block actions">
                    {{html localeString("Actions")}}
                </div>
            </div>

            {{if data.remoteNasAccounts.length && data.remoteNasStatus}}
                <div class="accounts">
                    {{each(key, account) data.remoteNasAccounts}}
                        <div class="expandable-list-item" data-key="${account.email}">
                            <div class="block account-name">
                                <div class="icon"></div>
                                <div class="user">${account.name}</div>
                            </div>
                            <div class="block actions">
                                <div class="icons trash process-delete" data-account="${account.email}"></div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            {{/if}}

            {{if data.remoteNasStatus}}
                {{if data.remoteNasFetching}}
                    <div class="remoteNasFetching">
                        <img src="/static/images/loader.gif" class="loader">
                    </div>
                {{else data.rnasError}}
                    <div class="showDisabledBackDropMessage remoteNasError">
                        <div class="text">
                            <div class="text-section">
                                <span class="text">
                                    {{html localeString("There are some problems with connection to Remote NAS")}}
                                </span>
                            </div>
                        </div>
                    </div>
                {{/if}}
            {{/if}}
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Storage settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Storage settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:settings:cloud-backup" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <span class="text">
            {{html localeString("You can store any data from your Cloud Account on the Central Storage connected to your %ProductName%.")}}
            {{html localeString("All changes done on either side will be repeated on other side.")}}
        </span>

        <span class="text title cloud-service-title">
            {{html localeString("Select Cloud Service to Sync")}}
        </span>

        <div class="swc-radio-buttons select-cloud-service validatable" data-name="cloud-service" data-value="${data.cloudService}">
            {{each(key, cloudServiceItem) data.cloudServicesList}}
                <div class="mode {{if cloudServiceItem.id === data.cloudService}}active{{/if}}" data-value="${cloudServiceItem.id}">
                    <div class="icon"></div>
                    <div class="text">
                        <div class="cloud-service-block ${cloudServiceItem.id}">
                            <div class="icon"></div>
                            <div class="name">${cloudServiceItem.name}</div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>

        <span class="text title cloud-folder-title">
            {{html localeString("Create Cloud Account Folder on the Central Storage")}}
        </span>
        <span class="text cloud-folder-text">
            {{html localeString("Choose where to create your Cloud Account folder.")}}
            {{html localeString("It will be used to store and sync your Cloud Account content.")}}
        </span>

        <div class="table">
            <div class="table-row row-device-uid">
                <div class="left">{{html localeString("Location")}}</div>
                <div class="right">
                    <div class="swc-dropdown device-selection validatable" data-name="usbUID" data-class="device-selection">
                        <div class="selected-option"></div>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="usbUID">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="no connected devices">
                        {{html localeString("There are no devices connected to the Central Storage.")}}
                        {{html localeString("Please connect a device.")}}
                    </span>
                    <span class="error-message" data-error="no device selected">
                        {{html localeString("Please select a device from list.")}}
                    </span>
                </div>
            </div>

            <div class="table-row row-folder-name">
                <div class="left">{{html localeString("Cloud account folder")}}</div>
                <div class="right">
                    <input type="text" class="swc-input validatable" name="folderName">
                </div>
            </div>
            <div class="validation-message" data-parameter-name="folderName">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message" data-error="can not be empty">
                        {{html localeString("Folder name can not be empty")}}
                    </span>
                    <span class="error-message" data-error="unable to create folder">
                        {{html localeString("Unable to create folder.")}}
                        {{html localeString("Folder name may contain not allowed symbols or there is not enough space on the selected location.")}}
                    </span>
                    <span class="error-message" data-error="already exists">
                        {{html localeString("Folder with such name already exists on selected device.")}}
                        {{html localeString("Please choose other device or change folder name.")}}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled">
                {{html localeString("Cancel")}}
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                {{html localeString("Log In")}}
            </a>
        </div>

        <div class="save-success">
            <div class="icon"></div>
            <div class="text">&nbsp;</div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message can-not-receive-url-message">
                    {{html localeString("Can not identify service URL.")}}
                    {{html localeString("Please check your internet connection and try to login later again.")}}
                </span>
                <span class="error-message could-not-connect-message">
                        {{html localeString("Could not connect to %service%.", { service: data.cloudService })}}
                    {{html localeString("Please check your internet connection and try to login later again.")}}
                </span>
            </div>
        </div>
    </div>

    <div class="disable-page-message">
        {{html localeString("To start using Cloud Sync, please turn the Central Storage on.")}}
    </div>

    <span class="hidden-strings">
        {{html localeString("Dropbox")}}
        {{html localeString("Google drive")}}
        {{html localeString("No Connected Devices")}}
        {{html localeString("Choose a device")}}
    </span>
</script>

<script id="storage:devices" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("View Info on devices connected to your Central Storage")}}</span></h1>
    </div>
    <div>
        <div class="swc-switcher set-ap-state {{if data.apServiceState}}checked{{/if}}" data-value="{{if data.apServiceState}}true{{else}}false{{/if}}">
            <div class="text">
                <h1>{{html localeString("Media and Data Sharing")}}</h1>
            </div>
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span class="translation-string">{{html localeString("On")}}</span>
                            <span class="translation-string">{{html localeString("Off")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="upper-icons-block">
            <div class="icons info has-popover set-ap-state-info"
                 data-popover-template-id="storage:settings:info-icons"
                 data-popover-template-data='{ "component": "Activate Central Storage" }'
                 data-popover-placement="right"
                 data-popover-holder=".set-ap-state-info">
            </div>
            {{if data.schedulerState}}
                <div class="icons scheduler regular" style="cursor: default;">
                </div>
                <div class = "scheduler-status text">
                    <span class="translation-string">{{html localeString("Central Storage Scheduler is On")}}</span>
                </div>
            {{/if}}
        </div>
    </div>
    <div class="base-content">
        <div class="text title"><span class="translation-string">{{html localeString("Attached Storage Devices")}}</span></div>
            {{if data.apServiceState && (data.devices.length >0)}}
            <div class="text access-info-message">
                <span class="translation-string">{{html localeString("You can access your attached storage devices by entering in your browser")}}</span>

                <div class="icons info has-popover access-devices-info"
                     style="position: relative; top: -2px;"
                     data-popover-template-id="storage:cloud-backup:info-icons"
                     data-popover-template-data='{ "component": "Attached Storage Devices" }'
                     data-popover-placement="right"
                     data-popover-holder=".access-devices-info">
                </div>
            </div>
            {{/if}}
            <div class="items">
                <div class="expandable-list">
                    <div class="expandable-list-title">
                        <div class="block device-name" data-key="device-name"><span class="translation-string">{{html localeString("Device Name")}}</span></div>
                        <div class="block space" data-key="space"><span class="translation-string">{{html localeString("Space")}}</span></div>
                        <div class="block actions" data-key="actions"><span class="translation-string"></span></div>
                    </div>
                    {{if data.apServiceState}}
                    {{each(key, value) data.devices}}
                        <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="hoverable">
										<div class="block device-type">
                                        	<div class="device small active ${value.type}">
                                            	<div class='icon'></div>
                                        	</div>
                                    	</div>
										{{if value.deviceIsSupported }}
            								<div class="block name state-default">${value.label}</div>
        								{{else}}
            							<div class="block name state-default">
                							<span class="translation-string">{{html localeString("Unsupported Device")}}</span>
            							</div>
        								{{/if}}
									</div>
                                    <div class="block name state-edit" style="padding-top:7px">
                                        <input name='deviceName' type="text" value="${value.label}"/>
                                    </div>
                                    {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                    <div class="block storage">
                                        ${value.freeSpace} <span class="translation-string">{{html localeString("free of")}}</span> ${value.capacity}
                                    </div>
                                    {{/if}}
                                </div>
                                {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                <div class="block show-hide disabled-for-superadmin">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text">
                                            <span class="translation-string">{{html localeString("Hide")}}</span>
                                        </div>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                            {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                            <div class="list-item-hidden disabled-for-superadmin">
                                <div class="inline-blocks direct-access">
                                    <div class="block direct-access-block">
                                        &nbsp;
                                    </div>

                                    <div class="block capacity-ruler"></div>
                                </div>
                                <div class="inline-blocks remote-block">
                                    <div class="block">
                                        <div class="text"><span class="translation-string">{{html localeString("Direct Access through")}}</span> <span class="address">\\internetbox-nas\${value.label}</span></div>
                                    </div>
                                    <div class="block">
                                        <div class="block">
                                            <div class="icons info has-popover direct-access-info"
                                                 data-popover-template-id="storage:settings:info-icons"
                                                 data-popover-template-data='{ "component": "Direct Access" }'
                                                 data-popover-placement="right"
                                                 data-popover-holder=".direct-access-info">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="block" style = "float: right;">
                                        <a class="button secondary no-highlighting remove-storage"><span class="translation-string">{{html localeString("Secure remove")}}</span></a>
                                    </div>
                                </div>
                            </div>
                            {{/if}}
                        </div>
                    {{/each}}
                    {{/if}}
                </div>
            </div>
            {{if (data.devices.length < 1) && data.apServiceState}}

            <div class="no-devices">
                <div class="text">
                    <span class="translation-string">{{html localeString("There are no devices attached to Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}
            {{if !data.apServiceState}}
            <div class="no-np">
                <div class="text">
                    <span class="translation-string">{{html localeString("To see attached devices you should Turn On Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}
        </div>

    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start sharing your data, please switch the Central Storage on")}}
        </div>
    </div>

    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Central Storage is starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 Min")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:data:devices-for-list" type="text/x-jquery-tmpl">
            <div class="items">
                <div class="expandable-list">
                    <div class="expandable-list-title">
                        <div class="block device-name" data-key="device-name"><span class="translation-string">{{html localeString("Device Name")}}</span></div>
                        <div class="block space" data-key="space"><span class="translation-string">{{html localeString("Space")}}</span></div>
                        <div class="block actions" data-key="actions"><span class="translation-string"></span></div>
                    </div>
                    {{if apServiceState}}
                    {{each(key, value) devices}}
                        <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="hoverable">
                                        <div class="block device-type">
                                            <div class="device small active ${value.type}">
                                                <div class='icon'></div>
                                            </div>
                                        </div>
                                        {{if value.deviceIsSupported }}
                                            <div class="block name state-default">${value.label}</div>
                                        {{else}}
                                        <div class="block name state-default">
                                            <span class="translation-string">{{html localeString("Unsupported Device")}}</span>
                                        </div>
                                        {{/if}}
                                    </div>
                                    <div class="block name state-edit" style="padding-top:7px">
                                        <input name='deviceName' type="text" value="${value.label}"/>
                                    </div>
                                    {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                    <div class="block storage">
                                        ${value.freeSpace} <span class="translation-string">{{html localeString("free of")}}</span> ${value.capacity}
                                    </div>
                                    {{/if}}
                                </div>
                                {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                <div class="block show-hide disabled-for-superadmin">
                                    <div class="show-hidden default">
                                        <div class="icon"></div>
                                        <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                    </div>
                                    <div class="show-hidden expanded">
                                        <div class="icon"></div>
                                        <div class="text">
                                            <span class="translation-string">{{html localeString("Hide")}}</span>
                                        </div>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                            {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                            <div class="list-item-hidden disabled-for-superadmin">
                                <div class="inline-blocks direct-access">
                                    <div class="block direct-access-block">
                                        &nbsp;
                                    </div>

                                    <div class="block capacity-ruler"></div>
                                </div>
                                <div class="inline-blocks remote-block">
                                    <div class="block">
                                        <div class="text"><span class="translation-string">{{html localeString("Direct Access through")}}</span> <span class="address">\\internetbox-nas\${value.label}</span></div>
                                    </div>
                                    <div class="block">
                                        <div class="block">
                                            <div class="icons info has-popover direct-access-info"
                                                 data-popover-template-id="storage:settings:info-icons"
                                                 data-popover-template-data='{ "component": "Direct Access" }'
                                                 data-popover-placement="right"
                                                 data-popover-holder=".direct-access-info">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="block" style = "float: right;">
                                        <a class="button secondary no-highlighting remove-storage"><span class="translation-string">{{html localeString("Secure remove")}}</span></a>
                                    </div>
                                </div>
                            </div>
                            {{/if}}
                        </div>
                    {{/each}}
                    {{/if}}
                </div>
            </div>
            {{if (devices.length < 1) && apServiceState}}

            <div class="no-devices">
                <div class="text">
                    <span class="translation-string">{{html localeString("There are no devices attached to Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}

            {{if !apServiceState}}
            <div class="no-np">
                <div class="text">
                    <span class="translation-string">{{html localeString("To see attached devices you should Turn On Central Storage.")}}</span>
                </div>
            </div>
            {{/if}}
</script>

<script id="storage:data" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("Manage Your Central Storage")}}</span></h1>
        </div>
    </div>
    <div class="tabs-content base-content">
        <div class="text title-application">
                <div class="main-title-link-application">
                    <a href="#applications/overview">&#171; {{html localeString("Applications")}}</a>
                </div>
                <div class="main-title-link-application title-dot">
                    <span class="translation-string">&#183;</span>
                </div>
                <div class="main-title-link-application">
                    <span class="translation-string">{{html localeString("Central Storage")}}</span>
                </div>
        </div>

        <span class="text">
            {{html localeString("You can enable access to media files like Video, Photos and Music available on devices attached to the Gateway Central Storage to users in your Network.")}}
        </span>

        <div class="inline-blocks attached-storage-device">
            <div class="block attached-storage-device-title">
                <div class="text title">{{html localeString("Attached Storage Devices")}}</div>
            </div>
            <div class="block attached-storage-device-title-icon">
                <div class="icons info has-popover attached-storage-device-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Attached central storage devices Info" }'
                     data-popover-placement="top"
                     data-popover-holder=".attached-storage-device-info" style="display:none;">
                </div>
            </div>
        </div>
            {{if data.apServiceState && (data.devices.length >0)}}
            <div class="text access-info-message">
                <span class="translation-string">{{html localeString("You can access your attached storage devices by entering in your browser")}}</span>

                <div class="icons info has-popover access-devices-info"
                     style="position: relative; top: -2px;"
                     data-popover-template-id="storage:cloud-backup:info-icons"
                     data-popover-template-data='{ "component": "Attached Storage Devices" }'
                     data-popover-placement="right"
                     data-popover-holder=".access-devices-info">
                </div>
            </div>
            {{/if}}
            <div class="dataStorageDevicesForList">
                <div class="items">
                    <div class="expandable-list">
                        <div class="expandable-list-title">
                            <div class="block device-name" data-key="device-name"><span class="translation-string">{{html localeString("Device Name")}}</span></div>
                            <div class="block space" data-key="space"><span class="translation-string">{{html localeString("Space")}}</span></div>
                            <div class="block actions" data-key="actions"><span class="translation-string"></span></div>
                        </div>
                        {{if data.apServiceState}}
                        {{each(key, value) data.devices}}
                            <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                                <div class="blocks">
                                    <div class="block visible-part" data-key="visible-part">
                                        <div class="hoverable">
                                            <div class="block device-type">
                                                <div class="device small active ${value.type}">
                                                    <div class='icon'></div>
                                                </div>
                                            </div>
                                            {{if value.deviceIsSupported }}
                                                <div class="block name state-default">${value.label}</div>
                                            {{else}}
                                            <div class="block name state-default">
                                                <span class="translation-string">{{html localeString("Unsupported Device")}}</span>
                                            </div>
                                            {{/if}}
                                        </div>
                                        <div class="block name state-edit" style="padding-top:7px">
                                            <input name='deviceName' type="text" value="${value.label}"/>
                                        </div>
                                        {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                        <div class="block storage">
                                            ${value.freeSpace} <span class="translation-string">{{html localeString("free of")}}</span> ${value.capacity}
                                        </div>
                                        {{/if}}
                                    </div>
                                    {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                    <div class="block show-hide disabled-for-superadmin">
                                        <div class="show-hidden default">
                                            <div class="icon"></div>
                                            <div class="text"><span class="translation-string">{{html localeString("Details")}}</span></div>
                                        </div>
                                        <div class="show-hidden expanded">
                                            <div class="icon"></div>
                                            <div class="text">
                                                <span class="translation-string">{{html localeString("Hide")}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {{/if}}
                                </div>
                                {{if (value.type === 'sd-card' || value.type === 'usb-disk') }}
                                <div class="list-item-hidden disabled-for-superadmin">
                                    <div class="inline-blocks direct-access">
                                        <div class="block direct-access-block">
                                            &nbsp;
                                        </div>

                                        <div class="block capacity-ruler"></div>
                                    </div>
                                    <div class="inline-blocks remote-block">
                                        <div class="block">
                                            <div class="text"><span class="translation-string">{{html localeString("Direct Access through")}}</span> <span class="address">\\internetbox-nas\${value.label}</span></div>
                                        </div>
                                        <div class="block">
                                            <div class="block">
                                                <div class="icons info has-popover direct-access-info"
                                                     data-popover-template-id="storage:settings:info-icons"
                                                     data-popover-template-data='{ "component": "Direct Access" }'
                                                     data-popover-placement="right"
                                                     data-popover-holder=".direct-access-info">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="block" style = "float: right;">
                                            <a class="button secondary no-highlighting remove-storage"><span class="translation-string">{{html localeString("Secure remove")}}</span></a>
                                        </div>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                        {{/each}}
                        {{/if}}
                    </div>
                </div>
                {{if (data.devices.length < 1) && data.apServiceState}}

                <div class="no-devices">
                    <div class="text">
                        <span class="translation-string">{{html localeString("There are no devices attached to Central Storage.")}}</span>
                    </div>
                </div>
                {{/if}}
                {{if !data.apServiceState}}
                <div class="no-np">
                    <div class="text">
                        <span class="translation-string">{{html localeString("To see attached devices you should Turn On Central Storage.")}}</span>
                    </div>
                </div>
                {{/if}}
            </div>

        <div class="inline-blocks storage-setting">
            <div class="block storage-setting-title">
                <div class="text title">{{html localeString("Storage Setting")}}</div>
            </div>
            <div class="block storage-setting-title-icon">
                <div class="icons info has-popover storage-setting-title-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Storage Setting Info" }'
                     data-popover-placement="top"
                     data-popover-holder=".storage-setting-title-info" style="display: none;">
                </div>
            </div>
        </div>

        <span class="text media-server-status-title" style="margin-top: 17px;">
            {{html localeString("With DLNA you can stream all your Music, video and picture files to IP-radios, TV`s, or Media player.")}}
        </span>

        <div class="inline-blocks media-server-status">
            <div class="block">
                <div class="swc-checkbox set-media-server-status {{if data.mediaServerStatus}}checked{{/if}}"
                data-default-value="{{if data.mediaServerStatus}}true{{else}}false{{/if}}" data-value="{{if data.mediaServerStatus}}true{{else}}false{{/if}}">
                    <div class="icon"></div>
                    <div class="text">{{html localeString("Enable Media Server (DLNA Streaming)")}}</div>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover enable-dlna-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Enable Media Server (DLNA Streaming)" }'
                     data-popover-placement="top"
                     data-popover-holder=".enable-dlna-info">
                </div>
            </div>
        </div>

        {{if false}}{{! Temporary removed, until hardware is fixed}}
        <span class="text usb-3-title">
            {{html localeString("You can achieve higher data transfer speeds by enabling USB 3.0 Standard for your USB port.")}}
            {{html localeString("Before activating please read the explanation in the help icon carefully.")}}
        </span>

        <div class="inline-blocks usb-3-section">
            <div class="block">
                <div class="swc-checkbox set-usb-3-status {{if data.usbStatus}}checked{{/if}}"
                     data-default-value="{{if data.afpStatus}}true{{else}}false{{/if}}" data-value="{{if data.usbStatus}}true{{else}}false{{/if}}">
                    <div class="icon"></div>
                    <div class="text">{{html localeString("Enable USB 3.0 Standard")}}</div>
                </div>
            </div>
            <div class="block">
                <div class="icons info has-popover set-usb-3-info"
                     data-popover-template-id="storage:settings:info-icons"
                     data-popover-template-data='{ "component": "Enable usb 3.0" }'
                     data-popover-placement="top"
                     data-popover-holder=".set-usb-3-info">
                </div>
            </div>
        </div>
        {{/if}}

        <div class="expert-mode-only">
            <span class="text afp-service-title" style="margin-top: 10px;">
                {{html localeString("AFP (Apple File Sharing Protocol) can be activated for Mac OS to access your data faster.")}}
            </span>

            <div class="inline-blocks afp-service-status">
                <div class="block">
                    <div class="swc-checkbox set-afp-status {{if data.afpStatus}}checked{{/if}}"
                    data-default-value="{{if data.afpStatus}}true{{else}}false{{/if}}" data-value="{{if data.afpStatus}}true{{else}}false{{/if}}">
                        <div class="icon"></div>
                        <div class="text">{{html localeString("Enable data access by AFP")}}</div>
                    </div>
                </div>
                <div class="block">
                    <div class="icons info has-popover afp-info"
                         data-popover-template-id="storage:settings:info-icons"
                         data-popover-template-data='{ "component": "Enable data access by AFP" }'
                         data-popover-placement="top"
                         data-popover-holder=".afp-info">
                    </div>
                </div>
            </div>
        </div>
        {{if data.protection}}
        <div class="expert-mode-only">
            <span class="text media-server-status-title" style="margin-top: 17px;">
                {{html localeString("Secure the access from your computer to the central storage with a password.")}}
            </span>
            <div class="inline-blocks">
                <div class="block">
                    <div class="swc-checkbox {{if data.protection.enabled}}checked{{/if}} validatable protectionEnable"
                         data-value="{{if !data.protection.enabled}}false{{else}}true{{/if}}"
                         data-default-value="{{if !data.protection.enabled}}false{{else}}true{{/if}}"
                         data-name="server_state">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("Password protection")}}</span>
                        </div>
                    </div>
                </div>
                <div class="block block-info">
                    <div class="icons has-popover info password-protection-info"
                         data-popover-template-id="storage:settings:info-icons"
                         data-popover-template-data='{ "component": "Password protection" }'
                         data-popover-placement="top"
                         data-popover-holder=".password-protection-info"></div>
                </div>
            </div>
            <div class="content-inside-application-settings faded protection-form disabled-for-superadmin" {{if !data.protection.enabled}}style="display:none;"{{/if}}>
                <span class="text media-server-status-title" style="margin-top: 17px;">
                    {{html localeString("Define username and password below password protected the access to your data from the computer.")}}
                </span>
                <div class="table table-application">
                    <div class="table-row">
                        <div class="left">
                            <span class="translation-string">
                                {{html localeString("Username")}}
                            </span>
                        </div>
                        <div class="right storage_protection_credentials">
                            <div class="block input-container">
                                <input type="text" class="swc-input validatable username" value="${data.protection.username}" data-default-value="${data.protection.username}" name="storage_protection_username" placeholder="{{html localeString('Define your Central Storage username')}}">
                                <span class="valid-tick"></span>
                            </div>
                        </div>
                    </div>
                    <div class="validation-message" data-parameter-name="storage_protection_username">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="error-message translation-string" data-error="global">
                                {{html localeString("Validation message username: Global username requirements")}}
                            </span>
                            <span class="error-message translation-string" data-error="invalid characters">
                                {{html localeString("Validation message username: Invalid characters")}}
                            </span>
                            <span class="error-message translation-string" data-error="username must be from 3 to 32 symbols">
                                {{html localeString("Validation message username: Username must be from 3 to 32 symbols")}}
                            </span>
                            <span class="error-message translation-string" data-error="username must not be empty">
                                {{html localeString("Validation message username: Username must not be empty")}}
                            </span>
                        </div>
                    </div>
                    <div class="table-row disabled-for-superadmin">
                        <div class="left">
                            <span class="translation-string">
                                {{html localeString("Password")}}
                            </span>
                        </div>
                        <div class="right storage_protection_credentials">
                            <div class="block input-container">
                                <input type="password" class="swc-input validatable password-original" value="${data.protection.password}" data-default-value="${data.protection.password}" name="storage_protection_password" placeholder="{{html localeString('Define your Central Storage password')}}">
                                <input type="text" class="swc-input validatable password-copy"     value="${data.protection.password}" data-default-value="${data.protection.password}" name="storage_protection_password" placeholder="{{html localeString('Define your Central Storage password')}}">
                                <span class="valid-tick"></span>
                            </div>
                            <div class="block block-info">
                                <div class="swc-checkbox show-password show-secret skip-validation" data-name="showPassword" data-value="false">
                                    <div class="icon"></div>
                                    <div class="text">
                                        <span class="translation-string">
                                            {{html localeString('Show passwords')}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="validation-message" data-parameter-name="storage_protection_password">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="error-message translation-string" data-error="global">
                                {{html localeString("Validation message password: Global password requirements")}}
                            </span>
                            <span class="error-message translation-string" data-error="must contain special character or digit">
                                {{html localeString("Validation message password: Must contain special character or digit")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be from 8 to 16 symbols">
                                {{html localeString("Validation message password: Password must be from 8 to 16 symbols")}}
                            </span>
                            <span class="error-message translation-string" data-error="invalid characters">
                                {{html localeString("Validation message password: Invalid characters")}}
                            </span>
                            <span class="error-message translation-string" data-error="password must be different than username">
                                {{html localeString("Validation message username: Password must be different than username")}}
                            </span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        {{/if}}

        <div class="buttons-container-message tab-buttons-container">

            <div class="client-buttons">

                <a class="button big no-highlighting secondary cancel-changes disabled ">

                    <span class="translation-string">
                        {{html localeString("Cancel")}}
                    </span>

                </a>

                <a class="button big no-highlighting primary save-changes disabled">

                    <span class="translation-string">
                        {{html localeString("Save")}}
                    </span>

                </a>

            </div>

            <div class="save-success">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Your settings have been saved successfully.")}}
                    </span>

                </div>

            </div>

            <div class="save-error">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Your settings could not be saved. Please try again.")}}
                    </span>

                </div>

            </div>

            <div class="save-validation-errors">

                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Please correct the errors on this page.")}}
                    </span>

                </div>

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

    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start sharing your data, please switch the Central Storage on")}}
        </div>
    </div>

    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Central Storage is starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 Min")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:scheduler" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("Manage applications")}}</span></h1>
        </div>
    </div>
    <div class="base-content tabs-content">
        <div class="scheduler-panel tab-content-container">
            <div class="text">
                <span class="translation-string">{{html localeString("You can manage set up and manage access to your Central Storage in order to save energy. Central Storage will be turned on and off automatically according to the schedule below.")}}</span>
            </div>
            <div class="scheduler-content">
                <div class="inline-blocks shed_active">
                    <div class="block">
                        <div data-name="APSchedulerEnable" data-value="${data.schedulerState}" data-default-value="${data.schedulerState}" class="swc-checkbox enable-scheduler validatable {{if data.scheduleState}}checked{{/if}}">
                            <div class="icon"></div>
                            <div class="text"><span class="translation-string">{{html localeString("Activate Central Storage Scheduler")}}</span></div>
                        </div>
                    </div>
                </div>

                <div class="scheduler-container">
                </div>

            </div>
        </div>
        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class="button secondary big no-highlighting disabled cancel-changes">
                    <span class="translation-string">{{html localeString("Cancel")}}</span>
                </a>
                <a class="button primary big no-highlighting disabled save-changes">
                    <span class="translation-string">{{html localeString("Apply")}}</span>
                </a>
            </div>
            <div class="save-success">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Storage Scheduler saved successfully")}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, applications are starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 minutes.")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="storage:settings:cloud-accounts" type="text/x-jquery-tmpl">
    <div class="tab-content-container">
        <div class="text title list-title">
            <span class="translation-string">{{html localeString("Cloud Account Info")}}</span>
            <div class="icons info has-popover activate-cloud-info"
                 data-popover-template-id="storage:settings:info-icons"
                 data-popover-template-data='{ "component": "Activate Cloud Synchronization" }'
                 data-popover-placement="right"
                 data-popover-holder=".activate-cloud-info">
            </div>
        </div>
        <div class="items">
            <div class="expandable-list">
                <div class="expandable-list-title">
                    <div class="block account" data-key="device-name">{{html localeString("Activate Cloud Account") }}</div>
                    <div class="block status" data-key="device-name">{{html localeString("Status") }}</div>
                    <div class="block sync-time" data-key="device-name">{{html localeString("Last Sync Time") }}</div>
                    <div class="block actions" data-key="device-name">{{html localeString("Actions") }}</div>
                </div>
                <div class="account-list-container">
                    <!-- data list -->
                </div>
            </div>
        </div>
    </div>
    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button secondary big no-highlighting disabled cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button primary big no-highlighting disabled save-changes">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Activation states saved successfully")}}</span>
            </div>
        </div>
    </div>

    <div class="disable-page-message">
        {{html localeString("To start using Cloud Sync, please turn the Central Storage on.")}}
    </div>

</script>

<script id="system:settings:modal-windows:backup-settings" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Save Current Configuration")}}</span>
    </div>
    <div class="text">
        {{html localeString("Your %ProductName% allows you to save all the configurations of the %ProductName% in the Swisscom customer center or localy as a file. ")}}
        {{html localeString("Please select how to save your configuration:")}}

        <div class="backup-options-section">
            <div class="swc-radio-buttons backup-options" data-name="backup-options" data-value="acs">
                <div class="mode active" data-value="acs">
                    <div class="icon"></div>
                    <div class="text">
                        <div class="table">
                            <div class="table-row">
                                <div class="block option-title">
                                    {{html localeString("Save configuration in the Swisscom customer center")}}
                                </div>
                            </div>
                            <div class="table-row">
                                <div class="block option-description">
                                    {{html localeString("It will be securly saved in the Swisscom network and you easily can restore it from your customer center.")}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mode" data-value="local">
                    <div class="icon"></div>
                    <div class="text">
                        <div class="table">
                            <div class="table-row">
                                <div class="block option-title">
                                    {{html localeString("Save configuration as a local file on your computer")}}
                                </div>
                            </div>
                            <div class="table-row">
                                <div class="block option-description">
                                    {{html localeString("You can retore your file by choosing the restore option in the menu.")}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     {{if data.status !== true}}
     <div class="additional-info hide-starlink hide-starlite">{{html localeString("Please note that Central Storage is turned off now, and it must be started to complete the backup.  The operation will take a couple extra minutes.")}}</div>
     {{/if}}
    </div>
    <div class="modal-buttons">
        <a class="button big no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button big no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Save")}}</span>
        </a>
    </div>
</script>

<script id="system:settings:gateway:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Save or Restore the Gateway Configuration" }}
        <span class="translation-string">{{html localeString("Save or Restore the Gateway Configuration Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="system:settings:backup:iframe" type="text/x-jquery-tmpl">
    <iframe class="backup-iframe" name="backup-iframe" src="/backup?context=${context}" style="display: none;"></iframe>
</script>

<script id="system:settings:restore:iframe" type="text/x-jquery-tmpl">
    <iframe class="restore-iframe" name="restore-iframe"></iframe>
</script>

<script id="system:settings:restore:modal:restore-confirm" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Restore the Gateway Configuration")}}</span></div>
    <div class="text">
        <span class="translation-string">{{html localeString("Your gateway will be restored with the selected file:")}}</span>&nbsp;<span class="file-name">${data.filename}</span><br/>
        <span class="translation-string">{{html localeString("After the restoring will complete the Gateway will reboot automatically.")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Restore Configuration")}}</span></a>
    </div>
</script>

<script id="system:settings:restore:modal:restore-process" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Restoring the Gateway")}}</span></div>
    <div class="ruler-block"></div>
    <div class="text"><span class="translation-string">{{html localeString("The restoring will take about 2 min. Please do not switch off the gateway until the restoring and rebooting are complete.")}}</span></div>

</script>

<script id="system:settings:restore:modal:restore-wrongfile" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Wrong file format!")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Your file extension should be *.cfg. Please, choose another file.")}}</span></div>
    <div class="buttons-container">
        <a class="button primary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Close")}}</span></a>
    </div>
</script>

<script id="system:settings:restore:modal:restore-error" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Restoring of the Gateway configuration has failed!")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Please check your internet connection and try again.")}}</span></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("OK")}}</span></a>
    </div>
</script>

<script id="system:settings:upgrade:modal:upgrade-confirm" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Upgrade the Gateway Firmware")}}</span></div>
    <div class="text">
        <span class="translation-string">{{html localeString("Your gateway will be upgraded.")}}</span>
        <span class="translation-string">{{html localeString("After the upgrading will complete the Gateway will reboot automatically.")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Upgrade")}}</span></a>
    </div>
</script>

<script id="system:settings:upgrade:modal:upgrade-process" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Upgrading the Gateway")}}</span></div>
    <div class="ruler-block"></div>
    <div class="text"><span class="translation-string">{{html localeString("The upgrading will take about 6 min. Please do not switch off the gateway until the upgrading and rebooting are complete.")}}</span></div>

</script>

<script id="system:settings:upgrade:modal:upgrade-wrongfile" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Wrong file format!")}}</span></div>
    {{if data.GlobalEnable}}
    <div class="text"><span class="translation-string">{{html localeString("Your file extension should be *.rui for NP or *.acs for AP. Please, choose another file.")}}</span></div>
    {{else}}
    <div class="text"><span class="translation-string">{{html localeString("Your file extension should be *.rui. Please, choose another file.")}}</span></div>
    {{/if}}
    <div class="buttons-container">
        <a class="button primary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Close")}}</span></a>
    </div>
</script>

<script id="system:settings:upgrade:modal:upgrade-nofile" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("No file!")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Please, choose file.")}}</span></div>
    <div class="buttons-container">
        <a class="button primary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Close")}}</span></a>
    </div>
</script>

<script id="system:settings:upgrade:modal:upgrade-error" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Upgrading of the Gateway configuration has failed!")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Please check your internet connection and try again.")}}</span></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Upgrade Configuration")}}</span></a>
    </div>
</script>

<script id="system:settings:upgrade:modal:upgrade-oldie" type="text/x-jquery-tmpl">
    <div class="info-strings">
        <span class="translation-string">{{html localeString("Too old IE to upgrade process")}}</span>
    </div>
</script>

<script id="system:settings:reboot:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="system:settings:reboot:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Reboot the Gateway")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("During the boot all services like the Internet and TV will be unavailable. Do you want to reboot the gateway?")}}</span></div>
    <div class="buttons-container">
        <a class="button secondary big no-highlighting cancel-reboot"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting start-reboot"><span class="translation-string">{{html localeString("Reboot")}}</span></a>
    </div>
</script>

<script id="system:settings:reboot-process:modal" type="text/x-jquery-tmpl">
    <div class="progress-block">
        <div class="title"><span class="translation-string">{{html localeString("Reboot the Gateway")}}</span></div>
        <div class="ruler-block"></div>
        <div class="text"><span class="translation-string">{{html localeString("The rebooting will take about 2 min. Please do not switch off the gateway until the rebooting is complete.")}}</span></div>
    </div>
    <div class="error-message hidden">
        <div class="text title"><span class="translation-string">{{html localeString("Error")}}</span></div>
        <div class="text"><span class="translation-string">{{html localeString("Unable establish connection to the device")}}</span></div>
        <div class="buttons-container">
            <a class="button secondary big no-highlighting close-modal"><span class="translation-string">{{html localeString("Close")}}</span></a>
        </div>
    </div>
</script>

<script id="system:settings:reset:modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Resetting Gateway Configuration to Factory Settings")}}</span>
    </div>
    <div class="text">
        <div class="ruler-block"></div>
        <div class="text"><span class="translation-string">{{html localeString("All your configuration like WiFi name and Password or Port Forwarding will be set to Factory Defaults. It is recommended to save your configuration first and then Restore afterwards.")}}</span></div>
        <div class="text"><span class="translation-string">{{html localeString("Select one of the Factory Reset options:")}}</span></div>
        <div class="table swc-radio-buttons reset-type"  data-name="reset-type" data-value="without">
            <div class="table-row">
                <div class="mode active" data-value="without" name="without">
                    <div class="icon"></div>
                    <div class="text">
                        <div class="table">
                            <div class="table-row">
                                <div class="block option-title">
                                    {{html localeString("Factory Reset Without DECT Pairing")}}
                                </div>
                            </div>
                            <div class="table-row">
                                <div class="block option-description">
                                    <span class="translation-string">{{html localeString("The Gateway will be reset to factory defaults except for your paired DECT Phones and Devices")}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-row">
                <div class="mode" data-value="with" name="with">
                    <div class="icon"></div>
                    <div class="text">
                        <div class="table">
                            <div class="table-row">
                                <div class="block option-title">
                                    {{html localeString("Full Factory Reset")}}
                                </div>
                            </div>
                            <div class="table-row">
                                <div class="block option-description">
                                    <span class="translation-string">{{html localeString("The Gateway will be reset to the configuration you got on delivery")}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button secondary big no-highlighting cancel-changes"><span class="translation-string">{{html localeString("Cancel")}}</span></a>
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("Set to Factory Defaults")}}</span></a>
    </div>
</script>

<script id="system:settings:reset-process:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Resetting Gateway Configuration to Factory Settings")}}</span></div>
    <div class="ruler-block"></div>
    <div class="text"><span class="translation-string">{{html localeString("Your Gateway will be set to factory defaults and rebooted. Please do not switch off the gateway until the rebooting will complete.")}}</span></div>
</script>

<script id="system:settings:gateway:modal" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Password successfully changed.")}}</span></div>
    <div class="text"><span class="translation-string">{{html localeString("Please, log in with your new password")}}</span></div>
    <div class="buttons-container">
        <a class="button primary big no-highlighting logout"><span class="translation-string">{{html localeString("Log In")}}</span></a>
    </div>
</script>

<script id="system:settings:gateway:modal:on-recovery-status-change" type="text/x-jquery-tmpl">
    <div class="title">
        {{html localeString("Password Recovery")}}
    </div>
    <div class="text">
        {{html localeString("By unchecking the Password Recovery option you will not be able to change password by entering Activation Code.")}}
        {{html localeString("In case you forget your current password, you wil be able to get access to Gateway only by resetting it to factory defaults.")}}
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            {{html localeString("Cancel")}}
        </a>
        <a class="button no-highlighting primary apply-changes">
            {{html localeString("Disable")}}
        </a>
    </div>
</script>

<script id="system:settings:firmware:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Upgrade Gateway Firmware From a Firmware File" }}
        <span class="translation-string">{{html localeString("Upgrade Gateway Firmware From a Firmware File Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="system:settings:gateway-login:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Enable Password Recovery process" }}
        <span class="translation-string">{{html localeString("Enable Password Recovery process Info Popup")}}</span>
        {{/if}}

        {{if component === "From 8 to 16 char" }}
        <span class="translation-string">{{html localeString("Your Password must be from 8 to 16 characters long and should contain at list one digit(0-9), full stop(.), hyphen(-) or underscore(_).")}}</span>
        {{/if}}
        {{if component === "Password recovery from 8 to 16 char" }}
        <span class="translation-string">{{html localeString("Your password must be from 8 to 16 characters long and should contain at least one digit(0-9), full stop(.), hyphen(-) or underscore(_). No umlauts (ä,ö,ü), accents(à, è, ...) or spaces are allowed. Password is case sensitive.")}}</span>
        {{/if}}
    </div>
</script>


<script id="system:settings:reset:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Save or Restore the Gateway Configuration" }}
        <span class="translation-string">
			{{html localeString("Save or Restore the Gateway Configuration Info Popup")}}
			{{html localeString("No umlauts(ä, ö, ü), accents(à, è, ...) and spaces are allowed. Password is case sensitive.")}}
		</span>
        {{/if}}
    </div>

</script>

<script id="system:settings:privacy:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="system:display:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Display Bright Time" }}
        <span class="translation-string">{{html localeString("Display Bright Time Info Popup")}}</span>
        {{/if}}

        {{if component === "Display Interface Language" }}
        <span class="translation-string">{{html localeString("Display Interface Language Info Popup")}}</span>
        {{/if}}

        {{if component === "WiFi Password" }}
        <span class="translation-string">{{html localeString("WiFi Password Info Popup")}}</span>
        {{/if}}

        {{if component === "WiFi Guest Password" }}
        <span class="translation-string">{{html localeString("WiFi Guest Password Info Popup")}}</span>
        {{/if}}
    </div>
</script>
<script id="system:display:connection-error" type="text/x-jquery-tmpl">
    <div class="text">        
        <div class="info-strings">
            <span class="translation-string">{{html localeString("Changes could not be saved")}}</span>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Ok")}}</span>
        </a>
    </div>
</script>
<script id="system:diagnostics:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="system:diagnostics:upTimeTmpl" type="text/x-jquery-tmpl">
    ${upTime.d.value}&nbsp;<span class="translation-string">{{html localeString(upTime.d.translation)}}</span>&nbsp;
    ${upTime.h.value}&nbsp;<span class="translation-string">{{html localeString(upTime.h.translation)}}</span>&nbsp;
    ${upTime.m.value}&nbsp;<span class="translation-string">{{html localeString(upTime.m.translation)}}</span>

    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("d0")}}</span>
        <span class="translation-string">{{html localeString("d1")}}</span>
        <span class="translation-string">{{html localeString("d")}}</span>

        <span class="translation-string">{{html localeString("h0")}}</span>
        <span class="translation-string">{{html localeString("h1")}}</span>
        <span class="translation-string">{{html localeString("h")}}</span>

        <span class="translation-string">{{html localeString("m0")}}</span>
        <span class="translation-string">{{html localeString("m1")}}</span>
        <span class="translation-string">{{html localeString("m")}}</span>
    </span>
</script>

<script id="system:diagnostics:speedcheck:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Speed-Check Info"}}
            <span class="translation-string">{{html localeString("Speed check info")}}</span>
        {{/if}}
        {{if component === "Internet Speed Info"}}
            <span class="translation-string">{{html localeString("Internet speed info")}}</span>
        {{/if}}
        {{if component === "Device Speed Info"}}
            <span class="translation-string">{{html localeString("Device speed info")}}</span>
        {{/if}}
    </div>
</script>

<script id="system:diagnostics:speedcheck:warning" type="text/x-jquery-tmpl">
    <div class="speedcheck-popover">
        <div class="info-strings">
            <span class="translation-string">{{html localeString(warningMessage)}}</span>
        </div>
    </div>
</script>

<script id="system:diagnostics:speedcheck:error" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">${data.title}</span></div>
    <div class="text"><span class="translation-string">{{html localeString(data.message)}}</span></div>
    <div class="horiz-line"></div>
    <div class="buttons-container">
        <a class="button primary big no-highlighting apply-changes"><span class="translation-string">{{html localeString("OK")}}</span></a>
    </div>
</script>

<script id="system:settings" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Manage System Settings")}}</span></h1>
    </div>
    <ul class="page-tabs">
        <li class="tab-reset tab first">
            <a href="#system/settings/reset"> <span class="translation-string">{{html localeString("Configuration and Factory Reset")}}</span></a>
        </li>
        <li class="tab-reboot tab">
            <a href="#system/settings/reboot"> <span class="translation-string">{{html localeString("Reboot")}}</span></a>
        </li>
        <li class="tab-gateway standard-mode-tab-last tab">
            <a href="#system/settings/gateway"> <span class="translation-string">{{html localeString("Gateway Login")}}</span></a>
        </li>

        <li class="tab-firmware tab expert-mode-only last">
            <a href="#system/settings/firmware"> <span class="translation-string">{{html localeString("Firmware")}}</span></a>
        </li>
        <!--
        <li class="tab-privacy tab expert-mode-only last">
            <a href="#system/settings/privacy"> <span class="translation-string">{{html localeString("Privacy")}}</span></a>
        </li>
        -->

        <div class="tabs-content"></div>
    </ul>
</script>

<script id="speedtest" type="text/x-jquery-tmpl">
    <ul class="page-tabs">
        <li class="tab-speetest tab active">
            <a href="#speedtest"> <span class="translation-string">{{html localeString("Speed-Check")}}</span></a>
        </li>

        <div class="tabs-content"></div>
    </ul>
</script>

<script id="system:settings:gateway" type="text/x-jquery-tmpl">
    <div class="text change-password-label">
        {{html localeString("You can change your Gateway Password")}}
    </div>

    <div class="table password-section">
        <div class="table-row current-password-section">
            <div class="left">
                {{html localeString("Current Password")}}
            </div>
            <div class="right">
                <div class="block input-container">
                    <input type="password" class="swc-input validatable original" name="current-password" data-default-value="">
                    <input type="text" class="swc-input validatable copy" name="current-password" data-default-value="">
                    <span class="valid-tick"></span>
                </div>
                <div class="block">
                    <div class="swc-checkbox show-password skip-validation" data-value="false">
                        <div class="icon"></div>
                        <div class="text">{{html localeString("Show Password")}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="validation-message" data-parameter-name="current-password">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="invalid password">
                    {{html localeString("Validation message Current Password: Invalid password")}}
                </span>
            </div>
        </div>

        <div class="table-row new-password-section">
            <div class="left">
                {{html localeString("New Password")}}
            </div>
            <div class="right">
                <div class="block input-container">
                    <input type="password" class="swc-input validatable original" name="new-password" placeholder='{{html localeString("From 8 to 16 characters")}}'
                            data-default-value="">
                    <input type="text" class="swc-input validatable copy" name="new-password" placeholder='{{html localeString("From 8 to 16 characters")}}'
                           data-default-value="">
                    <span class="valid-tick"></span>
                </div>
				<div class="block password-validation-info">
					<div class="icons has-popover info recovery-status-info"
                 		data-popover-template-id="system:settings:gateway-login:info-icons"
                		data-popover-template-data='{ "component": "From 8 to 16 char" }'
                		data-popover-placement="right"
                 		data-popover-holder=".recovery-status-info">
            		</div>
				</div>
            </div>
        </div>

        <div class="validation-message" data-parameter-name="new-password">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="invalid characters">
                    {{html localeString("Your Password must be from 8 to 16 characters long and should contain at list one digit(0-9), full stop(.), hyphen(-) or underscore(_).")}}
                    {{html localeString("No umlauts, accents and spaces are allowed.")}}
                </span>
            </div>
        </div>

        <div class="table-row new-password-confirm-section">
            <div class="left">
                {{html localeString("Verify Password")}}
            </div>
            <div class="right">
                <div class="block input-container">
                    <input type="password" class="swc-input validatable original" name="new-password-confirm" data-default-value="">
                    <input type="text" class="swc-input validatable copy" name="new-password-confirm" data-default-value="">
                    <span class="valid-tick"></span>
                </div>
            </div>
        </div>

        <div class="validation-message" data-parameter-name="new-password-confirm">
            <div class="icon"></div>
            <div class="text">
                <span class="error-message" data-error="does not match">
                    {{html localeString("Validation message New Password: Does not match")}}
                </span>
            </div>
        </div>
    </div>

    <div class="inline-blocks recovery-section hide-starlite hide-starlink">
        <div class="block">
            <div class="swc-checkbox change-recovery {{if data.recoveryEnable}}checked{{/if}}" data-name="recoveryStatus"
                 data-value="{{if data.recoveryEnable}}true{{else}}false{{/if}}"
                 data-default-value="{{if data.recoveryEnable}}true{{else}}false{{/if}}">
                <div class="icon"></div>
                <div class="text">
                    {{html localeString("Enable Password Recovery process")}}
                </div>
            </div>
        </div>
        <div class="block">
            <div class="icons has-popover info recovery-status-info"
                 data-popover-template-id="system:settings:gateway-login:info-icons"
                 data-popover-template-data='{ "component": "Enable Password Recovery process" }'
                 data-popover-placement="right"
                 data-popover-holder=".recovery-status-info">
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button secondary big no-highlighting cancel-changes disabled">
                {{html localeString("Cancel")}}
            </a>
            <a class="button primary big no-highlighting save-changes disabled">
                {{html localeString("Apply")}}
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("Gateway login settings saved successfully")}}
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("Gateway login settings saving failed")}}
            </div>
        </div>
    </div>
</script>

<script id="system:settings:reboot" type="text/x-jquery-tmpl">
    <div class="text reboot-label">
        <span class="translation-string">{{html localeString("If your Internet access suddenly causes problems, it may help to reboot the computer")}}</span>
        <span class="translation-string">{{html localeString("Rebooting the gateway causes no disruption apart from resulting in a brief disruption to your network")}}</span>
    </div>

    <div class="buttons-container">
        <a class="button primary big no-highlighting reboot-gateway">
            <span class="translation-string">{{html localeString("Reboot the Gateway")}}</span>
        </a>
    </div>

    <div class="modal reboot-gateway">
        Gateway rebooter is here
    </div>
</script>

<script id="system:settings:firmware" type="text/x-jquery-tmpl">
    <div class="text installed-versions">
        <span class="translation-string">{{html localeString("Installed Firmware versions")}}</span>&nbsp;
        <span class="np-firmware">${data.npVersion}</span><span class="hide-starlite">{{if data.GlobalEnable}}/<span class="ap-firmware">${data.apVersion}</span>{{/if}}</span>{{if data.uiVersion}}/<span class="ui-firmware">${data.uiVersion}</span>{{/if}}
    </div>

    <div class="separator"></div>

    <div class="inline-blocks table-title">
        <div class="block title">
            <span class="translation-string">{{html localeString("Upgrade Gateway Firmware From a Firmware File")}}</span>
        </div>
        <div class="block">
            <div class="icons has-popover info upgrade-gateway-info"
                 data-popover-template-id="system:settings:firmware:info-icons"
                 data-popover-template-data='{ "component": "Upgrade Gateway Firmware From a Firmware File" }'
                 data-popover-placement="right"
                 data-popover-holder=".upgrade-gateway-info"
                 style="margin: 0;">
            </div>
        </div>
    </div>

    <div class="inline-blocks software-upgrade">
        <form class="block" id="upgrade-form">
            <div style="position: absolute; top: -1000px;">
                <input type="file" name="file" id="config-upgrade"/>
            </div>
            <label for="config-upgrade" class="button secondary big no-highlighting upgrade-config"
                 data-popover-template-id="system:settings:upgrade:modal:upgrade-oldie"
                 data-popover-placement="top"
                 data-popover-holder=".upgrade-config">
                <span class="translation-string">{{html localeString("Choose File")}}</span>
            </label>
        </form>
        <div class="block file-name">
            <div class="no-file">
                <span class="translation-string">{{html localeString("No File Chosen")}}</span>
            </div>
            <div class="file"></div>
        </div>
    </div>

    <div class="buttons-container">
        <a class="button primary big disabled no-highlighting upgrade-process"
                 data-popover-template-id="system:settings:upgrade:modal:upgrade-oldie"
                 data-popover-placement="top"
                 data-popover-holder=".upgrade-process">
            <span class="translation-string">{{html localeString("Upgrade From a File")}}</span>
        </a>
    </div>
</script>

<script id="system:settings:reset" type="text/x-jquery-tmpl">

    <div class="inline-blocks table-title">
        <div class="block title">
            <span class="translation-string">{{html localeString("Save or Restore the Gateway Configuration")}}</span>
        </div>
        <div class="block">
            <div class="icons has-popover info save-restore-configuration-info"
                 data-popover-template-id="system:settings:reset:info-icons"
                 data-popover-template-data='{ "component": "Save or Restore the Gateway Configuration" }'
                 data-popover-placement="right"
                 data-popover-holder=".save-restore-configuration-info"
                 style="margin: 0;">
            </div>
        </div>
    </div>

    <div class="text">
        <span class="translation-string">{{html localeString("You can save current configuration of your Gateway and restore it when required from saved file.")}}</span>
    </div>

    <div class="inline-blocks button-save-restore">
        <div class="block save">
            <a class="button primary big no-highlighting save-config">
                 <span class="translation-string">{{html localeString("Save Current Configuration")}}</span>
            </a>
        </div>

        <div class="block restore">
            <form id="restore-form" method="POST" enctype="multipart/form-data" action="/restore" target="restore-iframe">
                <div style="position: absolute; top: -1000px;">
                    <input type="text" name="context"/>
                    <input type="file" name="restore" id="config-restore"/>
                </div>
                <label for="config-restore" class="button secondary big no-highlighting restore-config">
                    {{html localeString("Restore Configuration")}}
                </label>
            </form>
        </div>
    </div>

    <div class="buttons-container-message save-config-message">
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("Gateway Configuration has been saved successfully")}}
            </div>
        </div>

        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                {{html localeString("An error ocured while saving Gateway Configuration")}}
            </div>
        </div>
    </div>

    <div class="separator"></div>

    <div class="inline-blocks table-title">
        <div class="block title">
            <span class="translation-string">{{html localeString("Reset Gateway Configuration to Factory Settings")}}</span>
        </div>
    </div>

    <div class="text">
        <span class="translation-string">{{html localeString("Resetting the router configuration back to Factory settings will erase all personal settings")}}</span>
        <span class="translation-string">{{html localeString("You can save the current configuration before performing a factory Reset")}}</span>
    </div>

    <div class="buttons-container">
        <a class="button secondary big no-highlighting factory-reset">
            <span class="translation-string">{{html localeString("Factory Reset")}}</span>
        </a>
    </div>
</script>
<!--
<script id="system:settings:privacy" type="text/x-jquery-tmpl">
    <div class="text">
        <span class="translation-string">{{html localeString("Swisscom backups your WiFi and Gateway Password in the Swisscom network")}}</span>
        <span class="translation-string">{{html localeString("In case you need to replace your gateway device with the new one or you reset the gateway, you will get the settings automatically back from the network")}}</span>

    </div>

    <div class="separator" style="margin: 10px 0;"></div>

    <div class="inline-blocks wifi-checkbox enable-privacy">
        <div class="block">
            <div class="swc-checkbox enable-privacy checked">
                <div class="icon"></div>
                <div class="text"><span class="translation-string">{{html localeString("Enable WiFi Credentials backup in Swisscom Network")}}</span></div>
            </div>
        </div>
    </div>

    <div class="buttons-container">
        <a class="disabled button primary big no-highlighting">
            <span class="translation-string">{{html localeString("Apply")}}</span>
        </a>
    </div>
</script>
-->
<script id="system:display" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Set Up Gateway Display and LED")}}</span></h1>
    </div>
    <div class="base-content tabs-content">

        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("Display Bright Time")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown no-highlighting time-selection" data-default-value="${data.time}" data-name="time-selection" data-class="time-selection">
                            <div class="selected-option">
                                60&nbsp;<span class="translation-string">{{html localeString("sec")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info bright-time-info"
                             data-popover-template-id="system:display:info-icons"
                             data-popover-template-data='{ "component": "Display Bright Time" }'
                             data-popover-placement="right"
                             data-popover-holder=".bright-time-info">
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("Display Interface Language")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-dropdown no-highlighting language-selection" data-default-value="${data.lang}" data-name="language-selection" data-class="language-selection">
                            <div class="selected-option">
                                <span class="translation-string">{{html localeString("English")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info interface-language-info"
                             data-popover-template-id="system:display:info-icons"
                             data-popover-template-data='{ "component": "Display Interface Language" }'
                             data-popover-placement="right"
                             data-popover-holder=".interface-language-info">
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-checkbox show-wifi-password {{if data.show}}checked{{/if}}" data-default-value="${data.show}" data-value="${data.show}">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show on Display")}}</span></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info show-password-info no-margin"
                             data-popover-template-id="system:display:info-icons"
                             data-popover-template-data='{ "component": "WiFi Password" }'
                             data-popover-placement="right"
                             data-popover-holder=".show-password-info">
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Guest Password")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="swc-checkbox show-wifi-guest-password {{if data.showGuest}}checked{{/if}}" data-default-value="${data.showGuest}" data-value="${data.showGuest}">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show on Display")}}</span></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info show-password-info no-margin"
                             data-popover-template-id="system:display:info-icons"
                             data-popover-template-data='{ "component": "WiFi Guest Password" }'
                             data-popover-placement="right"
                             data-popover-holder=".show-password-info">
                        </div>
                    </div>
                </div>
            </div>

            <div class="validation-message system-display-error" data-parameter-name="system_display_error">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message connection-message translation-string" data-error="global">
                        {{html localeString("Changes could not be saved")}}
                    </span>
                </div>
            </div>
        </div>

        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class="button disabled secondary big no-highlighting cancel-changes">
                    <span class="translation-string">{{html localeString("Cancel")}}</span>
                </a>
                <a class="button disabled primary big no-highlighting save-changes">
                    <span class="translation-string">{{html localeString("Apply Changes")}}</span>
                </a>
            </div>
            <div class="save-success">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Display settings saved successfully")}}</span>
                </div>
            </div>
            <div class="save-error">
                <div class="icon">
                </div>
                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Your settings could not be saved. Please try again.")}}
                    </span>

                </div>
            </div>
            <div class="save-validation-errors">
                <div class="icon">
                </div>

                <div class="text">

                    <span class="translation-string">
                        {{html localeString("Please correct the errors on this page.")}}
                    </span>

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

<script id="system:diagnostics" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("View Diagnostics Information On Your Device Performance")}}</span></h1>
    </div>
    <ul class="page-tabs">
        <li class="tab-overview tab first">
            <a href="#system/diagnostics/overview"> <span class="translation-string">{{html localeString("Overview")}}</span></a>
        </li>
        <li class="tab-gateway tab last">
            <a href="#system/diagnostics/gateway"> <span class="translation-string">{{html localeString("Gateway")}}</span></a>
        </li>
        <div class="tabs-content"></div>
    </ul>
</script>

<script id="system:diagnostics:overview" type="text/x-jquery-tmpl">
    <div class="text title">
        <span class="translation-string">{{html localeString("Internet Access")}}</span>
    </div>

    <div class="table internet-access">
        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Internet Connection")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    {{if data.netStatus.ConnectionMode === "CONNECTED"}}
                        <div class="text-block is-connected connected">
                            <span class="translation-string">{{html localeString("Connected")}}</span>
                        </div>
                    {{else}}
                        {{if data.netStatus.ConnectionMode === "CONNECTION_IN_PROGRESS"}}
                            <div class="text-block is-connected disconnected">
                                <span class="translation-string">{{html localeString("Internet problem detected")}}</span>
                            </div>
                            {{else}}
                            <div class="text-block is-disconnected disconnected">
                                <span class="translation-string">{{html localeString("Disconnected")}}</span>
                            </div>
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Line Mode")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    {{if data.netStatus.RemoteIPAddress && data.netStatus.RemoteIPAddress !== "0.0.0.0"}}
                        <div class="text-block con-type fibre">
                            <span class="translation-string">{{html localeString(data.connectionType)}}</span>
                        </div>
                    {{else}}
                        <div class="text-block con-type n-a">
                            <span class="translation-string">{{html localeString("Not Available")}}</span>
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>

        {{if data.netStatus.ConnectionType !== "ethernet"}}
        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("DSL Connection Type")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block dns-servers">
                        <span style="text-transform: uppercase;">${data.netStatus.Protocol}</span>
                    </div>
                </div>
            </div>
        </div>
        {{/if}}

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("DNS Servers")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block dns-servers">
                        {{if !data.netStatus.DNSServers}}
                            <span class="translation-string">{{html localeString("Not Available")}}</span>
                        {{else}}
                            {{each(key, dnssrv) data.netStatus.DNSServers}}
                                <div class="text-block">
                                    ${dnssrv}
                                </div>
                            {{/each}}
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("IP Address in Internet")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block ip-address">
                        {{if data.netStatus.RemoteIPAddress && data.netStatus.RemoteIPAddress !== "0.0.0.0"}}
                            ${data.netStatus.RemoteIPAddress}
                        {{else}}
                            <span class="translation-string">{{html localeString("Not Available")}}</span>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row hide-starlink">
            <div class="left">
                <span class="translation-string">{{html localeString("IPv6 Prefix")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block">
                        {{if data.netStatus.IPv6Prefix}}
                            ${data.netStatus.IPv6Prefix}
                        {{else}}
                            <span class="translation-string">{{html localeString("Disabled")}}</span>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row hide-starlink">
            <div class="left">
                <span class="translation-string">{{html localeString("DynDNS")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    {{if data.dyndnsStatus && data.dnsProviderData}}
                        <div class="text-block">
                            <span class="translation-string">
                                {{if data.dnsProviderData.status === "UPDATE_PENDING" || data.dnsProviderData.status === "UPDATING"}}
                                    {{html localeString("updating")}} (${data.dnsProviderData.service})
                                {{else}}
                                    {{if data.dnsProviderData.status === "BLOCKED"}}
                                        {{html localeString("blocked")}} (${data.dnsProviderData.service})
                                    {{else}}
                                        {{if data.dnsProviderData.status === "UPDATED"}}
                                            {{html localeString("activated")}} (${data.dnsProviderData.service})
                                        {{else}}
                                            {{html localeString("failed")}} (${data.dnsProviderData.service})
                                        {{/if}}
                                    {{/if}}
                                {{/if}}
                            </span>
                        {{if data.dnsProviderData.lastUpdate.length > 0}}
                                , <span class="translation-string">{{html localeString("Last update")}}:</span>
                                {{if data.dnsProviderData.status === "UNKNOWN"}}
                                    <span class="error-text">{{html localeString("Failed")}}</span>
                                {{else}}
                                    <span>${data.dnsProviderData.lastUpdate}</span>
                                {{/if}}
                        {{/if}}
                        </div>
                    {{/if}}
                    {{if data.swisscomDyndns.get('status') === true}}
                        <div class="text-block">
                         {{html localeString("activated")}} ({{html localeString("Swisscom")}})
                        </div>
                    {{/if}}
                    {{if !data.dyndnsStatus && data.swisscomDyndns.get('status') !== true}}
                        <div class="text-block">
                            <span class="translation-string">{{html localeString("Disabled")}}</span>
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>

    <div class="separator" style="margin: 6px 0 14px"></div>

    <div class="text title">
        <span class="translation-string">{{html localeString("Measurements")}}</span>
    </div>

    {{if data.netStatus.RemoteIPAddress && data.netStatus.RemoteIPAddress !== "0.0.0.0"}}
        {{if data.netStatus.ConnectionType === "ethernet" && data.sfp}}
            <div class="table">
                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("TX Optical Power")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                ${data.sfp.SFP_TxPower / 1000} <span class="translation-string">{{html localeString("dBm")}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("RX Optical Power")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                ${data.sfp.SFP_RxPower / 1000} <span class="translation-string">{{html localeString("dBm")}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{else data.netStatus.ConnectionType !== "ethernet" && data.dsl}}
            <div class="table dsl-measurements">
                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Transmission Speed")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Upstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="transmission-speed-upstream">${data.dsl.UpstreamCurrRate}</span>
                                    <span class="translation-string">{{html localeString("Kbps")}}</span>
                                </div>
                            </div>
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Downstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="transmission-speed-downstream">${data.dsl.DownstreamCurrRate}</span>
                                    <span class="translation-string">{{html localeString("Kbps")}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Line Attenuation")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Upstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="line-attenuation-upstream">${data.dsl.UpstreamAttenuation / 10}</span>
                                    <span class="translation-string">{{html localeString("db")}}</span>
                                </div>
                            </div>
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Downstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="line-attenuation-downstream">${data.dsl.DownstreamAttenuation / 10}</span>
                                    <span class="translation-string">{{html localeString("db")}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Signal-to-noise Ratio")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Upstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="stn-ratio-upstream">${data.dsl.UpstreamNoiseMargin / 10}</span>
                                    <span class="translation-string">{{html localeString("db")}}</span>
                                </div>
                            </div>
                            <div class="text-block">
                                <div class="text-block-label">
                                    <span class="translation-string">{{html localeString("Downstream")}}</span>
                                </div>
                                <div class="text-block-value">
                                    <span class="stn-ratio-downstream">${data.dsl.DownstreamNoiseMargin / 10}</span>
                                    <span class="translation-string">{{html localeString("db")}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}
    {{else}}
        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("Status")}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            <span class="translation-string">{{html localeString("Not Available")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}

    {{if false}}
        <div class="separator" style="margin: 10px 0;"></div>

        <div class="text title">
            <span class="translation-string">{{html localeString("System Log")}}</span>
        </div>

        <div class="text">
            <span class="translation-string">{{html localeString("System Log lists important events which occur in the router system. The Customer Service department uses it for troubleshooting")}}</span>
        </div>

        <div class="buttons-container">
            <a class="button primary big no-highlighting export-log">
                <span class="translation-string">{{html localeString("Export Log File")}}</span>
            </a>
        </div>
    {{/if}}
    
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Ethernet")}}</span>
        <span class="translation-string">{{html localeString("VDSL")}}</span>
        <span class="translation-string">{{html localeString("ADSL")}}</span>
        <span class="translation-string">{{html localeString("ADSL")}}</span>
        <span class="translation-string">{{html localeString("GSM")}}</span>
    </span>
</script>

<script id="system:diagnostics:gateway" type="text/x-jquery-tmpl">
    <div class="table">

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Name")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block">
                        <span class="translation-string">{{html localeString("Centro Stargate")}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Manufacturer")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block manufacturer">
                        ${data.manufacturer}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Serial Number")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block serial-number">
                        ${data.serial}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Model")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block model">
                        ${data.model}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Local IP Address")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block text-left local-ip">
                        {{if data.IPv6Status}}
                            <span class="translation-string">{{html localeString("IPv4")}}</span> ${data.localIP} <br>
                            <span class="translation-string">{{html localeString("IPv6")}}</span> ${data.localIPv6}
                        {{else}}
                            ${data.localIP}
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row hide-starlite hide-starlink">
            <div class="left">
                <span class="translation-string">{{html localeString("Central Storage IP Address")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block storage-ip">
                        ${data.storageIP}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("MAC Address")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block mac-address">
                        ${data.mac}
                    </div>
                </div>
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Firmware Version")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block np-firmware-version">
                        ${data.NPFirmware}
                    </div>
                </div>
                {{if data.GlobalEnable}}
                <span class="hide-starlite">
                <div class="block">
                    <div class="text-block text">
                        /
                    </div>
                </div>
                <div class="block">
                    <div class="text-block ap-firmware-version">
                        ${data.APFirmware}
                    </div>
                </div>
                </span>
                {{/if}}

                {{if data.build && data.build["build"]}}
                    <div class="block">
                        <div class="text-block text">/</div>
                    </div>
                    <div class="block">
                        <div class="text-block ap-firmware-version">${data.build["build"]}</div>
                    </div>
                {{/if}}
            </div>
        </div>

        <div class="table-row">
            <div class="left">
                <span class="translation-string">{{html localeString("Uptime")}}</span>
            </div>
            <div class="right">
                <div class="block">
                    <div class="text-block uptime">
                    </div>
                </div>
            </div>
        </div>

    </div>
</script>

<script id="system:diagnostics:speedcheck" type="text/x-jquery-tmpl">
	<div class="system-diagnostics-speedcheck">
		<div class="inline-blocks">
			<div class="block">
	        	<div class="text-block text title">
					<span class="translation-string">{{html localeString("Speed-Check")}}</span>
				</div>
	        </div>
	        <div class="block">
	            <div class="icons info has-popover set-ap-state-info"
	                 data-popover-template-id="system:diagnostics:speedcheck:info-icons"
	                 data-popover-template-data='{ "component": "Speed-Check Info" }'
	                 data-popover-placement="right"
	                 data-popover-holder=".set-ap-state-info">
	            </div>
			</div>
	    </div>
	    
	    <div class="inline-blocks">
			<div class="block description">
				<div class="block">
					<div class="text">
						<span class="translation-string">{{html localeString("Speed-Check Info")}}</span>
					</div>
				</div>
                <div class="inline-blocks left info-text">
					<div class="block left image mini internet"></div>
				    <span class="translation-string">{{html localeString("from Box to internet")}}</span>
				</div>
				<div class="inline-blocks left info-text local-test">
                    <div class="block left image mini computer"></div>
                    <span class="translation-string">{{html localeString("from device to Box")}}</span>
				</div>
			</div>
			<div class="block">
				<div class="block image-block">
					<div class="block image internet" style="margin-bottom: 5px;"></div>
					<ul class="internet-dots dots">
						<li>
							<span class="dot 0">&nbsp;</span>
						</li>
						<li>
							<span class="dot 1">&nbsp;</span>
						</li>
						<li>
							<span class="dot 2">&nbsp;</span>
						</li>
						<li>
							<span class="dot 3">&nbsp;</span>
						</li>
						<li>
							<span class="dot 4">&nbsp;</span>
						</li>
						<li>
							<span class="dot 5">&nbsp;</span>
						</li>
						<li>
							<span class="dot 6">&nbsp;</span>
						</li>
						<li>
							<span class="dot 7">&nbsp;</span>
						</li>
						<li>
							<span class="dot 8">&nbsp;</span>
						</li>
						<li>
							<span class="dot 9">&nbsp;</span>
						</li>
					</ul>
                    <div class="block image internet-box"></div>
					<div class="device-connection local-test">
						<ul class="device-dots dots">
							<li>
								<span class="dot 0">&nbsp;</span>
							</li>
							<li>
								<span class="dot 1">&nbsp;</span>
							</li>
							<li>
								<span class="dot 2">&nbsp;</span>
							</li>
							<li>
								<span class="dot 3">&nbsp;</span>
							</li>
							<li>
								<span class="dot 4">&nbsp;</span>
							</li>
							<li>
								<span class="dot 5">&nbsp;</span>
							</li>
							<li>
								<span class="dot 6">&nbsp;</span>
							</li>
							<li>
								<span class="dot 7">&nbsp;</span>
							</li>
							<li>
								<span class="dot 8">&nbsp;</span>
							</li>
							<li>
								<span class="dot 9">&nbsp;</span>
							</li>
						</ul>							
						<div class="slow-device-connection has-popover set-ap-state-info" style="display: none;"
			                 data-popover-template-id="system:diagnostics:speedcheck:warning"
			                 data-popover-template-data='{ "component": "Speed-Check Info" }'
			                 data-popover-placement="left"
			                 data-popover-holder=".set-ap-state-info"
			                 data-popover-class-name="warning-popover">
			                 i
			            </div>
					</div>
					<div class="local-test">
    					<div class="block image mini wifi" style="margin: auto; height: 25px; display: none;"></div>
                        <div class="block image computer"></div>
					</div>
				</div>
				<div class="block">
					<div class="text ping-title device-icon">
						<span class="translation-string" style="text-transform: uppercase">{{html localeString("Ping")}}</span>
						<span id="ping" class="odometer ping-value">0</span>
						<span>ms</span>
					</div>
					<div class="text dots">
						<div class="inline-blocks">
							<div class="text-block block">
								<div class="translation-string">{{html localeString("INTERNET SPEED")}}</div>
							</div>
					        <div class="block">
					            <div class="icons info has-popover set-ap-state-info"
					                 data-popover-template-id="system:diagnostics:speedcheck:info-icons"
					                 data-popover-template-data='{ "component": "Internet Speed Info" }'
					                 data-popover-placement="right"
					                 data-popover-holder=".set-ap-state-info">
					            </div>
							</div>
						</div>
						<div class="block speed-block">
							<div class="translation-string">{{html localeString("DOWNLOAD")}}</div>
							<div class="text">
								<span id="internet-download" class="odometer speed">0</span>
								<span>{{html localeString("Mbps")}}</span>
							</div>
							<div class="translation-string">{{html localeString("UPLOAD")}}</div>
							<div class="text">
								<span id="internet-upload" class="odometer speed">0</span>
								<span>{{html localeString("Mbps")}}</span>
							</div>
						</div>
					</div>
					<div class="text device-icon" style="height: 27px;">
						&nbsp;
					</div>
					<div class="text dots local-test">
						<div class="inline-blocks">
							<div class="text-block block">
								<div class="translation-string local-title">{{html localeString("HOMENETWORK SPEED")}}</div>
							</div>
							<div class="block">
					            <div class="icons info has-popover set-ap-state-info"
					                 data-popover-template-id="system:diagnostics:speedcheck:info-icons"
					                 data-popover-template-data='{ "component": "Device Speed Info" }'
					                 data-popover-placement="right"
					                 data-popover-holder=".set-ap-state-info">
					            </div>
							</div>
						</div>
						<div class="block speed-block">
							<div class="translation-string">{{html localeString("DOWNLOAD")}}</div>
							<div class="text">
								<span id="device-download" class="odometer speed">0</span>
								<span>{{html localeString("Mbps")}}</span>
							</div>
							<div class="translation-string">{{html localeString("UPLOAD")}}</div>
							<div class="text">
								<span id="device-upload" class="odometer speed">0</span>
								<span>{{html localeString("Mbps")}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="inline-blocks bottom-bar">
            <div class="block side-element start-stop-button">
                <a class="button primary big no-highlighting">
                    <span class="translation-string">{{html localeString("Start Speed-Check")}}</span>
                </a>
            </div>
			<div class="block progress">
	            <div class="text">
					<div class="translation-string progress-label">{{html localeString("Homenetwork Speed-Check running")}}</div>
				</div>
	            <div class="ruler-block">
					<div class="ruler-container">
						<div class="ruler">
							<div class="fill"></div>
						</div>
					</div>
				</div>
			</div>
	    </div>
    </div>

    <div class="hidden apStateOffMessage">
        <div class="text center">
            {{html localeString("To start sharing your data, please switch the Central Storage on")}}
        </div>
    </div>

    <div class="hidden wanOffMessage">
        <div class="text center">
            {{html localeString("There is no internet connecion.")}}
        </div>
    </div>

    <div class="hidden connectionDNSErrorMessage">
        <div class="text center">
            {{html localeString("The speed test cannot be launched.  Please use another device to launch the test or check the DNS network settings on your computer. In order to use the speed test, the DNS settings assigned by the Internet-Box have to be used.")}}
        </div>
    </div>

    <div class="hidden connectionErrorMessage">
        <div class="text center">
            {{html localeString("The Speedtest could not be started. Please make sure that Applications are enabled.")}}
        </div>
    </div>

    <div class="hidden apStateLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Central Storage is starting up...")}}</span>
                <br>
                <span>{{html localeString("This can take up to 2 Min")}}</span>
            </div>
        </div>
    </div>
    
    <div id="flash-content"></div>
    
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Error while speed testing.")}}</span>
        <span class="translation-string">{{html localeString("Please try again.")}}</span>
        <span class="translation-string">{{html localeString("The Speed-Check Server is curently not available.")}}</span>
        <span class="translation-string">{{html localeString("Please try later again.")}}</span>
        <span class="translation-string">{{html localeString("WAN greater 300")}}</span>
        <span class="translation-string">{{html localeString("WAN less 300 greater 100")}}</span>
        <span class="translation-string">{{html localeString("WAN less 100")}}</span>
        <span class="translation-string">{{html localeString("LAN greater 100")}}</span>
        <span class="translation-string">{{html localeString("LAN less 100")}}</span>
        <span class="translation-string">{{html localeString("Internet-Speed check running")}}</span>
        <span class="translation-string">{{html localeString("WLAN Speedcheck running")}}</span>
        <span class="translation-string">{{html localeString("Homenetwork Speed-Check running")}}</span>
        <span class="translation-string">{{html localeString("Ping test is running")}}</span>
        <span class="translation-string">{{html localeString("HOMENETWORK SPEED")}}</span>
        <span class="translation-string">{{html localeString("WLAN SPEED")}}</span>
        <span class="translation-string">{{html localeString("Start Speed-Check")}}</span>
        <span class="translation-string">{{html localeString("Stop Speed-Check")}}</span>
        <span class="translation-string">{{html localeString("Flash plugin error")}}</span>
        <span class="translation-string">{{html localeString("Invalid flash version")}}</span>
        <span class="translation-string">{{html localeString("No flash")}}</span>
        <span class="translation-string">{{html localeString("Another test is in progress.")}}</span>
        <span class="translation-string">{{html localeString("Please try again after test ends.")}}</span>
        <span class="translation-string">{{html localeString("Mbps")}}</span>
        <span class="translation-string">{{html localeString("Speed test server error.")}}</span>
        <span class="translation-string">{{html localeString("Speedtest could not to be started because the speed server is momentarily unavailable. Please try again later.")}}</span>
        <span class="translation-string">{{html localeString("Your browser uses a not supported flash plugin.")}}</span>
        <span class="translation-string">{{html localeString("Speedtest error")}}</span>
        <span class="translation-string">{{html localeString("The Speedtest could not be started.")}}</span>
    </span>
</script>

<script id="telephony:calls:add-callcontact" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Add Contact")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
             {{html localeString("Are you sure that you want to add this contact to your phonebook list?")}}
        </span>
    </div>

    <div class="modal-buttons">
        <a class="button no-highlighting primary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Yes")}}</span>
        </a>
    </div>
</script>

<script id="telephony:calls:info" type="text/x-jquery-tmpl">
    <div class="info-strings" {{if component === "Add to phonebook" }}style="min-width: 100px;"{{/if}}>
        {{if component === "Delete" }}
            <span class="translation-string">{{html localeString("Delete")}}</span>
        {{else component === "Add to phonebook" }}
            <span class="translation-string">{{html localeString("Add to phonebook")}}</span>
        {{else component === "incoming" }}
            <span class="translation-string">{{html localeString("Incoming")}}</span>
        {{else component === "outgoing" }}
            <span class="translation-string">{{html localeString("Outgoing")}}</span>
        {{else component === "missed" }}
            <span class="translation-string">{{html localeString("Missed")}}</span>
        {{else}}
            <span class="translation-string">${component}</span>
        {{/if}}
    </div>
</script>

<script id="telephony:device:expandable-list:dect-phones:visible-part" type="text/x-jquery-tmpl">
    <div class="device-name">
        <div class="device ${deviceType}">
            <div class="icon"></div>
        </div>
        <div class="state-default">
            <div class="text">${deviceName}</div>
        </div>
        <div class="state-edit">
            <input class="dect-name" value="${deviceName}"/>
        </div>
    </div>

    <div class="phone-numbers">
        {{if internalNumber}}
        <div class="left-part"></div>
        <div class="right-part">&nbsp;</div>
        <div class="left-part"><span class="translation-string">{{html localeString("Internal")}}</span></div>
        <div class="right-part">
            <div class="state-default">
                ${internalNumber}
            </div>
            <div class="state-edit">
                <div class="swc-dropdown internal-number" data-name="internal-number-${id}" data-class="internal-number-${id}">
                    <div class="selected-option">${internalNumber}</div>
                </div>
            </div>
        </div>
        {{/if}}
    </div>
    <div class="state-edit">
            <div class="buttons-container" style="margin-top:5px;">
                <a class="button secondary little no-highlighting unpair-phone">
                    <span class="translation-string">{{html localeString("Unpair")}}</span>
                </a>
                <a class="button secondary little no-highlighting ring-phone">
                    <span class="translation-string">{{html localeString("Ring")}}</span>
                </a>
            </div>
    </div>

</script>

<script id="telephony:phonebook:info-icons" type="text/x-jquery-tmpl">

</script>

<script id="telephony:device:pair:modal:pairing" type="text/x-jquery-tmpl">
    <div class="text title">
        <span class="translation-string">{{html localeString("Pairing New Device")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Pairing is in progress, please set device into Pairing Mode.")}}</span>
    </div>
    <div class="ruler-block">
    </div>
    <div class="buttons-container">
        <a class="button secondary small no-highlighting close-modal">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
    </div>
</script>

<script id="telephony:device:pair:modal:complete" type="text/x-jquery-tmpl">
    <div class="text title">
        <div class="icons status success"></div>
        <span class="translation-string">{{html localeString("Device has been paired successfully!")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("You can use now paired DECT device or customize it's properties in the DECT devices table")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary small no-highlighting close-modal">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="telephony:device:pair:modal:failed" type="text/x-jquery-tmpl">
    <div class="text title">
        <div class="icons status fail"></div>
        <span class="translation-string">{{html localeString("Pairing has failed!")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Please set device into Pairing Mode and start pairing again")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary small no-highlighting close-modal">
            <span class="translation-string">{{html localeString("Close")}}</span>
        </a>
        <a class="button primary small no-highlighting try-pairing">
            <span class="translation-string">{{html localeString("Try Again")}}</span>
        </a>
    </div>
</script>

<script id="telephony:device:pair:modal:manyDects" type="text/x-jquery-tmpl">
    <div class="title"><span class="translation-string">{{html localeString("Unable to pair new DECT device.")}}</span></div>
    <div class="text">
        <span class="translation-string">{{html localeString("The number of permissible DECT devices has been reached. To connect a new device you must first unpair a DECT device in the list.")}}</span>
    </div>
    <div class="modal-buttons buttons-container">
        <a class="button primary small no-highlighting close-modal">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div
</script>

<script id="telephony:modal-windows:no-groups" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have the wrong setup of VoIP!")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("You cannot use your DECT and wired devices with VoIP. Please contact Swisscom Support!")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Proceed")}}</span>
        </a>
    </div>
</script>

<script id="telephony:modal-windows:phonebook:clear-all" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Are you sure you want to permanently clear all your Phonebook Contacts?")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("This change cannot be undone")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("Clear All")}}</span>
        </a>
    </div>
</script>

<script id="telephony:dect:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Enable ECO Mode" }}
        <span class="translation-string">{{html localeString("Enable ECO Mode Info Popup")}}</span>
        {{/if}}
        {{if component === "Show PIN" }}
        <span class="translation-string">{{html localeString("Show PIN Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="telephony:phonebook:new-number:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "HOME" }}
            <span class="translation-string">{{html localeString("You can enter your home phone number here. The allowed characters are 0-9(digits), +(plus), #(hash), *(asterisk)")}}</span>
        {{/if}}

        {{if component === "CELL" }}
            <span class="translation-string">{{html localeString("You can enter your cell phone number here. The allowed characters are 0-9(digits), +(plus), #(hash), *(asterisk)")}}</span>
        {{/if}}

        {{if component === "WORK" }}
            <span class="translation-string">{{html localeString("You can enter your work phone number here. The allowed characters are 0-9(digits), +(plus), #(hash), *(asterisk)")}}</span><br/>
        {{/if}}
    </div>
</script>

<script id="telephony:phonebook:phonebook-info" type="text/x-jquery-tmpl">
    <div class="info-strings">
        <span class="translation-string">{{html localeString("Phonebook info")}}</span>
    </div>
</script>
<script id="telephony:phonebook:new-number:no-data" type="text/x-jquery-tmpl">
    <div class="text">
        <div class="info-strings">
            <span class="translation-string">{{html localeString("The contact you are trying to edit is no longer available.")}}</span><br/>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>
<script id="telephony:phonebook:new-number:error-saving" type="text/x-jquery-tmpl">
    <div class="text">
        <div class="info-strings">
            <span class="translation-string">{{html localeString("Apparently the contact you are trying to modify doesnt exist any more or is beeing edited by someone else. You will be redirected to phonebook list.")}}</span><br/>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<!-- Translations for expandable lists, to be refactored and deleted soon -->
<script id="telephony" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Details")}}</span>
        <span class="translation-string">{{html localeString("Hide")}}</span>
        <span class="translation-string">{{html localeString("Device Name")}}</span>
        <span class="translation-string">{{html localeString("Actions")}}</span>
        <span class="translation-string">{{html localeString("Gateway Phone Ports")}}</span>
        <span class="translation-string">{{html localeString("Phone Number")}}</span>
        <span class="translation-string">{{html localeString("Name")}}</span>
        <span class="translation-string">{{html localeString("Type")}}</span>
        <span class="translation-string">{{html localeString("Search by Name or Number")}}</span>
        <span class="translation-string">{{html localeString("Enter Number")}}</span>
    </span>

</script>

<script id="telephony:calls" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1>
            <span class="translation-string">{{html localeString("Call List")}}</span>
        </h1>
    </div>
    <ul class="page-tabs">
        <li class="tab-all first standard-mode-tab-last tab">
            <a href="#telephony/calls/all">
                <span class="translation-string">{{html localeString("All Calls")}}</span>
            </a>
        </li>
        <li class="tab-missed tab">
            <a href="#telephony/calls/missed">
                <span class="translation-string">{{html localeString("Missed Calls")}}</span>
            </a>
        </li>
        <li class="tab-incoming tab">
            <a href="#telephony/calls/incoming">
                <span class="translation-string">{{html localeString("Incoming Calls")}}</span>
            </a>
        </li>
        <li class="tab-outgoing last tab">
            <a href="#telephony/calls/outgoing">
                <span class="translation-string">{{html localeString("Outgoing Calls")}}</span>
            </a>
        </li>

        <div class="tabs-content"></div>
    </ul>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Allow inbound/Block outbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound/Allow outbound")}}</span>
        <span class="translation-string">{{html localeString("Allow inbound and outbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound and outbound")}}</span>
        <span class="translation-string">{{html localeString("Allow inbound")}}</span>
        <span class="translation-string">{{html localeString("Block inbound")}}</span>
        <span class="translation-string">{{html localeString("Allow outbound")}}</span>
        <span class="translation-string">{{html localeString("Block outbound")}}</span>
        <span class="translation-string">{{html localeString("Unknown")}}</span>
    </span>
    <!-- - - - - - - - - - - - - -->
</script>

<script id="telephony:calls:all" type="text/x-jquery-tmpl">
    <div class="calls tab-content-container">
        <div class="text">
            {{if data.filter === null}}
                <span class="translation-string">{{html localeString("All the incoming, outgoing, missed calls are listed below. You can block numbers <a href='support site in appropriate language URL' target='_blank'>here</a> in the Swisscom customer center.")}}</span>
            {{/if}}
            {{if data.filter === 'missed'}}
                <span class="translation-string">{{html localeString("All the missed calls are listed below. You can block numbers <a href='support site in appropriate language URL' target='_blank'>here</a> in the Swisscom customer center.")}}</span>
            {{/if}}
            {{if data.filter === 'incoming'}}
                <span class="translation-string">{{html localeString("All the incoming calls are listed below. You can block numbers <a href='support site in appropriate language URL' target='_blank'>here</a> in the Swisscom customer center.")}}</span>
            {{/if}}
            {{if data.filter === 'outgoing'}}
                <span class="translation-string">{{html localeString("All the outgoing calls are listed below. You can block numbers <a href='support site in appropriate language URL' target='_blank'>here</a> in the Swisscom customer center.")}}</span>
            {{/if}}
        </div>
        <div class="search-form" style="display:none;">
        <input name="search"
        placeholder='${localeStrings["Search by Name or Number"]}'
        onfocus='this.value = this.value;'
        class="search-input search-input-contact skip-validation"/>
        <div class="search-pic search-call-contact"></div>
    </div>

    <div class="expandable-calls">
        <div class="expandable-list">
            <div class="expandable-list-title">
                <div class="block icon_call"><span class="translation-string"></span></div>
                <div class="block date"><span class="translation-string">{{html localeString("Date")}}</span></div>
                <div class="block actions_call"><span class="translation-string">{{html localeString("Actions")}}</span></div>
                <div class="block duration"><span class="translation-string">{{html localeString("Duration")}}</span></div>
                <div class="block telephone"><span class="translation-string">{{html localeString("Telephone Number")}}</span></div>
                <div class="block caller"><span class="translation-string">{{html localeString("Caller")}}</span></div>
            </div>
            {{each(key, contactValue) data.calls}}
            <div class="expandable-list-item {{if contactValue.get('viewed') === false && contactValue.get('type') === 'missed'}}bold{{/if}}" data-key="${contactValue.id}">
                <div class="block icon_call" data-key="date">
                    <div class="icon {{if contactValue.get('type')}}${contactValue.get('type')}{{else}}hidden{{/if}} has-popover"
                        data-popover-template-id="telephony:calls:info"
                        data-popover-template-data='{ "component": "${contactValue.get('type')}" }'
                        data-popover-placement="top"
                        data-popover-holder=".icon"></div>
                </div>
                <div class="block date" data-key="date">
                    ${contactValue.get('startTimeFormatted')}
                </div>
                <div class="block actions_call" data-key="actions">
                    {{if !contactValue.get('inContactList')}}
                    <div class="icons add-call do-add-contactcall has-popover"
                    data-popover-template-id="telephony:calls:info"
                    data-popover-template-data='{ "component": "Add to phonebook" }'
                    data-popover-placement="top"
                    data-popover-holder=".do-add-contactcall"></div>
                    {{/if}}
                    <div class="icons trash do-delete has-popover"
                    data-popover-template-id="telephony:calls:info"
                    data-popover-template-data='{ "component": "Delete" }'
                    data-popover-placement="top"
                    data-popover-holder=".do-delete"></div>
                </div>
                <div class="block duration" data-key="duration"><span class="translation-string">${contactValue.get('duration')}</span></div>
                <div class="block telephone" data-key="telephone"><span class="translation-string">${contactValue.get('number')}</span></div>
                <div class="block caller has-popover" data-key="caller">
                    <div class="has-popover caller-name"
                        data-popover-template-id="telephony:calls:info"
                        data-popover-template-data='{ "component": "${contactValue.get('name')}" }'
                        data-popover-placement="top"
                        data-popover-holder=".caller">
                    {{if contactValue.get('name') === 'Unknown'}}
                    {{html localeString("Unknown")}}
                    {{else}}
                    ${contactValue.get('name')}
                    {{/if}}
                    </div>
                </div>
            </div>
            {{/each}}
            <div class="text no-calls {{if data.calls.length}}hidden{{/if}}" style="margin-top: 10px;">
                <span class="translation-string">{{html localeString("There are no calls yet.")}}</span>
            </div>
        </div>
    </div>

</div>

<div class="buttons-container-message tab-buttons-container">
    <div id="delete-all" class="client-buttons left">
        <a class="button big no-highlighting secondary  {{if data.calls.length === 0}}disabled{{/if}}">
            <span class="translation-string">{{html localeString("Delete All")}}</span>
        </a>
    </div>
    <div class="client-buttons">
        <a class="button big no-highlighting secondary cancel-changes disabled ">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button big no-highlighting primary save-changes disabled">
            <span class="translation-string">{{html localeString("Apply")}}</span>
        </a>
    </div>
    <div class="save-success">
        <div class="icon"></div>
        <div class="text">
            <span class="translation-string">{{html localeString("Data saved successfully")}}</span>
        </div>
    </div>
    <div class="save-error">
        <div class="icon"></div>
        <div class="text">
            <span class="translation-string">{{html localeString("Data saving failed")}}</span>
        </div>
    </div>
    <div class="save-validation-errors">
        <div class="icon"></div>
        <div class="text">
            <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
        </div>
    </div>
</div>
</script>


<script id="telephony:device" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("View Wired and DECT Devices in Your Network")}}</span>
            </h1>
        </div>
    </div>
    <div class="base-content tabs-content">
        <div class="dect-and-phones tab-content-container">
            <div class="dect-main-content">
                <div class="text title title-phone-ports">
                    <span class="translation-string">{{html localeString("Wired Phones")}}</span>
                </div>

                <div class="text">
                    <span class="translation-string">{{html localeString("You can connect up to two wired phones to your gateway")}}</span>
                </div>

                <div class="expandable-wired-phones">

                    <div class="expandable-list wired">
                        <div class="expandable-list-title">
                            <div class="block device-name wired" data-key="device-name"><span class="translation-string">{{html localeString("Gateway Phone Ports")}}</span>
                            </div>
                            <div class="block phone-number" data-key="phone-number"><span class="translation-string">{{html localeString("Phone Number")}}</span>
                            </div>
                            <div class="block actions" data-key="actions"><span class="translation-string">{{html localeString("Actions")}}</span>
                            </div>
                        </div>
                        {{each(key, value) data.wiredPhones}}
                        <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                            <div class="blocks">
                                <div class="block visible-part" data-key="visible-part">
                                    <div class="device-name wired">
                                        <div class="device small {{if value.isDisabled || !data.voipStatus }}disconnected{{/if}} static-phone-${key}">
                                            <div class="icon"></div>
                                        </div>
                                        <div class="state-default">
                                            <div class="text {{if value.isDisabled || !data.voipStatus }}disabled{{/if}}"><span
                                                class="translation-string">{{html localeString("Phone Port")}}</span> ${value.key}
                                            </div>
                                        </div>
                                        <div class="state-edit">
                                            <div class="text {{if value.isDisabled || !data.voipStatus }}disabled{{/if}}"><span
                                                class="translation-string">{{html localeString("Phone Port")}}</span> ${value.key}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="phone-numbers fxs {{if !value.externalNumber && !data.manyVoips}}only-one{{/if}}">
                                        {{if value.isDisabled || !data.voipStatus }}
                                        <div class="not-registered-label">
                                            <span class="translation-string">{{html localeString("Not registered")}}</span>
                                        </div>
                                        {{else}}
                                        {{if value.externalNumber}}
                                        <div class="outgoing-number">
                                            {{if data.manyVoips}}
                                            <div class="left-part outgoing-number-label">
                                                <div class="state-default">
                                                    <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                                </div>
                                                <div class="state-edit">
                                                    <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                                </div>
                                            </div>
                                            {{else}}
                                            <div class="left-part outgoing-number-label single-value">
                                                <div class="state-default">
                                                    <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                                </div>
                                            </div>
                                            {{/if}}
                                            <div class="right-part outgoing-number-value">
                                                <div class="state-default default-external">
                                                    ${value.externalNumber}
                                                </div>
                                                <div class="state-edit">
                                                    {{if data.manyVoips}}
                                                    <div class="swc-dropdown external-number" data-default-value="${value.externalNumber}"
                                                    data-name="external-number-${id}" data-class="external-number-${id}">
                                                    <div class="selected-option">${value.externalNumber}</div>
                                                </div>
                                                {{else}}
                                                ${value.externalNumber}
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{/if}}

                                    {{if data.manyVoips}}
                                    <div class="incoming-number">
                                        <div class="left-part incoming-number-label">
                                            <div class="state-default">
                                                <span class="translation-string">{{html localeString("Incoming")}}</span>
                                            </div>
                                            <div class="state-edit">
                                                <span class="translation-string">{{html localeString("Incoming")}}</span>
                                            </div>
                                        </div>
                                        <div class="right-part incoming-number-value">
                                            {{each(incomingKey, incomingValue) value.incomingLines}}
                                            <div class="state-default ${incomingValue.line}">
                                                <div class="text">${incomingValue.number}</div>
                                            </div>
                                            <div class="state-edit">
                                                <div class="swc-checkbox incoming-line ${incomingValue.line} {{if incomingValue.value}}checked{{/if}}"
                                                data-line="${incomingValue.line}" data-default-value="${incomingValue.value}"
                                                data-value="${incomingValue.value}">
                                                <div class="icon"></div>
                                                <div class="text">${incomingValue.number}</div>
                                            </div>
                                        </div>
                                        {{/each}}
                                    </div>
                                </div>
                                {{/if}}
                                <div class="left-part">
                                    <span class="translation-string">{{html localeString("Internal")}}</span>
                                </div>
                                <div class="right-part">
                                    ${value.internalNumber}
                                </div>
                                {{/if}}
                            </div>
                        </div>
                        {{if !value.isDisabled && data.voipStatus}}
                        <div class="block block-edit">
                            <div class="icons pencil default do-edit"></div>

                            <div class="icons pencil disabled active-edit do-edit"></div>
                        </div>
                        {{/if}}
                        <div class="block state-edit">
                            <div class="buttons-container" style="margin-top:5px;">
                                <a class="button secondary little no-highlighting ring-phone">
                                    <span class="translation-string">{{html localeString("Ring")}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>
        </div>

        <div class="text title title-devices">
            <span class="translation-string">{{html localeString("DECT Devices")}}</span>
        </div>

        <div class="expandable-dect-phones">
            <div class="expandable-list dect">
                <div class="expandable-list-title">
                    <div class="block device-name" data-key="device-name"><span class="translation-string">{{html localeString("Device Name")}}</span></div>
                    <div class="block device-type" data-key="device-type"><span class="translation-string hide-NP5">{{html localeString("Device type")}}</span></div>
                    <div class="block phone-number" data-key="phone-number"><span class="translation-string">{{html localeString("Phone Number")}}</span></div>
                    <div class="block actions" data-key="actions"><span class="translation-string">{{html localeString("Actions")}}</span></div>
                </div>
                {{if data.dectStatus}}
                {{each(key, value) data.dectPhones}}
                <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                    <div class="blocks">
                        <div class="block visible-part" data-key="visible-part">
                            <div class="device-name">
                                <div class="device small dect">
                                    <div class="icon"></div>
                                </div>
                                <div class="state-default">
                                    <div class="text">${value.name}</div>
                                </div>
                                <div class="state-edit">
                                    <input name="dect-name"
                                    class="dect-name swc-input validatable"
                                    data-default-value="${value.name}"
                                    value="${value.name}"/>
                                </div>
                            </div>
                            <div style="display:inline-block;">
                                <div class="device-type">
                                    <div class="text hide-NP5">
                                        {{if value.handsetModel && value.handsetModel !== ''}} ${value.handsetModel} {{else}} {{html localeString('Not available')}} {{/if}}
                                    </div>
                                </div>
                            </div>

                            <div class="phone-numbers">
                                {{if value.externalNumber}}
                                <div class="outgoing-number">
                                    {{if data.manyVoips}}
                                    <div class="left-part outgoing-number-label">
                                        <div class="state-default">
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                        <div class="state-edit">
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                    </div>
                                    {{else}}
                                    <div class="left-part outgoing-number-label single-value">
                                        <div class="state-default">
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                    </div>
                                    {{/if}}
                                    <div class="right-part outgoing-number-value">
                                        <div class="state-default default-external">
                                            ${value.externalNumber}
                                        </div>
                                        <div class="state-edit">
                                            {{if data.manyVoips}}
                                            <div class="swc-dropdown external-number validatable" data-default-value="${value.externalNumber}"
                                            data-name="external-number-${id}" data-class="external-number-${id}">
                                            <div class="selected-option">${value.externalNumber}</div>
                                        </div>
                                        {{else}}
                                        ${value.externalNumber}
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                            {{/if}}

                            {{if data.manyVoips}}
                            <div class="incoming-number">
                                <div class="left-part incoming-number-label">
                                    <div class="state-default">
                                        <span class="translation-string">{{html localeString("Incoming")}}</span>
                                    </div>
                                    <div class="state-edit">
                                        <span class="translation-string">{{html localeString("Incoming")}}</span>
                                    </div>
                                </div>
                                <div class="right-part incoming-number-value">
                                    {{each(incomingKey, incomingValue) value.incomingLines}}
                                    <div class="state-default ${incomingValue.line}">
                                        <div class="text">${incomingValue.number}</div>
                                    </div>
                                    <div class="state-edit">
                                        <div class="swc-checkbox incoming-line ${incomingValue.line} {{if incomingValue.value}}checked{{/if}}"
                                        data-line="${incomingValue.line}" data-default-value="${incomingValue.value}"
                                        data-value="${incomingValue.value}">
                                        <div class="icon"></div>
                                        <div class="text">${incomingValue.number}</div>
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                        {{/if}}

                        <div class="internal-number {{if !value.externalNumber && !data.manyVoips}}only-one{{/if}}">
                            <div class="left-part">
                                <span class="translation-string">{{html localeString("Internal")}}</span>
                            </div>
                            <div class="right-part">
                                <div class="state-default default-internal">
                                    ${value.internalNumber}
                                </div>
                                <div class="state-edit">
                                    <div class="swc-dropdown internal-number validatable" data-name="internal-number" data-default-value="${value.internalNumber}" data-class="internal-number-${id}">
                                        <div class="selected-option">${value.internalNumber}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="block block-edit">
                    <div class="icons pencil default do-edit"></div>
                    <div class="icons pencil disabled active-edit do-edit"></div>
                </div>
                <div class="block state-edit">
                    <div class="buttons-container" style="margin-top:5px;">
                        <a class="button secondary little no-highlighting unpair-phone">
                            <span class="translation-string">{{html localeString("Unpair")}}</span>
                        </a>
                        <a class="button secondary little no-highlighting ring-phone">
                            <span class="translation-string">{{html localeString("Ring")}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="dect-name">
                <div class="icon"></div>
                <div class="text error-message" data-error="must not be empty">
                    <span class="phone-error translation-string">{{html localeString("Please enter DECT Phone Name. This field should not be empty.")}}</span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="internal-number">
                <div class="icon"></div>
                <div class="text error-message" data-error="number already is used">
                    <span class="phone-error translation-string">{{html localeString("This DECT number already is used.")}}</span>
                </div>
            </div>
        </div>
        {{/each}}
        {{/if}}
    </div>
</div>
{{if !data.dectStatus}}
<div class="no-dect">
    <div class="text">
        <span class="translation-string">
            {{html localeString("To see connected DECT devices you should Turn On DECT.")}}
        </span>
    </div>
</div>
{{else data.dectPhones.length < 1}}
<div class="no-dect">
    <div class="text">
        <span class="translation-string">
            {{html localeString("No DECT devices connected to the wired network yet.")}}
        </span>
    </div>
</div>
{{/if}}
{{if data.voipStatus && data.sipExtensions !== 'Disabled'}}
<div class="hide-NP5">
<div class="text title title-sip-phones">
    <span class="translation-string">{{html localeString("Mobile Phones with Internet-Box App")}}</span>
</div>
<div class="expandable-sip-phones">

    <div class="expandable-list sip">
        <div class="expandable-list-title">
            <div class="block device-name wired" data-key="device-name"><span class="translation-string">{{html localeString("Device name")}}</span>
            </div>
            <div class="block phone-number" data-key="phone-number"><span class="translation-string">{{html localeString("Phone Number")}}</span>
            </div>
            <div class="block actions" data-key="actions"><span class="translation-string">{{html localeString("Actions")}}</span>
            </div>
        </div>
                {{each(key, value) data.sipPhones}}
                <div class="expandable-list-item ${value.id}" data-key="${value.id}">
                    <div class="blocks">
                        <div class="block visible-part" data-key="visible-part">
                            <div class="device-name sip">
                                <div class="device small smartphone">
                                    <div class="icon"></div>
                                </div>
                                <div class="state-default">
                                    <div class="text">${value.name}</div>
                                </div>
                                <div class="state-edit">
                                    <input name="sip-name"
                                    class="sip-name swc-input validatable"
                                    data-default-value="${value.name}"
                                    value="${value.name}"/>
                                </div>
                            </div>
                            <div class="phone-numbers">
                                {{if value.externalNumber}}
                                <div class="outgoing-number">
                                    {{if data.manyVoips}}
                                    <div class="left-part outgoing-number-label">
                                        <div class="state-default" {{if value.sameNumbers}}style="display:none;"{{/if}}>
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                        <div class="state-edit">
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                    </div>
                                    {{else}}
                                    <div class="left-part outgoing-number-label single-value">
                                        <div class="state-default">
                                            <span class="translation-string">{{html localeString("Outgoing")}}</span>
                                        </div>
                                    </div>
                                    {{/if}}
                                    <div class="right-part outgoing-number-value">
                                        <div class="state-default default-external">
                                            ${value.externalNumber}
                                        </div>
                                        <div class="state-edit">
                                            {{if data.manyVoips}}
                                            <div class="swc-dropdown external-number validatable" data-default-value="${value.externalNumber}"
                                            data-name="external-number-${id}" data-class="external-number-${id}">
                                            <div class="selected-option">${value.externalNumber}</div>
                                        </div>
                                        {{else}}
                                        ${value.externalNumber}
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                            {{/if}}

                            {{if data.manyVoips}}
                            <div class="incoming-number" >
                                <div class="left-part incoming-number-label">
                                        <div class="state-default">
                                            <span class="translation-string">{{html localeString("Incoming")}}</span>
                                        </div>
                                    <div class="state-edit">
                                        <span class="translation-string">{{html localeString("Incoming")}}</span>
                                    </div>
                                </div>
                                <div class="right-part incoming-number-value">
                                    {{each(incomingKey, incomingValue) value.incomingLines}}
                                    <div class="state-default ${incomingValue.line}">
                                            <div class="text">${incomingValue.number}</div>
                                    </div>
                                    <div class="state-edit">
                                        <div class="swc-checkbox incoming-line ${incomingValue.line} {{if incomingValue.value}}checked{{/if}}"
                                        data-line="${incomingValue.line}" data-default-value="${incomingValue.value}"
                                        data-value="${incomingValue.value}">
                                        <div class="icon"></div>
                                        <div class="text">${incomingValue.number}</div>
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                        {{/if}}

                        <div class="internal-number {{if !value.externalNumber && !data.manyVoips}}only-one{{/if}}">
                            <div class="left-part">
                                <span class="translation-string">{{html localeString("Internal")}}</span>
                            </div>
                            <div class="right-part">
                                <div class="state-default default-internal">
                                    ${value.internalNumber}
                                </div>
                                <div class="state-edit">
                                    <div class="swc-dropdown internal-number validatable" data-name="internal-number" data-default-value="${value.internalNumber}" data-class="internal-number-${id}">
                                        <div class="selected-option">${value.internalNumber}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="block block-edit">
                    <div class="icons pencil default do-edit"></div>
                    <div class="icons pencil disabled active-edit do-edit"></div>
                </div>
                <div class="block state-edit">
                    <div class="buttons-container" style="margin-top:5px;">
                        <a class="button secondary little no-highlighting unpair-sip">
                            <span class="translation-string">{{html localeString("Unpair")}}</span>
                        </a>
                        <a class="button secondary little no-highlighting ring-sip">
                            <span class="translation-string">{{html localeString("Ring")}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="sip-name">
                <div class="icon"></div>
                <div class="text error-message" data-error="must not be empty">
                    <span class="phone-error translation-string">{{html localeString("Please enter Internet-Box App device number. This field should not be empty.")}}</span>
                </div>
            </div>
            <div class="validation-message" data-parameter-name="internal-number">
                <div class="icon"></div>
                <div class="text error-message" data-error="number already is used">
                    <span class="phone-error translation-string">{{html localeString("The Internet-Box App device number is already in use.")}}</span>
                </div>
            </div>
        </div>
        {{/each}}
        {{if data.sipPhones.length === 0}}
        <div class="no-dect">
            <div class="text">
                <span class="translation-string">{{html localeString('No Telephony over Internet-Box app connected.')}}</span>
            </div>
        </div>
        {{/if}}


</div>
</div>
</div>
{{/if}}

<div class="validation-message incoming-number-min-device">
    <div class="icon"></div>
    <div class="text">
        <span class="error-message translation-string">
            {{html localeString("Number %number% has to be set as incoming in at least one DECT or FXS device.")}}
        </span>
    </div>
</div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons left">
            <a class="button secondary big no-highlighting pair-dect" style="float: left;">
                <span class="translation-string">{{html localeString("Pair New Device")}}</span>
            </a>
        </div>
        <div class="save-success small">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Telephony settings saved successfully")}}</span>
            </div>
        </div>
        <div class="client-buttons">
            <a class="button disabled secondary big no-highlighting cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button disabled primary big no-highlighting save-changes">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
    </div>
</div>

</div>

</div>
</script>

<script id="telephony:phonebook" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("View Your Contacts")}}</span></h1>
        </div>
    </div>
    <div class="base-content tabs-content">
        <div class="phonebook">
        </div>
    </div>
</script>

<script id="telephony:phonebook:new-number" type="text/x-jquery-tmpl">
    <div class="create-contact tab-content-container">
        <div class="text title">
            {{if data.isNew}}
            <span class="translation-string">{{html localeString("Create New Contact")}}</span>
            {{else}}
            <span class="translation-string">{{html localeString("Edit Contact")}}</span>
            {{/if}}
        </div>

        <div class="table add-contact">
            {{each(nameTypeKey, nameTypeValue) data.nameTypes}}
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString(nameTypeValue)}}</span>
                </div>
                <div class="right">
                    <input type="text"
                    name="${nameTypeKey}"
                    class="swc-input contact-${nameTypeKey} contact-name validatable characters-filter"
                    data-value="{{if (nameTypeKey === 'lastName' && data.fromCallListName != 'null' && data.fromCallListName != null)}}${data.fromCallListName}{{else}}${data.contact.get(nameTypeKey)}{{/if}}" 
                    value="{{if (nameTypeKey === 'lastName' && data.fromCallListName != 'null' && data.fromCallListName != null)}}${data.fromCallListName}{{else}}${data.contact.get(nameTypeKey)}{{/if}}"
                    data-default-value="${data.contact.get(nameTypeKey)}"
                    placeholder='{{html localeString(nameTypeValue)}}'/>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="${nameTypeKey}">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="allowed characters ASCI non-printable">
                        {{html localeString("allowed characters ASCI non-printable")}}
                    </span>
                </div>
            </div>
            {{/each}}

            <div class="validation-message save-error" data-parameter-name="names">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="at least one field should be filled">
                        {{html localeString("To save a contact you should fill at least one name.")}}
                    </span>
                    <span class="error-message translation-string" data-error="too many characters for firstname and lastname combined">
                        {{html localeString("Text is too long. Please shorten first and/or last name")}}
                    </span>
                </div>
            </div>

            <div class="validation-message save-error" data-parameter-name="chars">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="you can not use semicolon in name field">
                        {{html localeString("You can not use semicolon in name field")}}
                    </span>
                </div>
            </div>

            <div class="table-row" style="margin: 10px 0 0;">
                <div class="left" style="width: 140px; padding: 0;">
                    <span class="translation-string">{{html localeString("Phone Number")}}</span>
                </div>
                <div class="right">
                </div>
            </div>

            {{each(phoneTypeKey, phoneTypeValue) data.contact.get('phoneNumbers')}}
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString(data.phoneTypes[phoneTypeKey])}}</span>
                </div>
                <div class="right">
                    <div class="block">
                        <input type="text"
                        name="${phoneTypeKey.toLowerCase()}Number"
                        class="characters-filter swc-input contact-number contact-number-${phoneTypeKey} validatable"
                        value="{{if (phoneTypeKey === 'HOME' && data.fromCallList !==null)}}${data.fromCallList}{{else}}${phoneTypeValue}{{/if}}"
                        data-default-value="${phoneTypeValue}"
                        placeholder='${localeStrings["Enter Number"]}'/>
                    </div>
                </div>
                <div class="block block-info">
                    <div class="icons has-popover info gateway-settings-info"
                    data-popover-template-id="telephony:phonebook:new-number:info-icons"
                    data-popover-template-data='{ "component": "${phoneTypeKey}" }'
                    data-popover-placement="top"
                    data-popover-holder=".gateway-settings-info"
                    style="margin-top: 5px;"></div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="${phoneTypeKey.toLowerCase()}Number">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="phone number contain not allowed characters">
                        {{html localeString("allowed symbols for phone number")}}
                    </span>
                </div>
            </div>
            {{/each}}

            <div class="validation-message save-error" data-parameter-name="numbers">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="at least one field should be filled">
                        {{html localeString("To save a contact you should fill at least one number.")}}
                    </span>
                </div>
            </div>

            <div class="validation-message save-error" data-parameter-name="allfields">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="at least one field should be filled">
                        {{html localeString("To save a contact you should fill at least one of the names and one of the numbers.")}}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button secondary big no-highlighting cancel-changes">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button primary disabled big no-highlighting save-changes">
                <span class="translation-string">{{html localeString("Save")}}</span>
            </a>
        </div>
    </div>

    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("First Name")}}</span>
        <span class="translation-string">{{html localeString("Last Name")}}</span>
        <span class="translation-string">{{html localeString("Home")}}</span>
        <span class="translation-string">{{html localeString("Mobile")}}</span>
        <span class="translation-string">{{html localeString("Office")}}</span>
    </span>
</script>

<script id="telephony:phonebook:phonebook" type="text/x-jquery-tmpl">
    <div class="text">
        <span class="translation-string">{{html localeString("All your contacts stored in the Phonebook can be accessed on all your DECT phones.")}}</span>
        <div class="icons info has-popover phonebook-info"
        data-popover-template-id="telephony:phonebook:phonebook-info"
        data-popover-placement="bottom"
        data-popover-holder=".phonebook-info">
    </div>
</div>
<div class="search-form">
    <input name="search"
    placeholder='${localeStrings["Search by Name or Number"]}'
    onfocus='this.value = this.value;'
    class="search-input skip-validation" {{if (!data.contacts.length && !data.searchProcess) || data.isModified}}disabled="disabled"{{/if}} />
    <div class="search-pic {{if (!data.contacts.length && !data.searchProcess) || data.isModified}}disabled='disabled'{{/if}}"></div>
</div>
<div class="expandable-contacts">
    <div class="expandable-list">
        <div class="expandable-list-title">
            <div class="block name" data-key="name"><span class="translation-string">{{html localeString("Name")}}</span></div>
            <div class="block type" data-key="type"><span class="translation-string">{{html localeString("Type")}}</span></div>
            <div class="block phoneNumber" data-key="phoneNumber"><span class="translation-string">{{html localeString("Telephone number")}}</span></div>
            <div class="block actions" data-key="actions"><span class="translation-string">{{html localeString("Actions")}}</span></div>
        </div>
        {{each(key, contactValue) data.contacts}}
        <div class="expandable-list-item ${contactValue.id}" data-key="${contactValue.id}">
            <div class="blocks">
                <div class="block contact-info" data-key="contact-info">
                    <div class="state-default">
                        <div class="contact-name">
                            <div class="text-block contact-name-default-state">${contactValue.get('formattedName')}</div>
                        </div>
                    </div>

                    <div class="state-default">
                        <div class="contact-numbers">
                            {{each(phoneTypeKey, phoneTypeValue) contactValue.get('numberFields')}}
                            <div class="contact-number" {{if !phoneTypeValue}}style="display: none;"{{/if}}>
                                <div class="type">
                                    {{html localeString(data.phoneTypes[phoneTypeKey])}}
                                </div>
                                <div data-name="contact-number-${phoneTypeKey}" class="number">
                                    ${phoneTypeValue}
                                </div>
                            </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
                <div class="block block-edit">
                    <div class="icons pencil default do-edit"></div>
                    <div class="icons pencil disabled active-edit do-edit"></div>
                </div>
                <div class="block block-delete">
                    <div class="icons trash do-delete"></div>
                </div>

            </div>
        </div>
        {{/each}}
        {{if !data.contacts.length}}
        <div class="text" style="margin-top: 10px;">
            {{if data.searchProcess}}
            <span class="translation-string">{{html localeString("No contacts found which match the search criteria.")}}</span>
            {{else}}
            <span class="translation-string">{{html localeString("There are no contacts added to the phonebook yet.")}}</span>
            {{/if}}
        </div>
        {{/if}}
    </div>
</div>
    {{if window.location.hash === '#telephony/phonebook'}}
    <div class="export-container hide-starlink">
        <div class="export-contacts">
            <div class="text title">
                <span class="translation-string">{{html localeString('Contacts export from the Smartphone by press of a button')}}</span>
            </div>
            <div class="text">
                <span class="translation-string">{{html localeString('By installing the Swisscom Internet-Box App on your smartphone you can export all your smartphone contacts to the Internet-Box by click of a button. Learn more <a href="link-here">here</a>')}}</span>
            </div>
        </div>
    </div>
    {{/if}}
    <div class="buttons-container-message">
            <div class="save-success small upon-export">
        <div class="icon"></div>
        <div class="text">
            <span class="translation-string">{{html localeString("Phonebook changed successfully")}}</span>
        </div>
        </div>
    </div>
<div class="buttons-container-message tab-buttons-container">
    <div class='client-buttons left'>
        <a class="button secondary big no-highlighting new-contact" style="float:left;">
            <span class="translation-string">{{html localeString("Add New Contact")}}</span>
        </a>
        <a class="button secondary big no-highlighting clear-contacts {{if !data.contacts.length}}disabled{{/if}}" style="float:left;">
            <span class="translation-string">{{html localeString("Clear All")}}</span>
        </a>
    </div>
    <div class="client-buttons">
        <a class="button secondary big no-highlighting cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button primary big no-highlighting save-changes">
            <span class="translation-string">{{html localeString("Save")}}</span>
        </a>
    </div>
</div>

<span class="hidden-strings">
    <span class="translation-string">{{html localeString("First Name")}}</span>
    <span class="translation-string">{{html localeString("Last Name")}}</span>
    <span class="translation-string">{{html localeString("Home")}}</span>
    <span class="translation-string">{{html localeString("Mobile")}}</span>
    <span class="translation-string">{{html localeString("Office")}}</span>
</span>
</script>

<script id="telephony:dect" type="text/x-jquery-tmpl">
    <div class="title-container">
        <div class="text title">
            <h1><span class="translation-string">{{html localeString("Manage DECT Settings")}}</span></h1>
        </div>
        <div>
            <div class="swc-switcher {{if data.dectStatus}}checked{{/if}} enable-dect"
            data-value="{{if data.dectStatus}}true{{else}}false{{/if}}">
            <div class="text">
                <div class="text title">
                    <h1><span class="translation-string">{{html localeString("DECT")}}</span></h1>
                </div>
            </div>
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="base-content tabs-content">
    {{if !data.dectStatus}}
    <div class="hover-message-overlay faded">
        <div class="hover-message text">
            <span class="translation-string">{{html localeString("To start using DECT, please turn the DECT switch on.")}}</span>
        </div>
    </div>
    {{/if}}
    <div class="dect tab-content-container {{if !data.dectStatus}}disabled{{/if}}">

        <div class="text top-text">
            <span class="translation-string">{{html localeString("Your gateway includes an integrated DECT base station to easily add wireless DECT phones")}}.</span>
        </div>

        <div class="separator"></div>

        <div class="inline-blocks dect-settings">
            <div class="block">
                <div class="swc-checkbox eco-status {{if data.dectEco}}checked{{/if}}" data-value="${data.dectEco}" data-default-value="${data.dectEco}">
                    <div class="icon"></div>
                    <div class="text">
                        <span class="translation-string">{{html localeString("Enable ECO Mode")}}</span>
                    </div>
                </div>
            </div>
            <div class="block">
                <div class="icons has-popover info enable-eco-info"
                data-popover-template-id="telephony:dect:info-icons"
                data-popover-template-data='{ "component": "Enable ECO Mode" }'
                data-popover-placement="right"
                data-popover-holder=".enable-eco-info">
            </div>
        </div>

    </div>

    <div class="separator"></div>

    <div class="text">
        <span class="translation-string">{{html localeString("To register your cordless telephones define the PIN here and enter it on the telephone during registration")}}.</span>
    </div>

    <div class="inline-blocks change-pin">

        <div class="block pin-settings">
            <div class="text-block">
                <span class="translation-string">{{html localeString("PIN")}}</span>
            </div>
        </div>
        <div class="block" style="height: 30px;">
            <input type="password" maxlength="4" class="swc-input validatable pin-original characters-filter" value="${data.pin}" data-default-value="${data.pin}" name="pin">
            <input type="text" maxlength="4" class="swc-input validatable pin-copy characters-filter" value="${data.pin}" data-default-value="${data.pin}" style="display: none;" name="pin">
        </div>
        <div class="block">
            <div class="swc-checkbox show-pin-password skip-validation">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Show PIN")}}</span>
                </div>
            </div>
        </div>
        <div class="block">
            <div class="icons has-popover info show-pin-info"
            data-popover-template-id="telephony:dect:info-icons"
            data-popover-template-data='{ "component": "Show PIN" }'
            data-popover-placement="right"
            data-popover-holder=".show-pin-info">
        </div>
    </div>
</div>

<div class="validation-message" data-parameter-name="pin">
    <div class="icon"></div>
    <div class="text">
        <span class="error-message translation-string" data-error="global">
            {{html localeString("Validation message DECT PIN: Please enter PIN code. It must contain 4 digits from 0 to 9.")}}
        </span>
        <span class="error-message translation-string" data-error="must contain 4 symbols">
            {{html localeString("Validation message DECT PIN: Must contain 4 digits")}}
        </span>
        <span class="error-message translation-string" data-error="must contain 4 digits from 0 to 9">
            {{html localeString("Validation message DECT PIN: Must contain 4 digits from 0 to 9")}}
        </span>
    </div>
</div>

</div>
<div class="buttons-container-message tab-buttons-container">
    <div class="client-buttons left">
        <a class="button secondary big no-highlighting pair-dect" style="float: left;">
            <span class="translation-string">{{html localeString("Pair New Device")}}</span>
        </a>
    </div>
    <div class="save-success small">
        <div class="icon"></div>
        <div class="text">
            <span class="translation-string">{{html localeString("DECT settings saved successfully")}}</span>
        </div>
    </div>
    <div class="client-buttons">
        <a class="button disabled secondary big no-highlighting cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button disabled primary big no-highlighting save-changes">
            <span class="translation-string">{{html localeString("Apply")}}</span>
        </a>
    </div>
</div>
</div>
</script>

<script id="wifi:settings:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "wifi-mode" }}
            <span class="translation-string">{{html localeString("WiFi mode selection info popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="wifi:settings:modal-windows:set-combined-mode" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have different settings for 2.4 GHz and 5 GHz frequencies.")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("The following settings will be applied to both frequencies in Combined mode:")}}
        </span>
    </div>
    <div class="settings-list">
        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}:</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.ssid}
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}:</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.password}
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("Encryption")}}:</span>
                </div>
                <div class="right">
                    <div class="block">
                        <div class="text-block">
                            ${data.encryption}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Apply")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:modal-windows:turn-2.4GHz-off" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have deactivated 2.4 GHz WiFi Network")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("After deactivation of the 2.4 GHz WiFi Network devices operating on this frequency could not be connected wirelessly anymore.")}}
        </span>
        <span class="translation-string">
            {{html localeString("Are you sure you want to deactivate 2.4 GHz WiFi Network ?")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Deactivate 2.4 GHz")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:modal-windows:turn-5GHz-off" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have deactivated 5 GHz WiFi Network")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">
            {{html localeString("After deactivation of the 5 GHz WiFi Network devices operating on this frequency could not be connected wirelessly anymore.")}}
        </span>
        <span class="translation-string">
            {{html localeString("Are you sure you want to deactivate 5 GHz WiFi Network ?")}}
        </span>
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button no-highlighting primary apply-changes">
            <span class="translation-string">{{html localeString("Deactivate 5 GHz")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:modal-windows:on-change-chanel" type="text/x-jquery-tmpl">
    <div class="title">
        {{html localeString("You have changed WiFi Channel")}}
    </div>
    <div class="text">
        {{html localeString("There is a scanning time of 10 minutes before this channel can be activated.")}}
        {{html localeString("Wifi on 5 GHz will be off during this time.")}}
        {{html localeString("Do you still want to activate this channel?")}}
    </div>
    <div class="modal-buttons">
        <a class="button no-highlighting secondary cancel-changes">
            {{html localeString("No")}}
        </a>
        <a class="button no-highlighting primary apply-changes">
            {{html localeString("Yes")}}
        </a>
    </div>
</script>

<script id="wifi:wps:modal:pairing" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("WPS Has been started")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Please press WPS button on the device you would like to add within 2 min.")}}</span>
    </div>
    <div class="ruler-block wps-pairing">
    </div>
    <div class="buttons-container">
        <a class="button secondary big neat no-highlighting cancel-changes wps-pairing">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
    </div>
</script>

<script id="wifi:wps:modal:complete" type="text/x-jquery-tmpl">
    <div class="title">
        <div class="icons status success"></div>
        <span class="translation-string">{{html localeString("Device has been paired successfully!")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("You can find added WiFi device and see its properties in the Network Device list")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big neat no-highlighting cancel-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
        <a class="button primary big neat no-highlighting apply-changes">
            <span class="translation-string">{{html localeString("Go to Device List")}}</span>
        </a>
    </div>
</script>

<script id="wifi:wps:modal:failed" type="text/x-jquery-tmpl">
    <div class="title">
        <div class="icons status fail"></div>
        <span class="translation-string">{{html localeString("Adding of WiFi device has failed!")}}</span>
    </div>
    <div class="text">
        <span class="translation-string">{{html localeString("Check if your WiFi device is ready and try again by pressing WPS button on the device you would like to add within 2 min.")}}</span>
    </div>
    <div class="buttons-container">
        <a class="button secondary big neat no-highlighting cancel-changes">
            <span class="translation-string">{{html localeString("Close")}}</span>
        </a>
        <a class="button primary big neat no-highlighting apply-changes">
            <span class="translation-string">{{html localeString("Add WiFi device")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:type-24:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate IPv6" }}
            <span class="translation-string">{{html localeString("Activate IPv6 Info Popup")}}</span>
        {{/if}}
        {{if component === "SSID" }}
            <span class="translation-string">{{html localeString("SSID Info Popup")}}</span>
        {{/if}}

        {{if component === "Show password" }}
            <span class="translation-string">{{html localeString("Show password Info Popup")}}</span>
        {{/if}}

        {{if component === "Encryption" }}
            <span class="translation-string">{{html localeString("Encryption Info Popup")}}</span>
        {{/if}}

        {{if component === "Channel" }}
            <span class="translation-string">{{html localeString("Channel Info Popup")}}</span>
        {{/if}}

        {{if component === "Channel Bandwidth" }}
            <span class="translation-string">{{html localeString("Channel Bandwidth Info Popup")}}</span>
        {{/if}}

        {{if component === "Channel Individual" }}
            <span class="translation-string">{{html localeString("You have to switch to individual mode to manage channels")}}</span>
        {{/if}}

        {{if component === "Operating Mode" }}
            <span class="translation-string">{{html localeString("Operating Mode Info Popup")}}</span>
        {{/if}}

        {{if component === "You can add WiFi devices (WPS) to your Network" }}
            <span class="translation-string">{{html localeString("You can add WiFi devices (WPS) to your Network Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="wifi:settings:type-5:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate IPv6" }}
            <span class="translation-string">{{html localeString("Activate IPv6 Info Popup")}}</span>
        {{/if}}
        {{if component === "SSID" }}
            <span class="translation-string">{{html localeString("SSID Info Popup")}}</span>
        {{/if}}

        {{if component === "Show password" }}
            <span class="translation-string">{{html localeString("Show password Info Popup")}}</span>
        {{/if}}

        {{if component === "Encryption" }}
            <span class="translation-string">{{html localeString("Encryption Info Popup")}}</span>
        {{/if}}

        {{if component === "Channel" }}
            <span class="translation-string">{{html localeString("Channel Info Popup")}}</span>
        {{/if}}

        {{if component === "Operating Mode" }}
            <span class="translation-string">{{html localeString("Operating Mode Info Popup")}}</span>
        {{/if}}

        {{if component === "You can add WiFi devices (WPS) to your Network" }}
            <span class="translation-string">{{html localeString("You can add WiFi devices (WPS) to your Network Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="wifi:guest:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "SSID" }}
            <span class="translation-string">{{html localeString("SSID Info Popup")}}</span>
        {{/if}}

        {{if component === "Show password" }}
            <span class="translation-string">{{html localeString("Show password Info Popup")}}</span>
        {{/if}}

        {{if component === "Encryption" }}
            <span class="translation-string">{{html localeString("Encryption Info Popup")}}</span>
        {{/if}}

        {{if component === "Deactivate Guest WiFi after" }}
            <span class="translation-string">{{html localeString("Deactivate Guest WiFi after Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="wifi:scheduler:info-icons" type="text/x-jquery-tmpl">
    <div class="info-strings">
        {{if component === "Activate WiFi Scheduling" }}
            <span class="translation-string">{{html localeString("Activate WiFi Scheduling Info Popup")}}</span>
        {{/if}}
    </div>
</script>

<script id="wifi:settings:warning-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("WLAN Settings has been changed")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
            <!-- in data.messageID we have message related with changed parameter if we need custom messages -->
            {{html localeString("You have changed your WLAN settings. To make sure that all your network devices like computer, tablet or a Swisscom TV-Box still can reach the Internet, you need to change WLAN settings on all devices.")}}
        </span>
    </div>

    <div class="modal-buttons">
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="wifi:guest:warning-modal" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("Guest WLAN Settings has been changed")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
            <!-- in data.messageID we have message related with changed parameter if we need custom messages -->
            {{html localeString("You have changed your Guest WLAN settings. To make sure that all your network devices like computer, tablet or a Swisscom TV-Box still can reach the Internet, you need to change WLAN settings on all devices.")}}
        </span>
    </div>

    <div class="modal-buttons">
        <a class="button primary apply-changes">
            <span class="translation-string">{{html localeString("OK")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:wps-enable" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have enabled WPS.")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
            {{html localeString("You have enabled WPS on your %ProductName%. Therefore, you will be able to connect any new devices which support WPS with your wifi by simply pressing the «+» Button on your %ProductName%. The setting will be effective for both, your 2.4 and 5 GHz wifi. Do you want to continue?")}}
        </span>
    </div>

    <div class="buttons-container">
        <a class="button secondary big cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button primary big apply-changes">
            <span class="translation-string">{{html localeString("Continue")}}</span>
        </a>
    </div>
</script>

<script id="wifi:settings:wps-disable" type="text/x-jquery-tmpl">
    <div class="title">
        <span class="translation-string">{{html localeString("You have disabled WPS.")}}</span>
    </div>

    <div class="text">
        <span class="translation-string">
            {{html localeString("When you disable WPS, you will not be able to connect any new devices with your wifi by pressing the «+» Button on your %ProductName%. This setting will be effective for both, your 2.4 and 5 GHz wifi. Are you sure you want to disable it?")}}
        </span>
    </div>

    <div class="buttons-container">
        <a class="button secondary big cancel-changes">
            <span class="translation-string">{{html localeString("Cancel")}}</span>
        </a>
        <a class="button primary big apply-changes">
            <span class="translation-string">{{html localeString("Disable")}}</span>
        </a>
    </div>
</script>




<script id="wifi" type="text/x-jquery-tmpl">
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Starting WPS Pairing...")}}</span>
    </span>
</script>

<script id="wifi:settings" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Manage WiFi Settings")}}</span></h1>
    </div>

    <div class="title-blocks">
        <div class="swc-switcher {{if data.wifiState === 'on'}}checked{{/if}} enable-wifi-global skip-validation"
                data-value="{{if data.wifiState === 'on'}}true{{else}}false{{/if}}">
            <div class="text">
                <div class="text title">
                    <h1><span class="translation-string">{{html localeString("WiFi")}}</span></h1>
                </div>
            </div>
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{if data.wifiSchedulerState}}
            <div class="scheduler message">
                <div class="inline-blocks">
                    <div class="block">
                        <div class="icons scheduler regular"></div>
                    </div>
                    <div class="block">
                        <div class="text-block">
                            <span class="translation-string">{{html localeString("Wi-Fi Scheduler is On")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}

        <div class="wifi-mode-selection hide-starlink">
            <div class="inline-blocks">
                <div class="block">
                    <div class="text-block">
                        <span class="translation-string">{{html localeString("Manage Dualband (2.4 / 5 GHz)")}}</span>
                    </div>
                </div>
                <div class="block">
                    <div class="swc-dropdown wifi-mode skip-validation" data-name="wifi-mode-selection" data-class="wifi-mode">
                        <div class="selected-option">{{html localeString("Combined")}}</div>
                    </div>
                </div>
                <div class="block">
                    <div class="icons has-popover info wifi-mode-info"
                         data-popover-template-id="wifi:settings:info-icons"
                         data-popover-template-data='{ "component": "wifi-mode" }'
                         data-popover-placement="top"
                         data-popover-holder=".wifi-mode-info"></div>
                </div>
            </div>
        </div>
    </div>

    <ul class="page-tabs {{if data.wifiConfigurationMode}}combined{{/if}}">
        <li class="tab-type-24 tab first">
            <a href="#wifi/settings/type-24"><span class="translation-string">{{html localeString("WiFi 2.4 GHz")}}</span></a>
        </li>
        <li class="tab-type-5 hide-starlink tab last">
            <a href="#wifi/settings/type-5"><span class="translation-string">{{html localeString("WiFi 5 GHz")}}</span></a>
        </li>
        <div class="tabs-content"></div>
    </ul>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("Combined")}}</span>
        <span class="translation-string">{{html localeString("Separate")}}</span>

        <span class="translation-string">{{html localeString("On at")}}</span>
        <span class="translation-string">{{html localeString("Off at")}}</span>
        
        <span class="translation-string">{{html localeString("Delete")}}</span>
        <span class="translation-string">{{html localeString("Current time: %currentTime%")}}</span>
        <span class="translation-string">{{html localeString("Click to add time slot")}}</span>

        <span class="translation-string">{{html localeString("No encryption")}}</span>
        <span class="translation-string">{{html localeString("WPA2")}}</span>
        <span class="translation-string">{{html localeString("WPA/WPA2")}}</span>

        <span class="translation-string">{{html localeString("Auto channel")}}</span>

        <span class="translation-string">{{html localeString("802.11 n")}}</span>
        <span class="translation-string">{{html localeString("Auto (802.11 b/g/n)")}}</span>

        <span class="translation-string">{{html localeString("802.11 ac")}}</span>
        <span class="translation-string">{{html localeString("Auto (802.11 a/n/ac")}}</span>
    </span>
    <!-- - - - - - - - - - - - - -->
</script>

<script id="wifi:settings:type-24" type="text/x-jquery-tmpl">
    {{if !data.wifiConfigurationMode }}
        <div class="expert-mode-only">
            <div class="inline-blocks enable-wifi-mode">
                <div class="block">
                    <div class="swc-checkbox WiFiEnable {{if data.status}}checked{{/if}} {{if data.wifiState !== 'on'}}disabled{{/if}} validatable"
                         data-default-value="${data.status}" data-value="${data.status}" data-name="status">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Activate WiFi 2.4 GHz")}}</span></div>
                    </div>
                </div>
            </div>

            <div class="separator enable-settings"></div>
        </div>

        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">
                        <input type="text" class="swc-input validatable ssid" value="${data.ssid}" data-default-value="${data.ssid}" name="ssid">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block block-info">          
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "SSID" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="ssid">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message SSID: Global SSID requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not be empty">
                        {{html localeString("Validation message SSID: Can not be empty")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must be from 3 to 32 symbols">
                        {{html localeString("Validation message SSID: Can be from 3 to 32 symbols")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain disabled characters">
                        {{html localeString("Validation message SSID: Can not contain disabled characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                </div>
            </div>

            <div class="table-row disabled-for-superadmin">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">
                        <input type="password" class="swc-input validatable password-original" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <input type="text" class="swc-input password-copy validatable" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block">
                        <div class="swc-checkbox show-password skip-validation" data-name="showPassword" data-value="false">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show Password")}}</span></div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info show-password-icon"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "Show password" }'
                             data-popover-placement="top"
                             data-popover-holder=".show-password-icon"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="password">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Password: Global Password requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="password is weak">
                        {{html localeString("Validation message Password: Must contain specific characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password contain not allowed characters">
                        {{html localeString("Validation message Password: Contain not allowed characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WEP length error">
                        {{html localeString("Validation message Password: Password WEP length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WPA length error">
                        {{html localeString("Validation message Password: Password WPA length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same">
                        {{html localeString("Validation message Password: password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same")}}
                    </span>
                </div>
            </div>

            <div class="table-row row-encryption">
                <div class="left">
                    <span class="translation-string">{{html localeString("Encryption")}}</span>
                </div>
                <div class="right">
                    <div class="block encryption-type">
                        <div class="swc-dropdown encryption-selection validatable" data-default-value="${data.encryption}"
                             data-name="encryption" data-class="encryption-selection">
                            <div class="selected-option">&nbsp;</div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "Encryption" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="expert-mode-only">
                <div class="table-row row-visibility">
                    <div class="left">
                        <span class="translation-string">{{html localeString("SSID Visibility")}}</span>
                    </div>
                    <div class="right">
                        <div class="block visibility-type">
                            <div class="swc-radio-buttons visibility-selection validatable"
                                 data-default-value="${data.visibility}" data-name="visibility"
                                 data-value="{{if data.visibility === 'visible'}}visible{{else}}hidden{{/if}}">
                                <div class="mode {{if data.visibility === 'visible'}}active{{/if}}" data-value="visible">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Visible")}}</span></div>
                                </div>
                                <div class="mode {{if data.visibility === 'hidden'}}active{{/if}}" data-value="hidden">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Hidden")}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="expert-mode-only">
            <div class="separator enable-settings"></div>

            <div class="table">
                <div class="table-row row-channel">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Channel")}}</span>
                    </div>
                    <div class="right">
                        <div class="block channel-type">
                            <div class="swc-dropdown channel-selection validatable" data-name="channel" data-class="channel-selection">
                                <div class="selected-option">
                                    <span class="translation-string">{{html localeString("Auto")}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info channel-info"
                                 data-popover-template-id="wifi:settings:type-24:info-icons"
                                 data-popover-template-data='{ "component": "Channel" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".channel-info"></div>
                        </div>
                    </div>
                </div>
                <div class="table-row used-channel">
                    <div class="left">
                        &nbsp;
                    </div>
                    <div class="right">
                        <span class="translation-string">{{html localeString("Used Channel")}}</span> <span class="current-channel">${data.channel}</span>
                    </div>
                </div>
                <div class="table-row used-channel hide-NP5 hide-starlink">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Channel Bandwidth")}}</span>
                    </div>
                    <div class="right">
                        <div class="block channel-bandwidth-type">
                            <div class="swc-dropdown channel-bandwidth-selection validatable" data-name="channel-bandwidth" data-class="channel-bandwidth-selection">
                                <div class="selected-option">
                                    <span class="translation-string">{{html localeString("Auto")}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info channel-info"
                                 data-popover-template-id="wifi:settings:type-24:info-icons"
                                 data-popover-template-data='{ "component": "Channel Bandwidth" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".channel-info"></div>
                        </div>
                    </div>
                </div>
                <div class="table-row row-operating-mode">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Operating Mode")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                <span class="translation-string">{{html localeString("Auto(b/g/n)")}}</span>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info operating-mode-info"
                                 data-popover-template-id="wifi:settings:type-24:info-icons"
                                 data-popover-template-data='{ "component": "Operating Mode" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".operating-mode-info"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{else}}
        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">     
                        <input type="text" class="swc-input validatable ssid" value="${data.ssid}" data-default-value="${data.ssid}" name="ssid">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block block-info">          
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "SSID" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="ssid">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message SSID: Global SSID requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not be empty">
                        {{html localeString("Validation message SSID: Can not be empty")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must be from 3 to 32 symbols">
                        {{html localeString("Validation message SSID: Can be from 3 to 32 symbols")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain disabled characters">
                        {{html localeString("Validation message SSID: Can not contain disabled characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                </div>
            </div>

            <div class="table-row disabled-for-superadmin">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">
                        <input type="password" class="swc-input validatable password-original" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <input type="text" class="swc-input password-copy validatable" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block">
                        <div class="swc-checkbox show-password skip-validation" data-name="showPassword" data-value="false">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show Password")}}</span></div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info show-password-icon"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "Show password" }'
                             data-popover-placement="top"
                             data-popover-holder=".show-password-icon"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="password">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Password: Global Password requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="password is weak">
                        {{html localeString("Validation message Password: Must contain specific characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password contain not allowed characters">
                        {{html localeString("Validation message Password: Contain not allowed characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WEP length error">
                        {{html localeString("Validation message Password: Password WEP length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WPA length error">
                        {{html localeString("Validation message Password: Password WPA length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same">
                        {{html localeString("Validation message Password: password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same")}}
                    </span>
                </div>
            </div>

            <div class="table-row row-encryption">
                <div class="left">
                    <span class="translation-string">{{html localeString("Encryption")}}</span>
                </div>
                <div class="right">
                    <div class="block encryption-type">
                        <div class="swc-dropdown encryption-selection validatable" data-default-value="${data.encryption}"
                             data-name="encryption" data-class="encryption-selection">
                            <div class="selected-option">&nbsp;</div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "Encryption" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="expert-mode-only">
                <div class="table-row row-visibility combined-box">
                    <div class="left">
                        <span class="translation-string">{{html localeString("SSID Visibility")}}</span>
                    </div>
                    <div class="right">
                        <div class="block visibility-type">
                            <div class="swc-radio-buttons visibility-selection validatable"
                                 data-default-value="${data.visibility}" data-name="visibility"
                                 data-value="{{if data.visibility === 'visible'}}visible{{else}}hidden{{/if}}">
                                <div class="mode {{if data.visibility === 'visible'}}active{{/if}}" data-value="visible">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Visible")}}</span></div>
                                </div>
                                <div class="mode {{if data.visibility === 'hidden'}}active{{/if}}" data-value="hidden">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Hidden")}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="expert-mode-only">
                <div class="table-row row-visibility combined-box">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Channel")}}</span>
                    </div>
                    <div class="right">
                        <div class="block text" style="line-height: 30px;">
                            <span class="translation-string">{{html localeString("Switch to")}}</span><a class="swc-button-separate" data-key="separate" data-value="separate" style="margin-left:3px; margin-right:3px;">{{html localeString("separate mode")}}</a><span class="translation-string">{{html localeString("to manage channels")}}</span>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info channel-info"
                                 data-popover-template-id="wifi:settings:type-24:info-icons"
                                 data-popover-template-data='{ "component": "Channel Individual" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".channel-info"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}

    <div class="tab-content-container">
        <div class="separator wps-settings"></div>

        <div class="expert-mode-only">
        <div class="inline-blocks hide-NP5">
        <div class="block">
            <div class="swc-checkbox EnableWPS {{if data.WPSStatus}}checked{{/if}} validatable"
                 data-default-value="${data.WPSStatus}" data-value="${data.WPSStatus}" data-name="EnableWPS">
                <div class="icon"></div>
                <div class="text"><span class="translation-string">{{html localeString("Enable WPS")}}</span></div>
            </div>
        </div>
        <div class="block block-info">
            <div class="icons has-popover info toggle-wps-info"
                 data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                 data-popover-template-data='{ "component": "Activate IPv6" }'
                 data-popover-placement="top"
                 data-popover-holder=".toggle-wps-info"></div>
        </div>
    </div>

        </div>
        {{if data.WPSStatus === true || swc.Utils.NPVersion === "NP5"}}
        <div class="inline-blocks enable-wifi-mode enable-wps-mode" style="margin-bottom: 9px; {{if localStorage.userMode === 'expert'}}margin-top:-9px{{/if}}">
            <div class="block">
                <div class="text-block">
                    <div class="block">
                        <span class="translation-string">{{html localeString("You can add WiFi devices (WPS) to your Network")}}</span>
                    </div>
                    
                </div>
            </div>
            <div class="block">
                <div class="icons has-popover info wps-info"
                     data-popover-template-id="wifi:settings:type-24:info-icons"
                     data-popover-template-data='{ "component": "You can add WiFi devices (WPS) to your Network" }'
                     data-popover-placement="top"
                     data-popover-holder=".wps-info"></div>
            </div>
        </div>

        <a class="button no-highlighting secondary wps-pairing {{if data.wifiState !== 'on'}}disabled{{/if}}">
            <span class="translation-string">{{html localeString("Add Wi-Fi Device")}}</span>
        </a>
        {{/if}}
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("WiFi settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("WiFi settings saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix validation errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="wifi:settings:type-5" type="text/x-jquery-tmpl">
    {{if !data.wifiConfigurationMode }}
        <div class="expert-mode-only">
            <div class="inline-blocks enable-wifi-mode">
                <div class="block">
                    <div class="swc-checkbox WiFiEnable {{if data.status}}checked{{/if}} {{if data.wifiState !== 'on'}}disabled{{/if}} validatable"
                         data-default-value="${data.status}" data-value="${data.status}" data-name="status">
                        <div class="icon"></div>
                        <div class="text"><span class="translation-string">{{html localeString("Activate WiFi 5 GHz")}}</span></div>
                    </div>
                </div>
            </div>

            <div class="separator enable-settings"></div>
        </div>

        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">     
                        <input type="text" class="swc-input validatable ssid" value="${data.ssid}" data-default-value="${data.ssid}" name="ssid">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block block-info">          
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "SSID" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="ssid">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message SSID: Global SSID requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not be empty">
                        {{html localeString("Validation message SSID: Can not be empty")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must be from 3 to 32 symbols">
                        {{html localeString("Validation message SSID: Can be from 3 to 32 symbols")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain disabled characters">
                        {{html localeString("Validation message SSID: Can not contain disabled characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                </div>
            </div>

            <div class="table-row disabled-for-superadmin">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">
                        <input type="password" class="swc-input validatable password-original" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <input type="text" class="swc-input password-copy validatable" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block">
                        <div class="swc-checkbox show-password skip-validation" data-name="showPassword" data-value="false">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show Password")}}</span></div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info show-password-icon"
                             data-popover-template-id="wifi:settings:type-5:info-icons"
                             data-popover-template-data='{ "component": "Show password" }'
                             data-popover-placement="top"
                             data-popover-holder=".show-password-icon"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="password">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Password: Global Password requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="password is weak">
                        {{html localeString("Validation message Password: Must contain specific characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password contain not allowed characters">
                        {{html localeString("Validation message Password: Contain not allowed characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WEP length error">
                        {{html localeString("Validation message Password: Password WEP length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WPA length error">
                        {{html localeString("Validation message Password: Password WPA length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same">
                        {{html localeString("Validation message Password: password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same")}}
                    </span>
                </div>
            </div>

            <div class="table-row row-encryption">
                <div class="left">
                    <span class="translation-string">{{html localeString("Encryption")}}</span>
                </div>
                <div class="right">
                    <div class="block encryption-type">
                        <div class="swc-dropdown encryption-selection validatable" data-default-value="${data.encryption}"
                             data-name="encryption" data-class="encryption-selection">
                            <div class="selected-option">&nbsp;</div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-5:info-icons"
                             data-popover-template-data='{ "component": "Encryption" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="expert-mode-only">
                <div class="table-row row-visibility">
                    <div class="left">
                        <span class="translation-string">{{html localeString("SSID Visibility")}}</span>
                    </div>
                    <div class="right">
                        <div class="block visibility-type">
                            <div class="swc-radio-buttons visibility-selection validatable"
                                 data-default-value="${data.visibility}" data-name="visibility"
                                 data-value="{{if data.visibility === 'visible'}}visible{{else}}hidden{{/if}}">
                                <div class="mode {{if data.visibility === 'visible'}}active{{/if}}" data-value="visible">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Visible")}}</span></div>
                                </div>
                                <div class="mode {{if data.visibility === 'hidden'}}active{{/if}}" data-value="hidden">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Hidden")}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="expert-mode-only">
            <div class="separator enable-settings"></div>

            <div class="table">
                <div class="table-row row-channel">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Channel")}}</span>
                    </div>
                    <div class="right">
                        <div class="block channel-type">
                            <div class="swc-dropdown channel-selection validatable" data-name="channel" data-class="channel-selection">
                                <div class="selected-option">
                                    <span class="translation-string">{{html localeString("Auto")}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info channel-info"
                                 data-popover-template-id="wifi:settings:type-5:info-icons"
                                 data-popover-template-data='{ "component": "Channel" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".channel-info"></div>
                        </div>
                    </div>
                </div>
                <div class="table-row used-channel">
                    <div class="left">
                        &nbsp;
                    </div>
                    <div class="right">
                        <span class="translation-string">{{html localeString("Used Channel")}}</span> <span class="current-channel">${data.channel}</span>
                    </div>
                </div>
                <div class="table-row row-operating-mode">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Operating Mode")}}</span>
                    </div>
                    <div class="right">
                        <div class="block">
                            <div class="text-block">
                                <span class="translation-string">{{html localeString("Auto(a/n/ac)")}}</span>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info operating-mode-info"
                                 data-popover-template-id="wifi:settings:type-5:info-icons"
                                 data-popover-template-data='{ "component": "Operating Mode" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".operating-mode-info"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{else}}
        <div class="table">
            <div class="table-row">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Name (SSID)")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">     
                        <input type="text" class="swc-input validatable ssid" value="${data.ssid}" data-default-value="${data.ssid}" name="ssid">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block block-info">          
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-24:info-icons"
                             data-popover-template-data='{ "component": "SSID" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="ssid">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message SSID: Global SSID requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not be empty">
                        {{html localeString("Validation message SSID: Can not be empty")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must be from 3 to 32 symbols">
                        {{html localeString("Validation message SSID: Can be from 3 to 32 symbols")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain disabled characters">
                        {{html localeString("Validation message SSID: Can not contain disabled characters")}}
                    </span>
                </div>
            </div>

            <div class="table-row disabled-for-superadmin">
                <div class="left">
                    <span class="translation-string">{{html localeString("WiFi Password")}}</span>
                </div>
                <div class="right">
                    <div class="block input-container">
                        <input type="password" class="swc-input validatable password-original" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <input type="text" class="swc-input password-copy validatable" value="${data.password}"
                               data-default-value="${data.password}" name="password">
                        <span class="valid-tick"></span>
                    </div>
                    <div class="block">
                        <div class="swc-checkbox show-password skip-validation" data-name="showPassword" data-value="false">
                            <div class="icon"></div>
                            <div class="text"> <span class="translation-string">{{html localeString("Show Password")}}</span></div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info show-password-icon"
                             data-popover-template-id="wifi:settings:type-5:info-icons"
                             data-popover-template-data='{ "component": "Show password" }'
                             data-popover-placement="top"
                             data-popover-holder=".show-password-icon"></div>
                    </div>
                </div>
            </div>

            <div class="validation-message" data-parameter-name="password">
                <div class="icon"></div>
                <div class="text">
                    <span class="error-message translation-string" data-error="global">
                        {{html localeString("Validation message Password: Global Password requirements")}}
                    </span>
                    <span class="error-message translation-string" data-error="password is weak">
                        {{html localeString("Validation message Password: Must contain specific characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password contain not allowed characters">
                        {{html localeString("Validation message Password: Contain not allowed characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WEP length error">
                        {{html localeString("Validation message Password: Password WEP length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="Password WPA length error">
                        {{html localeString("Validation message Password: Password WPA length error")}}
                    </span>
                    <span class="error-message translation-string" data-error="name must not contain only spaces">
                        {{html localeString("Validation message SSID: Can not contain only space characters")}}
                    </span>
                    <span class="error-message translation-string" data-error="password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same">
                        {{html localeString("Validation message Password: password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same")}}
                    </span>
                </div>
            </div>

            <div class="table-row row-encryption">
                <div class="left">
                    <span class="translation-string">{{html localeString("Encryption")}}</span>
                </div>
                <div class="right">
                    <div class="block encryption-type">
                        <div class="swc-dropdown encryption-selection validatable" data-default-value="${data.encryption}"
                             data-name="encryption" data-class="encryption-selection">
                            <div class="selected-option">&nbsp;</div>
                        </div>
                    </div>
                    <div class="block block-info">
                        <div class="icons has-popover info channel-info"
                             data-popover-template-id="wifi:settings:type-5:info-icons"
                             data-popover-template-data='{ "component": "Encryption" }'
                             data-popover-placement="top"
                             data-popover-holder=".channel-info"></div>
                    </div>
                </div>
            </div>

            <div class="expert-mode-only">
                <div class="table-row row-visibility combined-box">
                    <div class="left">
                        <span class="translation-string">{{html localeString("SSID Visibility")}}</span>
                    </div>
                    <div class="right">
                        <div class="block visibility-type">
                            <div class="swc-radio-buttons visibility-selection validatable"
                                 data-default-value="${data.visibility}" data-name="visibility"
                                 data-value="{{if data.visibility === 'visible'}}active{{else}}hidden{{/if}}">
                                <div class="mode {{if data.visibility === 'visible'}}active{{/if}}" data-value="visible">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Visible")}}</span></div>
                                </div>
                                <div class="mode {{if data.visibility === 'hidden'}}active{{/if}}" data-value="hidden">
                                    <div class="icon"></div>
                                    <div class="text"><span class="translation-string">{{html localeString("Hidden")}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}

    <div class="tab-content-container">
   <div class="separator wps-settings"></div>

        <div class="expert-mode-only">
        <div class="inline-blocks hide-NP5">
        <div class="block">
            <div class="swc-checkbox EnableWPS {{if data.WPSStatus}}checked{{/if}} validatable"
                 data-default-value="${data.WPSStatus}" data-value="${data.WPSStatus}" data-name="EnableWPS">
                <div class="icon"></div>
                <div class="text"><span class="translation-string">{{html localeString("Enable WPS")}}</span></div>
            </div>
        </div>
        <div class="block block-info">
            <div class="icons has-popover info toggle-wps-info"
                 data-popover-template-id="network:settings:ipv6-firewall:info-icons"
                 data-popover-template-data='{ "component": "Activate IPv6" }'
                 data-popover-placement="top"
                 data-popover-holder=".toggle-wps-info"></div>
        </div>
    </div>

        </div>
        {{if data.WPSStatus === true || data.deviceType === "starlite"}}
        <div class="inline-blocks enable-wifi-mode" style="margin-bottom: 9px; {{if localStorage.userMode === 'expert'}}margin-top:-9px{{/if}}">
            <div class="block">
                <div class="text-block">
                    <div class="block">
                        <span class="translation-string">{{html localeString("You can add WiFi devices (WPS) to your Network")}}</span>
                    </div>
                    
                </div>
            </div>
            <div class="block">
                <div class="icons has-popover info wps-info"
                     data-popover-template-id="wifi:settings:type-24:info-icons"
                     data-popover-template-data='{ "component": "You can add WiFi devices (WPS) to your Network" }'
                     data-popover-placement="top"
                     data-popover-holder=".wps-info"></div>
            </div>
        </div>

        <a class="button no-highlighting secondary wps-pairing {{if data.wifiState !== 'on'}}disabled{{/if}}">
            <span class="translation-string">{{html localeString("Add Wi-Fi Device")}}</span>
        </a>
        {{/if}}
    </div>

    <div class="buttons-container-message tab-buttons-container">
        <div class="client-buttons">
            <a class="button big no-highlighting secondary cancel-changes disabled ">
                <span class="translation-string">{{html localeString("Cancel")}}</span>
            </a>
            <a class="button big no-highlighting primary save-changes disabled">
                <span class="translation-string">{{html localeString("Apply")}}</span>
            </a>
        </div>
        <div class="save-success">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("WiFi settings saved successfully")}}</span>
            </div>
        </div>
        <div class="save-error">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Page data saving failed")}}</span>
            </div>
        </div>
        <div class="save-validation-errors">
            <div class="icon"></div>
            <div class="text">
                <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
            </div>
        </div>
    </div>
</script>

<script id="wifi:guest" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1> <span class="translation-string">{{html localeString("Guest WiFi Access Settings")}}</span></h1>
    </div>

    <!-- For translation grabber -->
    <span class="hidden-strings">
        <span class="translation-string">{{html localeString("No encryption")}}</span>
        <span class="translation-string">{{html localeString("WPA2")}}</span>
        <span class="translation-string">{{html localeString("WPA/WPA2")}}</span>

        <span class="translation-string">{{html localeString("No auto disabling")}}</span>
        <span class="translation-string">{{html localeString("6 hours")}}</span>
        <span class="translation-string">{{html localeString("12 hours")}}</span>
        <span class="translation-string">{{html localeString("24 hours")}}</span>
    </span>
    <!-- - - - - - - - - - - - - -->
    
    <div class="hidden statusLoadingMessage">
        <div class="text">
            <div class="progress-image-section">
                <div class="icon">
                    <img src="/static/images/loader.gif">
                </div>
            </div>
            <div class="text-section">
                <span>{{html localeString("Please wait, Guest WLAN is updating...")}}</span>
            </div>
        </div>
    </div>

    <div class="title-blocks">
        <div class="swc-switcher {{if data.state}}checked{{/if}} set-wifi-status"
             data-value="{{if data.state}}true{{else}}false{{/if}}">
            <div class="text">
                <div class="text title">
                    <h1><span class="translation-string">{{html localeString("Guest WiFi")}}</span></h1>
                </div>
            </div>
            <div class="switcher-container">
                <div class="btn"></div>
                <div class="icon">
                    <div class="container">
                        <div class="bg">
                            <span><span class="translation-string">{{html localeString("On")}}</span></span>
                            <span><span class="translation-string">{{html localeString("Off")}}</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="base-content tabs-content">
        <div class="tab-content-container">
            <div class="table">
                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Guest WiFi Name (SSID)")}}</span>
                    </div>
                    <div class="right">
                        <div class="block input-container">
                            <input type="text" class="swc-input validatable ssid" value="${data.ssid}" data-default-value="${data.ssid}" name="ssid">
                            <span class="valid-tick"></span>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info ssid-info"
                                 data-popover-template-id="wifi:guest:info-icons"
                                 data-popover-template-data='{ "component": "SSID" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".ssid-info"></div>
                        </div>
                    </div>
                </div>

                <div class="validation-message" data-parameter-name="ssid">
                    <div class="icon"></div>
                    <div class="text">
                        <span class="error-message translation-string" data-error="global">
                            {{html localeString("Validation message SSID: Global SSID requirements")}}
                        </span>
                        <span class="error-message translation-string" data-error="name must not be empty">
                            {{html localeString("Validation message SSID: Can not be empty")}}
                        </span>
                        <span class="error-message translation-string" data-error="name must not contain disabled characters">
                            {{html localeString("Validation message SSID: Can not contain disabled characters")}}
                        </span>
                        <span class="error-message translation-string" data-error="name must be from 3 to 32 symbols">
                            {{html localeString("Validation message SSID: Name must be 3 to 32 symbols")}}
                        </span>
                        <span class="error-message translation-string" data-error="name must not contain only spaces">
                            {{html localeString("Validation message SSID: Can not contain only space characters")}}
                        </span>
                    </div>
                </div>

                <div class="table-row disabled-for-superadmin">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Guest WiFi Password")}}</span>
                    </div>
                    <div class="right">
                        <div class="block input-container">
                            <input type="password" class="swc-input validatable password-original"
                                   value="${data.password}" data-default-value="${data.password}" name="password">
                            <input type="text" class="swc-input password-copy validatable"
                                   value="${data.password}" data-default-value="${data.password}" name="password">
                           <span class="valid-tick"></span>
                        </div>
                        <div class="block">
                            <div class="swc-checkbox checked show-password skip-validation" data-name="showPassword" data-value="true">
                                <div class="icon"></div>
                                <div class="text"> <span class="translation-string">{{html localeString("Show Password")}}</span></div>
                            </div>
                        </div>
                        <div class="block block-info">
                            <div class="icons has-popover info password-info"
                                 data-popover-template-id="wifi:guest:info-icons"
                                 data-popover-template-data='{ "component": "Show password" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".password-info"></div>
                        </div>
                    </div>
                </div>

                <div class="validation-message" data-parameter-name="password">
                    <div class="icon"></div>
                        <div class="text">
                        <span class="error-message translation-string" data-error="global">
                            {{html localeString("Validation message Password: Global Password requirements")}}
                        </span>
                        <span class="error-message translation-string" data-error="password is weak">
                            {{html localeString("Validation message Password: Must contain specific characters")}}
                        </span>
                        <span class="error-message translation-string" data-error="password contain not allowed characters">
                            {{html localeString("Validation message Password: Contain not allowed characters")}}
                        </span>
                        <span class="error-message translation-string" data-error="Password WEP length error">
                            {{html localeString("Validation message Password: Password WEP length error")}}
                        </span>
                        <span class="error-message translation-string" data-error="Password WPA length error">
                            {{html localeString("Validation message Password: Password WPA length error")}}
                        </span>
                        <span class="error-message translation-string" data-error="name must not contain only spaces">
                            {{html localeString("Validation message SSID: Can not contain only space characters")}}
                        </span>
                        <span class="error-message translation-string" data-error="password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same">
                            {{html localeString("Validation message Password: password for WLAN 2.4GHz and WLAN 5GHz must be the same if ssids are the same")}}
                        </span>
                    </div>
                </div>

                <div class="table-row row-encryption">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Encryption")}}</span>
                    </div>
                    <div class="right">
                        <div class="block encryption-type">
                            <div class="swc-dropdown encryption-selection validatable" data-default-value="" data-name="encryption" data-class="encryption-selection">
                                <div class="selected-option">&nbsp;</div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="icons has-popover info encryption-info"
                                 data-popover-template-id="wifi:guest:info-icons"
                                 data-popover-template-data='{ "component": "Encryption" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".encryption-info"></div>
                        </div>
                    </div>
                </div>

                <div class="table-row">
                    <div class="left">
                        <span class="translation-string">{{html localeString("Deactivate Guest WiFi after")}}</span>
                    </div>
                    <div class="right">
                        <div class="block encryption-type">
                            <div class="swc-dropdown deactivation-selection validatable" data-default-value="" data-name="deactivation" data-class="deactivation-selection">
                                <div class="selected-option">&nbsp;</div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="icons has-popover info encryption-info"
                                 data-popover-template-id="wifi:guest:info-icons"
                                 data-popover-template-data='{ "component": "Deactivate Guest WiFi after" }'
                                 data-popover-placement="top"
                                 data-popover-holder=".encryption-info"></div>
                        </div>
                    </div>
                </div>

                {{if data.state}}
                    {{if data.deactivationTimeout !== 0}}
                        <div class="table-row row-deactivation-time">
                            <div class="left">
                                &nbsp;
                            </div>
                            <div class="right">
                                <div class="block">
                                    <div class="text-block">
                                        <span class="translation-string">{{html localeString("Will be switched off at")}}</span> ${data.deactivationTime}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                {{/if}}
            </div>
        </div>

        <div class="buttons-container-message tab-buttons-container">
            <div class="client-buttons">
                <a class="button big no-highlighting secondary cancel-changes disabled ">
                    <span class="translation-string">{{html localeString("Cancel")}}</span>
                </a>
                <a class="button big no-highlighting primary save-changes disabled">
                    <span class="translation-string">{{html localeString("Apply")}}</span>
                </a>
            </div>
            <div class="save-success">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Guest WiFi settings saved successfully")}}</span>
                </div>
            </div>
            <div class="save-error">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Page data saving failed")}}</span>
                </div>
            </div>
            <div class="save-validation-errors">
                <div class="icon"></div>
                <div class="text">
                    <span class="translation-string">{{html localeString("Fix errors on the page")}}</span>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="wifi:scheduler" type="text/x-jquery-tmpl">
    <div class="text title">
        <h1><span class="translation-string">{{html localeString("Manage WiFi Schedule")}}</span></h1>
    </div>
    <div class="base-content tabs-content">
        <div class="scheduler-panel">
            <div class="text">
                <span class="translation-string">{{html localeString("You can set up and manage WiFi connection schedule for your network. WiFi will be turned off and on automatically according to the schedule below.")}}</span>
            </div>
            <div class="scheduler-content">
                <div class="inline-blocks shed_active">
                    <div class="block">
                        <div data-value="${data.schedulerState}" data-default-value="${data.schedulerState}" class="swc-checkbox enable-scheduler {{if data.schedulerState}}checked{{/if}}">
                            <div class="icon"></div>
                            <div class="text"><span class="translation-string">{{html localeString("Activate WiFi Scheduling")}}</span></div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="icons has-popover info wifi-scheduler-info"
                             data-popover-template-id="wifi:scheduler:info-icons"
                             data-popover-template-data='{ "component": "Activate WiFi Scheduling" }'
                             data-popover-placement="top"
                             data-popover-layer="1"
                             data-popover-holder=".wifi-scheduler-info"></div>
                    </div>
                </div>

                <div class="scheduler-container">
                </div>

                <div class="buttons-container-message tab-buttons-container">
                    <div class="client-buttons">
                        <a class="button big no-highlighting secondary cancel-changes disabled ">
                            <span class="translation-string">{{html localeString("Cancel")}}</span>
                        </a>
                        <a class="button big no-highlighting primary save-changes disabled">
                            <span class="translation-string">{{html localeString("Apply")}}</span>
                        </a>
                    </div>
                    <div class="save-success">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("WiFi schedule saved successfully")}}</span>
                        </div>
                    </div>
                    <div class="save-error">
                        <div class="icon"></div>
                        <div class="text">
                            <span class="translation-string">{{html localeString("WiFi schedule saving failed")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

