{{ define "main" }}
<div class="main-content">
  <section class="component download pb-0">
      <div class="container h-100">
          <picture class="download-mobile-image d-block d-lg-none">
              <img class="download-mobile-image" src="{{site.BaseURL}}/assets/img/favicon.png" title="{{site.Params.appName}} App" alt="{{site.Params.appName}}-App Smartphone" loading="lazy" />
          </picture>
          <div class="row align-items-end align-items-lg-center justify-content-lg-between h-100">
              <div class="col col-12 col-lg-6 bg-white p-3">
                  <h1 class="headline headline-heavy" id="headline">{{ .Title }}</h1>
                  <h1 class="headline headline-heavy d-none" id="infoUnsupported">{{ i18n "infoUnsupported" site.Params.appName }}</h1>
                  <div class="lead d-none" id="lead">
                    {{ .Content }}
                  </div>
                  <p class="warning d-none" id="warning-ios">{{ i18n "warningIOS" }}</p>
                  <p class="warning d-none" id="warning-android">{{ i18n "warningAndroid" }}</p>
                  <h1 class="headline headline-heavy d-none" id="info-ios">{{ i18n "infoIOS" }}</h1>
                  <h1 class="headline headline-heavy d-none" id="info-android">{{ i18n "infoAndroid" }}</h1>
                  <a class="d-none originalUrl" id="directUrl" href="" target="_blank" rel="noopener noreferrer">{{ i18n "directUrl" site.Params.appName }}</a>
                  <a class="d-none originalUrl" id="alternativeUrl" href="" target="_blank" rel="noopener noreferrer">{{ default (i18n "alternativeUrl") .Page.Params.alternativeUrlDescription }}</a>
                  
                  <div class="row">
                      <p class="lead d-none" id="downloadInfo">{{ i18n "downloadInfo" }}</p>
                      {{ range site.Params.stores }}
                        <div class="col col-12 col-md-6 mb-3" id="store_{{ .id }}">
                          <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
                              <img class="img-fluid w-100" src="{{ .badge }}" alt="{{ .name }} Icon" />
                          </a>
                        </div>
                      {{ end }}
                  </div>
              </div>
              <div class="col col-12 col-sm-12 col-md-12 col-lg-5 d-none d-lg-block">
                <img class="section-main-image" src="{{site.BaseURL}}/assets/img/favicon.png" title="{{site.Params.appName}} App" alt="{{site.Params.appName}}-App Smartphone" loading="lazy" />
              </div>
          </div>
      </div>
  </section>

  <script src="{{site.BaseURL}}/assets/js/ua-parser.pack.js"></script>
  
  <script>
    const Platforms = { "android": "android", "ios": "ios", "Unsupported": "Unsupported" };
    Object.freeze(Platforms);
    const DirectLinkingCompatibility = { "Full": "Full", "Manual": "Manual", "None": "None" };
    Object.freeze(DirectLinkingCompatibility);

    document.addEventListener("DOMContentLoaded", () => {
        let parser = new UAParser();

        let platform;
        if (Platforms.hasOwnProperty(parser.getOS().name.toLowerCase()))
            platform = parser.getOS().name.toLowerCase();
        else
            platform = Platforms.Unsupported;

        console.log("Detected platform: ", platform);
        console.log("Detected browser: ", parser.getBrowser().name);

        const directLinkingCompatibility = {
            "android":  parser.getBrowser().name === "Chrome" ?
                DirectLinkingCompatibility.Full :
                (parser.getBrowser().name === "Firefox" ?
                    DirectLinkingCompatibility.Manual :
                    DirectLinkingCompatibility.None),

            "ios": parser.getBrowser().name === "Mobile Safari" ?
                DirectLinkingCompatibility.Manual :
                DirectLinkingCompatibility.None,

            "Unsupported": DirectLinkingCompatibility.None
        }[platform];

        console.log("Direct linking compatibility: ", directLinkingCompatibility);

        const originalQuery = sessionStorage.getItem('originalQuery');
        console.log("Original query:", originalQuery);
        sessionStorage.removeItem('originalQuery');
        let directUrl;
        let alternativeUrl;
        if (originalQuery) {
            directUrl = "{{ site.BaseURL }}/" + originalQuery;
            alternativeUrl = "{{ site.Params.alternativeUrl }}/" + originalQuery;
        }

        window.history.replaceState({}, document.title, window.location.protocol + "//" + window.location.host + "/" + (originalQuery ? originalQuery:""));

        if (directUrl && directLinkingCompatibility !== DirectLinkingCompatibility.None) {
            const directUrlElement = document.getElementById("directUrl");
            directUrlElement.classList.remove("d-none");
            directUrlElement.href = directUrl;

            if (directLinkingCompatibility === DirectLinkingCompatibility.Manual)
                document.getElementById("info-" + platform).classList.remove("d-none");

            document.getElementById("downloadInfo").classList.remove("d-none");
            document.getElementById("headline").classList.add("d-none");
        }
        else if (directUrl && platform !== Platforms.Unsupported && directLinkingCompatibility === DirectLinkingCompatibility.None) {
            document.getElementById("warning-" + platform).classList.remove("d-none");
            document.getElementById("downloadInfo").classList.remove("d-none");
            document.getElementById("headline").classList.add("d-none");
        }
        else if (directUrl && platform === Platforms.Unsupported) {
            const alternativeUrlElement = document.getElementById("alternativeUrl");
            alternativeUrlElement.classList.remove("d-none");
            alternativeUrlElement.href = alternativeUrl;
            document.getElementById("infoUnsupported").classList.remove("d-none");
            document.getElementById("headline").classList.add("d-none");
        }

        switch (platform) {
            case Platforms.ios:
                document.getElementById("store_google").classList.add("d-none");
                break;
            case Platforms.android:
                document.getElementById("store_apple").classList.add("d-none");
                break;
            case Platforms.Unsupported:
                document.getElementById("lead").classList.remove("d-none");
                break;
        }
    });
  </script>

</div>
{{ end }}