<th:block th:fragment="head">
  <!-- Title -->
  <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>

  <!-- Metadata -->
  <meta charset="utf-8">
  <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#ffffff">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Icons -->
  <link rel="apple-touch-icon" sizes="180x180" th:href="@{'/apple-touch-icon.png'}">
  <link rel="icon" type="image/png" sizes="32x32" th:href="@{'/favicon-32x32.png'}">
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{'/favicon-16x16.png'}">
  <link rel="manifest" th:href="@{'/site.webmanifest'}" crossorigin="use-credentials">
  <link rel="mask-icon" th:href="@{'/safari-pinned-tab.svg'}" color="#ca2b2a">
  <link rel="shortcut icon" th:href="@{'/favicon.ico'}">
  <meta name="apple-mobile-web-app-title" content="Stirling PDF">
  <meta name="application-name" content="Stirling PDF">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#ffffff">

  <script>
    window.stirlingPDF = window.stirlingPDF || {};
    
    // Capture true system DPI at page load (before any zoom interactions)
    const systemDPR = window.devicePixelRatio || 1;
    
    // Determine if this is actually a high DPI screen at page load
    const isHighDPI = systemDPR > 1.4;

    // Reset all navbar and dropdown scaling styles
    function resetNavScaling() {
      const navbarElement = document.querySelector('.navbar');
      if (navbarElement) {
        navbarElement.style.transform = '';
        navbarElement.style.transformOrigin = '';
        navbarElement.style.width = '';
        navbarElement.style.left = '';
        navbarElement.style.right = '';
        navbarElement.style.marginBottom = '';
        navbarElement.classList.remove('navbar-expand-lg');
        navbarElement.classList.remove('navbar-expand-xl');
      }
      // Reset dropdown scaling
      const dropdowns = document.querySelectorAll('.dropdown-menu');
      dropdowns.forEach(dropdown => {
        dropdown.style.transform = '';
        dropdown.style.transformOrigin = '';
      });
      // Reset CSS custom property
      document.documentElement.style.setProperty('--navbar-height', '');
    }
    
    function scaleNav() {
      resetNavScaling();
      if (window.innerWidth < 1200) {
        const navbarElement = document.querySelector('.navbar');
        if (navbarElement) {
          navbarElement.classList.remove('navbar-expand-lg');
          navbarElement.classList.add('navbar-expand-xl');
        }
        return;
      }
      const currentDPR = window.devicePixelRatio || 1;
      const browserZoom = currentDPR / systemDPR;
      
      // Counter-scale to maintain same visual size
      const isMobile = window.innerWidth <= 768 && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      let baseScale = isMobile ? 3 : (isHighDPI ? 2.2 : 1.1); // Prioritize mobile scaling over high DPI
      const navScale = baseScale / currentDPR;
      // Dropdowns at 80% (20% smaller)
      const dropdownScale = 0.8;
      
      
      const navbar = document.querySelector('.navbar');
      
      if (navbar) {
        // RTL support - check document direction
        const isRTL = document.documentElement.dir === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
        
        const translateX = isRTL ? '50%' : '-50%';
        navbar.style.transform = `translateX(${translateX}) scale(${navScale})`;
        navbar.style.transformOrigin = 'top center';
        navbar.style.width = `${100 / navScale}%`;
        
        if (isRTL) {
          navbar.style.right = '50%';
          navbar.style.left = 'auto';
        } else {
          navbar.style.left = '50%';
          navbar.style.right = 'auto';
        }
        
        // Adjust bottom margin based on scale to prevent overlap/gaps
        const baseHeight = 60; // Assume base navbar height
        const scaledHeight = baseHeight * navScale;
        const marginAdjustment = scaledHeight - baseHeight;
        navbar.style.marginBottom = `${marginAdjustment}px`;
        
        // Adjust responsive breakpoint based on effective width after scaling
        const effectiveWidth = window.innerWidth / navScale;
        if (effectiveWidth >= 1200) {
          navbar.classList.add('navbar-expand-lg');
          navbar.classList.remove('navbar-expand-xl');
        } else {
          navbar.classList.add('navbar-expand-xl');
          navbar.classList.remove('navbar-expand-lg');
        }
        
        
        console.log('DPR:', currentDPR, 'isHighDPI:', isHighDPI, 'baseScale:', baseScale, 'navScale:', navScale, 'effective width:', effectiveWidth);
      }
      
      // Set CSS custom property for mobile navbar scaling (for sidebar positioning)
      // Use the ACTUAL scaled height, not a fixed assumption
      const baseHeight = 64;
      const actualScaledHeight = baseHeight * navScale;
      document.documentElement.style.setProperty('--navbar-height', `${actualScaledHeight}px`);
      
      setTimeout(() => {
        const dropdowns = document.querySelectorAll('.dropdown-menu');
        dropdowns.forEach(dropdown => {
          dropdown.style.transform = `scale(${dropdownScale})`;
          
          // Use different transform origins based on dropdown position
          const parentItem = dropdown.closest('.nav-item');
          const navbar = dropdown.closest('.navbar-nav');
          
          // Check if this is a right-aligned dropdown (language, favorites, search, etc.)
          const isRightAligned = navbar && navbar.classList.contains('flex-nowrap') && 
                                !parentItem?.closest('.dropdown-mega');
          
          dropdown.style.transformOrigin = isRightAligned ? 'top right' : 'top left';
        });
        
        console.log('Applied dropdown scale:', dropdownScale);
      }, 100);
    }
    
    let lastDPR = window.devicePixelRatio;
    
    document.addEventListener('DOMContentLoaded', scaleNav);
    window.addEventListener('resize', scaleNav);
    
    setInterval(() => {
      const currentDPR = window.devicePixelRatio;
      if (Math.abs(currentDPR - lastDPR) > 0.01) {
        lastDPR = currentDPR;
        scaleNav();
      }
    }, 100);
  </script>
  <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
  <script th:src="@{'/js/fetch-utils.js'}"></script>
  <!-- jQuery -->
  <script th:src="@{'/js/thirdParty/jquery.min.js'}"></script>
  <script th:src="@{'/js/thirdParty/jquery.validate.min.js'}"></script>
  <script th:src="@{'/js/thirdParty/jszip.min.js'}" th:if="${currentPage != 'home'}"></script>

  <!-- Bootstrap -->
  <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
  <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
  
  <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" th:href="@{'/css/bootstrap-icons.min.css'}">

  <!-- Pixel, doesn't collect any PII-->
  <img th:if="${!@disablePixel}" referrerpolicy="no-referrer-when-downgrade"
     th:src="'https://pixel.stirlingpdf.com/a.png?x-pxid=4f5fa02f-a065-4efb-bb2c-24509a4b6b92' 
             + '&machineType=' + ${@machineType} 
             + '&appVersion=' + ${@appVersion} 
             + '&licenseType=' + ${@license} 
             + '&loginEnabled=' + ${@loginEnabled}"
     style="position: absolute; visibility: hidden;" />
     
  <!-- Custom -->
  <link rel="stylesheet" th:href="@{'/css/general.css'}">
  <link rel="stylesheet" th:href="@{'/css/theme/theme.css'}">
  <link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
  <link rel="stylesheet" th:href="@{'/css/theme/theme.light.css'}" id="light-mode-styles">
  <link rel="stylesheet" th:href="@{'/css/theme/theme.dark.css'}" id="dark-mode-styles">
  <link rel="stylesheet" th:href="@{'/css/rainbow-mode.css'}" id="rainbow-mode-styles" disabled>
  <link rel="stylesheet" th:href="@{'/css/tab-container.css'}">
  <link rel="stylesheet" th:href="@{'/css/navbar.css'}">

  <link rel="stylesheet" th:href="@{'/css/error.css'}" th:if="${error}">

  <link rel="stylesheet" th:href="@{'/css/home.css'}" th:if="${currentPage == 'home'}">
  <link rel="stylesheet" th:href="@{'/css/home-legacy.css'}" th:if="${currentPage == 'home-legacy'}">
  <link rel="stylesheet" th:href="@{'/css/account.css'}" th:if="${currentPage == 'account'}">
  <link rel="stylesheet" th:href="@{'/css/licenses.css'}" th:if="${currentPage == 'licenses'}">
  <link rel="stylesheet" th:href="@{'/css/multi-tool.css'}" th:if="${currentPage == 'multi-tool'}">
  <link rel="stylesheet" th:href="@{'/css/rotate-pdf.css'}" th:if="${currentPage == 'rotate-pdf'}">
  <link rel="stylesheet" th:href="@{'/css/stamp.css'}" th:if="${currentPage == 'stamp'}">
  <link rel="stylesheet" th:href="@{'/css/fileSelect.css'}" th:if="${currentPage != 'home'}">
  <link rel="stylesheet" th:href="@{'/css/footer.css'}">

  <link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="stylesheet" th:href="@{'/css/cookieconsent.css'}" th:if="${@analyticsEnabled}">
  <link rel="stylesheet" th:href="@{'/css/cookieconsentCustomisation.css'}" th:if="${@analyticsEnabled}">
  <script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>

  <!-- Google MD Icons -->
  <link rel="stylesheet" th:href="@{'/css/theme/font.css'}">

  <!-- Help Modal -->
  <link rel="stylesheet" th:href="@{'/css/errorBanner.css'}" th:if="${currentPage != 'home'}">

  <script th:src="@{'/js/cacheFormInputs.js'}" th:if="${currentPage != 'home'}"></script>
  <script th:src="@{'/js/tab-container.js'}"></script>
  <script th:src="@{'/js/darkmode.js'}"></script>
  <script th:src="@{'/js/csrf.js'}"></script>
  <script th:inline="javascript">

    function UpdatePosthogConsent(){
      if(typeof(posthog) == "undefined") {
        return;
      }

      window.CookieConsent.acceptedCategory('analytics')?
        posthog.opt_in_capturing() : posthog.opt_out_capturing();
    }
    const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
    const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;

    const cookieBannerPopUpTitle = /*[[#{cookieBanner.popUp.title}]]*/ "How we use Cookies";
    const cookieBannerPopUpDescription1 = /*[[#{cookieBanner.popUp.description.1}]]*/ "";
    const cookieBannerPopUpDescription2 = /*[[#{cookieBanner.popUp.description.2}]]*/ "";
    const cookieBannerPopUpAcceptAllBtn = /*[[#{cookieBanner.popUp.acceptAllBtn}]]*/ "";
    const cookieBannerPopUpAcceptNecessaryBtn = /*[[#{cookieBanner.popUp.acceptNecessaryBtn}]]*/ "";
    const cookieBannerPopUpShowPreferencesBtn = /*[[#{cookieBanner.popUp.showPreferencesBtn}]]*/ "";
    const cookieBannerPreferencesModalTitle = /*[[#{cookieBanner.preferencesModal.title}]]*/ "";
    const cookieBannerPreferencesModalAcceptAllBtn = /*[[#{cookieBanner.preferencesModal.acceptAllBtn}]]*/ "";
    const cookieBannerPreferencesModalAcceptNecessaryBtn = /*[[#{cookieBanner.preferencesModal.acceptNecessaryBtn}]]*/ "";
    const cookieBannerPreferencesModalSavePreferencesBtn = /*[[#{cookieBanner.preferencesModal.savePreferencesBtn}]]*/ "";
    const cookieBannerPreferencesModalCloseIconLabel = /*[[#{cookieBanner.preferencesModal.closeIconLabel}]]*/ "";
    const cookieBannerPreferencesModalServiceCounterLabel = /*[[#{cookieBanner.preferencesModal.serviceCounterLabel}]]*/ "";
    const cookieBannerPreferencesModalSubtitle = /*[[#{cookieBanner.preferencesModal.subtitle}]]*/ "";
    const cookieBannerPreferencesModalDescription1 = /*[[#{cookieBanner.preferencesModal.description.1}]]*/ "";
    const cookieBannerPreferencesModalDescription2= /*[[#{cookieBanner.preferencesModal.description.2}]]*/ "";
    const cookieBannerPreferencesModalDescription3 = /*[[#{cookieBanner.preferencesModal.description.3}]]*/ "";
    const cookieBannerPreferencesModalNecessaryTitle1 = /*[[#{cookieBanner.preferencesModal.necessary.title.1}]]*/ "";
    const cookieBannerPreferencesModalNecessaryTitle2 = /*[[#{cookieBanner.preferencesModal.necessary.title.2}]]*/ "";
    const cookieBannerPreferencesModalNecessaryDescription = /*[[#{cookieBanner.preferencesModal.necessary.description}]]*/ "";
    const cookieBannerPreferencesModalAnalyticsTitle = /*[[#{cookieBanner.preferencesModal.analytics.title}]]*/ "";
    const cookieBannerPreferencesModalAnalyticsDescription = /*[[#{cookieBanner.preferencesModal.analytics.description}]]*/ "";

    if (analyticsEnabled) {
      !function (t, e) {
        var o, n, p, r;
        e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) {
          function g(t, e) {
            var o = e.split(".");
            2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () {
              t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
            }
          }

          (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r);
          var u = e;
          for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) {
            var e = "posthog";
            return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e
          }, u.people.toString = function () {
            return u.toString(1) + ".people (stub)"
          }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "), n = 0; n < o.length; n++) g(u, o[n]);
          e._i.push([i, s, a])
        }, e.__SV = 1)
      }(document, window.posthog || []);
      posthog.init('phc_fiR65u5j6qmXTYL56MNrLZSWqLaDW74OrZH0Insd2xq', {
        api_host: 'https://eu.i.posthog.com',
        persistence: 'localStorage',
        person_profiles: 'always',
        mask_all_text: true,
        mask_all_element_attributes: true,
        opt_out_capturing_by_default: true
      })
      const baseUrl = window.location.hostname;
      posthog.register_once({
        'hostname': baseUrl,
        'UUID': /*[[${@UUID}]]*/ '',
        'app_version': /*[[${@appVersion}]]*/ '',
      });
    }

    window.addEventListener("cc:onConsent", UpdatePosthogConsent);
    window.addEventListener("cc:onChange", UpdatePosthogConsent);
  </script>
