{% assign content_type = content_type | default: "body" %}

{% if content_type == "body" %}
  <div id="shx-loading-screen">
    <div id="shx-loading-screen-text">
      <svg width="1257" height="189" viewBox="0 0 1257 189" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M64.4018 188.64C49.9698 188.64 37.6498 186 27.4418 180.72C17.2338 175.44 8.16976 167.784 0.249758 157.752L17.1458 140.856C22.9538 148.952 29.6418 155.112 37.2098 159.336C44.7778 163.384 54.1058 165.408 65.1938 165.408C76.1058 165.408 84.8178 163.032 91.3298 158.28C98.0178 153.528 101.362 147.016 101.362 138.744C101.362 131.88 99.7778 126.336 96.6098 122.112C93.4418 117.888 89.1298 114.456 83.6738 111.816C78.3938 109 72.5858 106.536 66.2498 104.424C59.9138 102.136 53.5778 99.76 47.2418 97.296C40.9058 94.656 35.0978 91.488 29.8178 87.792C24.5378 83.92 20.2258 78.904 16.8818 72.744C13.7138 66.584 12.1298 58.84 12.1298 49.512C12.1298 39.128 14.5938 30.328 19.5218 23.112C24.6258 15.72 31.4898 10.088 40.1138 6.21599C48.9138 2.16799 58.7698 0.143985 69.6818 0.143985C81.6498 0.143985 92.3858 2.51999 101.89 7.27199C111.394 11.848 119.138 17.92 125.122 25.488L108.226 42.384C102.77 36.048 96.8738 31.296 90.5378 28.128C84.3778 24.96 77.2498 23.376 69.1538 23.376C59.2978 23.376 51.4658 25.576 45.6578 29.976C39.8498 34.2 36.9458 40.184 36.9458 47.928C36.9458 54.088 38.5298 59.104 41.6978 62.976C45.0418 66.672 49.3538 69.84 54.6338 72.48C59.9138 75.12 65.7218 77.584 72.0578 79.872C78.5698 81.984 84.9938 84.36 91.3298 87C97.6658 89.64 103.474 92.984 108.754 97.032C114.034 101.08 118.258 106.36 121.426 112.872C124.77 119.208 126.442 127.216 126.442 136.896C126.442 153.088 120.81 165.76 109.546 174.912C98.4578 184.064 83.4098 188.64 64.4018 188.64ZM186.287 186V2.784H211.103V186H186.287ZM304.559 186V2.784H329.375V186H304.559ZM203.183 102.576V79.872H310.631V102.576H203.183ZM399.086 186V2.784H423.902V186H399.086ZM493.548 186V2.784H510.972L518.364 31.56V186H493.548ZM620.268 186L507.804 35.784L510.972 2.784L623.7 152.736L620.268 186ZM620.268 186L612.876 158.808V2.784H637.692V186H620.268ZM707.378 186V2.784H724.802L732.194 31.56V186H707.378ZM834.098 186L721.634 35.784L724.802 2.784L837.53 152.736L834.098 186ZM834.098 186L826.706 158.808V2.784H851.522V186H834.098ZM921.208 186V2.784H946.024V186H921.208ZM938.104 186V163.296H1043.18V186H938.104ZM938.104 103.104V81.456H1034.46V103.104H938.104ZM938.104 25.488V2.784H1041.86V25.488H938.104ZM1227.14 186L1169.59 102.048H1165.1L1092.77 2.784H1122.33L1179.36 81.72H1183.85L1256.18 186H1227.14ZM1089.6 186L1160.61 88.584L1177.51 103.368L1117.58 186H1089.6ZM1185.43 97.56L1168.8 82.776L1225.29 2.784H1253.28L1185.43 97.56Z" fill="black"/>
      </svg>

      <noscript>
        <span style="color: #e84118">Von welchem Planeten kommst du? Aktiviere JavaScript.</span>
      </noscript>
    </div>
  </div>
{% elsif content_type == "head" %}
  <style>
    .shx-loading-screen-overflow-scroll {
      overflow-y: scroll;
    }

    #shx-loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      z-index: 99999;
      transition: opacity 0.3s ease;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    #shx-loading-screen.shx-loading-screen-hidden {
      opacity: 0;
      pointer-events: none;
    }

    #shx-loading-screen-text {
      animation: shx-spinner-pulse 0.65s cubic-bezier(0.59, 0.23, 0.28, 0.73) infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    #shx-loading-screen-text svg {
      width: 150px;
    }

    @media screen and (min-width: 750px) {
      #shx-loading-screen-text svg {
        width: 300px;
      }
    }
  </style>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const loadingScreen = document.getElementById("shx-loading-screen");
      const body = document.body

      function showLoadingScreen() {
        loadingScreen.classList.remove("shx-loading-screen-hidden");
        body.classList.add("shx-loading-screen-overflow-scroll")
      }

      function hideLoadingScreen() {
        loadingScreen.classList.add("shx-loading-screen-hidden");
        body.classList.remove("shx-loading-screen-overflow-scroll")
      }

      window.addEventListener("beforeunload", function() {
        showLoadingScreen();
      });

      window.addEventListener("DOMContentLoaded", function() {
        hideLoadingScreen();
      })

      /*
      window.addEventListener("load", function() {
        // hideLoadingScreen();
      }); */

       // This event is triggered when the page is displayed, including back navigation
      window.addEventListener("pageshow", function(event) {
        hideLoadingScreen();
      });
    });
  </script>
{% endif %}