{% assign locale = site.data.i18n.helpdesk[page.language] %}

<div class="page" id="helpdesk-page">

    <div id="helpdesk-banner">
        <div id="helpdesk-logo-container">
            <img id="helpdesk-logo" src="/assets/helpdesk-on-black.png">
        </div>
        <div id="banner-text">
            <h1>
                {{ locale.helpdesk_BannerHeading1 }} <span class="emphasis-text-color">{{ locale.helpdesk_BannerHeading2 }}</span>!
            </h1>
            <h3>
                <span class="emphasis-text-bold">HELPDESK</span> {{ locale.helpdesk_BannerSubHeading }}
            </h3>
        </div>

    </div>

    <div id="helpdesk-description">
        <h1>{{ locale.helpdesk_WhatIsHeading }}</h1>
        <p>
            {{ locale.helpdesk_WhatIsDesc }}
        </p>
    </div>

    <div id="helpdesk-services">
        <h1>{{ locale.ServicesHeading }}</h1>
        <ul>
            <li>{{ locale.helpdesk_ServicesDesc1 }}</li>
            <li>{{ locale.helpdesk_ServicesDesc2 }}</li>
            <li>{{ locale.helpdesk_ServicesDesc3 }}</li>
            <li>{{ locale.helpdesk_ServicesDesc4 }}</li>
            <li>{{ locale.helpdesk_ServicesDesc5 }}</li>
        </ul>
    </div>

    <div id="pricing">
        <h1>{{ locale.helpdesk_TableHeading }}</h1>
        <table>
            <thead>
            <tr>
                <td>{{ locale.helpdesk_TableColHeading1 }}</td>
                <td>{{ locale.helpdesk_TableColHeading2 }}</td>
                <td>{{ locale.helpdesk_TableColHeading3 }}</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{ locale.helpdesk_TableR1C1 }}</td>
                <td>{{ locale.helpdesk_TableR1C2 }}</td>
                <td>{{ locale.helpdesk_TableR1C3 }}</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR2C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>20 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR3C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>10-15 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR4C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>10-20 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR5C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>15 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR6C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>20 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR7C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>10-15 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR8C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>10-50 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR9C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>10-30 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR10C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>15 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR11C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>15 €</td>
            </tr>
            <tr>
                <td>{{ locale.helpdesk_TableR12C1 }}</td>
                <td>{{ locale.helpdesk_TableQuantity }}</td>
                <td>15-30 €</td>
            </tr>
            </tbody>
        </table>
        <p>{{ locale.helpdesk_TableFooter1 }}</p>
        <p>{{ locale.helpdesk_TableFooter2 }}</p>
        <p>{{ locale.helpdesk_TableFooter3 }}</p>
    </div>

    <div id="location">
        <div>
            <h1>{{ locale.helpdesk_LocationHeading }}</h1>
            <h4>{{ locale.helpdesk_Location1 }}</h4>
            <h4>{{ locale.helpdesk_Location2 }}</h4>
        </div>
        <div id="maparea">
            <div id="map"></div>
            <div class="siema">
                <div class="carousel-image-container">
                    <img src="/assets/carousel-images/1.jpg">
                </div>
                <div class="carousel-image-container">
                    <img src="/assets/carousel-images/2.jpg">
                </div>
                <div class="carousel-image-container">
                    <img src="/assets/carousel-images/3.jpg">
                </div>
                <div class="carousel-image-container">
                    <img src="/assets/carousel-images/4.jpg">
                </div>
                <div class="carousel-image-container">
                    <img src="/assets/carousel-images/5.jpg">
                </div>
            </div>
        </div>
    </div>

    <div id="contact">

        <div id="opening-times">
            <h2>{{ locale.helpdesk_OpenHeading }}</h2>
            <h3>{{ locale.helpdesk_OpenTime }}</h3>
            <h5 class="subtext">{{ locale.helpdesk_OpenDetails }}</h5>
        </div>

        <div id="contact-methods">
            <h1>{{ locale.helpdesk_ContactHeading }}</h1>
            <div>
                <h4>{{ locale.helpdesk_ContactMail }} </h4>
                <a href="mailto:helpdesk@lapikud.ee"><h4>helpdesk@lapikud.ee</h4></a>
                <h4>{{ locale.helpdesk_ContactPhone }}  </h4>
                <a href="tel:+37258160799"><h4>+372 581 607 99</h4></a>
            </div>
        </div>

        <div class="fb-page" data-href="https://www.facebook.com/lapikudhelpdesk" data-width="260" data-small-header="false"
             data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false">
            <blockquote cite="https://www.facebook.com/lapikudhelpdesk" class="fb-xfbml-parse-ignore"><a
                    href="https://www.facebook.com/lapikudhelpdesk">Lapikud Helpdesk</a></blockquote>
        </div>

    </div>
</div>

<!--carousel support-->
<script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js"></script>
<script>
    const mySiema = new Siema({
        selector: '.siema',
        duration: 500,
        easing: 'ease-out',
        perPage: 1,
        startIndex: 0,
        draggable: true,
        multipleDrag: true,
        threshold: 20,
        loop: true,
    });
    // listen for keydown event
    setInterval(() => mySiema.next(), 2500)
</script>


<!-- leafletjs map styles -->
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
        integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
        crossorigin=""></script>

<script>
    var map = L.map('map').setView([59.396342, 24.668718], 16);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([59.396342, 24.668718]).addTo(map)
        .openPopup();
</script>