</th:block>

<th:block th:fragment="game">
  <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
    <script th:inline="javascript">
      console.log("loaded game");
      $(document).ready(function () {

        // Find the file input within the form
        var fileInput = $('input[type="file"]');

        // Find the closest enclosing form of the file input
        var form = fileInput.closest('form');

        // Find the submit button within the form
        var submitButton = form.find('button[type="submit"], input[type="submit"]');

        const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?';
        const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
        window.downloadCompleteText = downloadCompleteText;
        // Create the 'show-game-btn' button
        var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button>');

        // Insert the 'show-game-btn' just above the submit button
        submitButton.before(gameButton);

        function loadGameScript(callback) {
          console.log('loadGameScript called');
          const script = document.createElement('script');
          script.src = 'js/game.js';
          script.onload = callback;
          document.body.appendChild(script);
        }
        let gameScriptLoaded = false;
        const gameDialog = document.getElementById('game-container-wrapper');
        $('#show-game-btn').on('click', function () {
          console.log('Show game button clicked');
          if (!gameScriptLoaded) {
            console.log('Show game button load');
            loadGameScript(function () {
              console.log('Game script loaded');
              window.initializeGame();
              gameScriptLoaded = true;
            });
          } else {
            window.resetGame();
          }
          gameDialog.showModal();
        });
        gameDialog.addEventListener("click", e => {
          const dialogDimensions = gameDialog.getBoundingClientRect()
          if (
            e.clientX < dialogDimensions.left ||
            e.clientX > dialogDimensions.right ||
            e.clientY < dialogDimensions.top ||
            e.clientY > dialogDimensions.bottom
          ) {
            gameDialog.close();
          }
        })
      })
    </script>
    <div id="game-container">
      <div id="lives">Lives: 3</div>
      <div id="score">Score: 0</div>
      <div id="high-score">High Score: 0</div>
      <div id="level">Level: 1</div>
      <img th:src="@{'/favicon.svg'}" class="player" id="player" alt="favicon">
    </div>
    <link rel="stylesheet" th:href="@{'/css/game.css'}">
  </dialog>
