{# Page template as defined in UDS
To use this template you need to pass the following data:

```
{
  site: {
    "lang": "en",
    "languages": [
        {"code": "el", "label": "EL", "alt": "Ελληνική γλώσσα", "href": "?lang=el"},
        {"code": "en", "label": "EN", "alt": "English language", "href": "?lang=en"},
        {"code": "tr", "label": "TR", "alt": "Türkçe", "href": "?lang=tr"}
    ],
    "footerLinks": [
        {"label": {"en":"Privacy statement", "el":"Δήλωση απορρήτου"}, "href": "#"},
        {"label": {"en":"Cookies", "el":"Cookies"}, "href": "#"},
        {"label": {"en":"Accessibility", "el":"Προσβασιμότητα"}, "href": "#"},
        {"label": {"en":"Help us improve this service", "el":"Βοηθήστε μας να βελτιώσουμε αυτή την υπηρεσία"}, "href": "#"},
    ],    
    "copyrightText" : {"en":"Republic of Cyprus, 2025", "el":"Κυπριακή Δημοκρατία, 2025"},
    "menu" : {"en":"Menu", "el":"Μενου"},
    "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"}, 
    "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
    "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
    "isTesting" : true,
    "url": "https://gov.cy",
    "manifest": "manifest.json",
    "matomo": {
      "url": "//wp.matomo.dits.dmrid.gov.cy/",
      "siteId": 1234
    },
    "cdn": {
      "dist": "https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@3.0.0/dist",
      "cssIntegrity": 'sha384-1zLHWOtnS0hOIz5mVEPZp0UH5gUE6eo0CQcCGA3sF2TyYhHyKOd3Ni8Iy/NjEASU",
      "jsIntegrity": "sha384-zOuDuogVaaTveh/Ou2iYwCk14zFiSmMk7Ax8yRnXDtOJMyKZH5+ZNibNVwZSKtw+"
    }
  },
  "pageData": {
    "title": {"en": "Page title", "el": "Τιτλός σελιδας"},
    "layout": "layouts/govcyBase.njk",
    "mainLayout": "max-width"
  }
}
```
#}
{#- Import localizer from utilities -#}
{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
<!doctype html>
<html lang="{{ site.lang }}">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Social -->
    <meta property="og:description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
    <meta property="og:title" content="{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy">
    <meta property="og:url" content="{{ site.url }}">
    <meta property="og:type" content="website">
    <meta property="og:image" content="{{ site.cdn.dist }}/img/icons-512.png">
    <meta property="og:site_name" content="gov.cy">
 
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ site.url }}">
    <meta property="twitter:title" content="{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy">
    <meta property="twitter:description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
    <meta property="twitter:image" content="{{ site.cdn.dist }}/img/icons-512.png">
 
    <!-- Theme --> 
    {% if site.manifest %}
    <link rel="manifest" href="{{ site.manifest }}">
    {% endif %}
    <meta name="theme-color" content="#31576F">
    <link rel="icon" type="image/png" sizes="48x48" href="{{ site.cdn.dist }}/img/favicon-48x48.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.cdn.dist }}/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.cdn.dist }}/img/favicon-16x16.png">
 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.cdn.dist }}/img/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ site.cdn.dist }}/img/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.cdn.dist }}/img/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.cdn.dist }}/img/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="{{ site.cdn.dist }}/img/apple-touch-icon-57x57-precomposed.png">
 
    <!-- CSS -->
    <link rel="stylesheet" href="{{ site.cdn.dist }}/css/govcy.uds.min.css"{% if site.cdn.cssIntegrity %} integrity="{{ site.cdn.cssIntegrity }}" crossorigin="anonymous"{% endif%}>
    
    <title>{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy</title>
    <meta name="description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
    {% if site.matomo and site.matomo.url and site.matomo.siteId %}
        <!-- Matomo -->
        <script>
        var _paq = window._paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            var u="{{ site.matomo.url | safe }}";
            _paq.push(['setTrackerUrl', u + '/matomo.php']);
            _paq.push(['setSiteId', '{{ site.matomo.siteId | safe }}']);
            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
            g.async = true; g.src = u + '/matomo.js'; s.parentNode.insertBefore(g, s);
        })();
        </script>
        <!-- End Matomo Code -->
    {% endif %}
  </head>
  <body>
    <!--bodyStart-->
    <section class="govcy-container-fluid" id="bodyStartContainer">
        <a href="#mainContainer" class="govcy-skip-link">{%- if site.lang=='el' -%}Μεταφορά στο κεντρικό περιεχόμενο{%- else -%}Skip to main content{%- endif -%}</a>
        {% block bodyStart %}{% endblock %}
    </section>

    <!--Header-->
    <header class="govcy-header govcy-d-print-none" id="headerContainer">
        {% block userName %}{% endblock %}
        {% block header %}
        <div class="govcy-header-main-area">
            <div class="govcy-container govcy-main-area-items">
                <div class="govcy-navigation-container">
                    <div class="govcy-service-container">
                        <a href="https://gov.cy" class="govcy-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"></a>
                        <span class="govcy-service-name">{{ govcyLocalizeContent(site.headerTitle, site.lang) }}</span>
                    </div>
                    {%- if site.languages -%}
                    <ul class="govcy-menu-items">
                        {%- for iLang in site.languages %}
                        <li class="govcy-desktop-menu-only"><span><a href="{{ iLang.href }}"
                            class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}" 
                            {% if iLang.code == site.lang %} aria-current="true"{% endif %}
                            aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></span>
                        </li>{%- endfor %}
                        <li class="govcy-mobile-menu govcy-mobile-menu-only govcy-dropdown govcy-ms-auto"><span><a href="#" class="govcy-menu-item govcy-expand-btn">{{ govcyLocalizeContent(pageData.menu, site.lang) }}</a></span></li>
                    </ul>
                    {%- endif %}
                </div>
            </div>
        </div>

        {%- if site.languages -%}
        <div class="govcy-header-menu-area">
            <nav class="govcy-mainmenu" aria-label="{{ govcyLocalizeContent(pageData.menu, site.lang) }}">
                <div class="govcy-container">
                    <ul class="govcy-menu-items govcy-header-language-area govcy-mobile-menu-only">
                        {%- for iLang in site.languages %}
                        <li><a href="{{ iLang.href }}" class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}" {% if iLang.code == site.lang %} aria-current="true"{% endif %} aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></li>
                        {%- endfor %}
                    </ul>
                </div>
            </nav>
        </div>
        {%- endif %}
        {% endblock %}
    </header>

    <!--beforeMain-->
    <section class="govcy-container" id="beforeMainContainer">
        {% block beforeMain %}{% endblock %}
        {% if site.isTesting %}
            <div class="govcy-phase-banner">
                <span class="govcy-tag">TESTING</span>
                <span class="govcy-ml-2">{{ govcyLocalizeContent({"en": "This is not a real service. It is only used for testing purposes. Any submissions made through this service will be ignored", "el": "Αυτή δεν είναι πραγματική υπηρεσία. Χρησιμοποιείται μόνο για σκοπούς δοκιμών. Οποιεσδήποτε υποβολές γίνουν μέσω της υπηρεσίας αυτής θα αγνοηθούν."}, site.lang) }}</span>
            </div>
        {% endif %}
    </section>

    <!--main-->
    <main class="govcy-container" id="mainContainer">
        <div class="govcy-row">
            <article class="govcy-col-{% if pageData.mainLayout=='max-width' %}12{% else %}8{% endif %}">
                {% block main %}{% endblock %}
            </article>
        </div>
    </main>

    <!-- Footer -->
    <footer class="govcy-footer govcy-d-print-none" id="footerContainer">
        {% block footer %}
                <div class="govcy-container">
                    <div class="govcy-d-flex govcy-justify-content-between govcy-align-items-end govcy-flex-wrap">
                        <div class="govcy-my-4">
                            {%- if site.footerLinks %}
                            <ul>
                                {%- for iLink in site.footerLinks %}
                                <li><a href="{{ iLink.href }}">{{ govcyLocalizeContent(iLink.label, site.lang) }}</a></li>
                                {%- endfor %}
                            </ul>
                            {%- endif %}
                            <div class="govcy-d-flex govcy-align-items-center govcy-flex-wrap">
                                <span class="govcy-fs-2 govcy-fw-bold govcy-mr-6">gov.cy</span>
                                <span class="govcy-mr-6 govcy-mt-2 govcy-mb-2">&copy; {{ govcyLocalizeContent(site.copyrightText, site.lang) }}</span>
                            </div>
                        </div>
                        <div class="govcy-my-4">
                            <a href="https://gov.cy" class="govcy-footer-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"/></a>
                        </div>
                    </div>
                </div>
        {% endblock %}
    </footer>

    <!--bodyEnd-->
    <section  class="govcy-container-fluid" id="bodyEndContainer">
        {% block bodyEnd %}{% endblock %}
    </section>
    {%- if site.lang == 'en' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.en.min.js"></script>{%- elseif site.lang == 'el' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.el.min.js"></script>{%- endif -%}
    <script src="{{ site.cdn.dist }}/js/govcy.uds.min.js"{% if site.cdn.jsIntegrity %} integrity="{{ site.cdn.jsIntegrity }}" crossorigin="anonymous"{% endif %}></script>
  </body>
</html>