</th:block>

<th:block th:fragment="fileSelector(name, multipleInputsForSingleRequest)"
  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, disableMultipleFiles=${disableMultipleFiles} ?: false, showUploads=${showUploads} ?: true, notRequired=${notRequired} ?: false">
  <script th:inline="javascript">
      (function () {
        window.stirlingPDF.pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
        window.stirlingPDF.multipleInputsForSingleRequest = /*[[${multipleInputsForSingleRequest}]]*/ false;
        window.stirlingPDF.disableMultipleFiles = /*[[${disableMultipleFiles}]]*/ false;
        window.stirlingPDF.remoteCall = /*[[${remoteCall}]]*/ true;
        window.stirlingPDF.sessionExpired = /*[[#{session.expired}]]*/ '';
        window.stirlingPDF.refreshPage = /*[[#{session.refreshPage}]]*/ 'Refresh Page';
        window.stirlingPDF.error = /*[[#{error}]]*/ "Error";
        window.stirlingPDF.uploadLimitReadable = /*[[${@uploadLimitService.getReadableUploadLimit()}]]*/ 'Unlimited';
        window.stirlingPDF.uploadLimit = /*[[${@uploadLimitService.getUploadLimit()}]]*/ 0;
        window.stirlingPDF.uploadLimitExceededSingular = /*[[#{uploadLimitExceededSingular}]]*/ 'is too large. Maximum allowed size is';
        window.stirlingPDF.uploadLimitExceededPlural = /*[[#{uploadLimitExceededPlural}]]*/ 'are too large. Maximum allowed size is';
        window.stirlingPDF.pdfCorruptedMessage = /*[[#{error.pdfInvalid}]]*/ 'The PDF file "{0}" appears to be corrupted or has an invalid structure. Please try using the \'Repair PDF\' feature to fix the file before proceeding.';
        window.stirlingPDF.tryRepairMessage = /*[[#{error.tryRepair}]]*/ 'Try using the Repair PDF feature to fix corrupted files.';
        window.stirlingPDF.currentPage = /*[[${currentPage}]]*/ '';
      })();
  </script>
  <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
  <script th:src="@{'/js/downloader.js'}"></script>
  <script>
    window.decrypt = {
      passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
      cancelled: '[[#{decrypt.cancelled}]]',
      noPassword: '[[#{decrypt.noPassword}]]',
      invalidPassword: '[[#{decrypt.invalidPassword}]]',
      invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
      unexpectedError: '[[#{decrypt.unexpectedError}]]',
      serverError: '[[#{decrypt.serverError}]]',
      success: '[[#{decrypt.success}]]',
    };
    window.fileInput = {
      dragAndDropPDF: '[[#{fileChooser.dragAndDropPDF}]]',
      dragAndDropImage: '[[#{fileChooser.dragAndDropImage}]]',
      addAttachments: '[[#{fileChooser.addAttachments}]]',
      extractPDF: '[[#{fileChooser.extractPDF}]]',
      loading: '[[#{loading}]]'
    };</script>
  <div class="custom-file-chooser mb-3"

    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-show-uploads=${showUploads}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}, data-bs-no-file-selected=#{noFileSelected}">
    <div class="mb-3 d-flex flex-column justify-content-center align-items-center flex-wrap input-container"
      th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
      <label class="file-input-btn d-none">
       <input type="file" class="form-control" 
		  th:name="${name}" 
		  th:id="${name}+'-input'" 
		  th:accept="${accept == null ? '*/*': ((accept == '*/*') ? accept : (accept + ',.zip'))}"
		  th:attr="multiple=${!disableMultipleFiles}" 
		  th:required="${notRequired} ? null : 'required'">
        Browse
      </label>
      <div class="d-flex flex-column align-items-center">
        <div class="text-center" id="fileInputText" style="word-wrap: break-word; hyphens: auto; line-height: 1.2;">
          <span th:text="#{fileChooser.click}"></span>
          <span th:text="#{fileChooser.or}" style="margin: 0 5px;"></span>
          <span th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></span>
        </div>
      </div>
    </div>
    <div class="selected-files flex-wrap"></div>
	<div class="text-muted small mt-0 text-end w-100" th:if="${@uploadLimitService.getUploadLimit() != 0}">
	    <span th:text="#{uploadLimit}">Maximum file size: </span>
	    <span th:text="${@uploadLimitService.getReadableUploadLimit()}"></span>
	</div>
  </div>
  <div class="progressBarContainer" style="display: none; position: relative;">
    <div class="progress" style="height: 1rem;">
      <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </div>
  <script th:src="@{'/js/fileInput.js'}" type="module"></script>
</th:block>
