<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>WSRB Edition</title>
  <meta th:replace="~{fragments/page :: html_header}" />
  <link rel="stylesheet" th:href="@{/css/wsrb_transkription.css}">
</head>
<body>
  <header class=""><div></div></header>
   <nav th:replace="~{fragments/page :: navigation (navActive='nav-main-transkription')}">...</nav>
   <main class="container">

    <div class="row">
      <div class="col-2 mt-5 pt-2">
        <nav class="toc">
          <ul class="toc-list">
            <!--/*  no home
            <li class="toc-list-item" th:classappend="${#strings.equals(currentTranskription, '')} ? 'is-active-li'" >
               <a class="toc-link" th:classappend="${#strings.equals(currentTranskription, '')} ? 'is-active-link'" th:href="@{transkription}">Home</a>
            </li> */-->
            <li th:each="tr: ${transkriptionList}"
                class="toc-list-item" th:classappend="${#strings.equals(currentTranskription, tr)} ? 'is-active-li'">
              <a class="toc-link" th:classappend="${#strings.equals(currentTranskription, tr)} ? 'is-active-link'" 
                 th:href="@{transkription(id=${tr})}" th:text="#{wsrb.labels.__${tr}__}">Link</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-10">
        <h2>Transkriptionen</h2>
        <hr class="mt-0"/>
        <div th:if="${#strings.isEmpty(currentTranskription)}" th:utext="${transkriptionIntro}"></div>
        <div th:unless="${#strings.isEmpty(currentTranskription)}" th:utext="${transkriptionHTML}"></div>

        <script th:inline="javascript" th:unless="${#strings.isEmpty(currentAnchor)}">
          document.addEventListener('DOMContentLoaded', function () {
            let a_id = /*[[${currentAnchor}]]*/ "";	 
            let e = document.getElementById("lg_"+ a_id);
            if(e) {
              e.scrollIntoView();
            }
          });
        </script>
      </div>
    </div>
  </main>
  <footer th:replace="~{fragments/page :: footer}"></footer>

  <script>
    // Bilder, die nicht ordentlich geladen wurden, erneut laden ...

    //Konfiguration
    const reLoadFailedImagesConfig = {
      cssSelector: "img.wsrb-facsimile", // CSS-Selector für relevante Bilder
      maxRetries: 5, // Anzahl der Durchläufe, um fehlerhafte Bilder erneut zu laden
      delayInMs: 4000 // Wartezeit zwischen zwei reload-Versuchen
    };

    function reloadFailedImages(attemptsLeft = reLoadFailedImagesConfig.maxRetries) {
      if (attemptsLeft <= 0) {
        console.warn(`Maximale Anzahl von ${reLoadFailedImagesConfig.maxRetries} Versuchen erreicht. - Eventuell wurde nicht alle Bilder ordentlich geladen`);
        return;
      }

      // alle nicht geladenen Bilder finden
      const failedImages = Array.from(document.querySelectorAll(reLoadFailedImagesConfig.cssSelector))
        .filter(img => !img.complete || img.naturalWidth === 0);

      if (failedImages.length === 0) {
        return; // alle Bilder erfolgreich geladen.
      }

      const currentAttempt = reLoadFailedImagesConfig.maxRetries - attemptsLeft + 1;
      console.log(`Versuch ${currentAttempt} von ${reLoadFailedImagesConfig.maxRetries}: ${failedImages.length} Bild(er) werden neu geladen...`);

      // Bilder neu laden (durch Anhängen eines retry-Parameter mit Datum wird ggf. Caching umgangen)
      failedImages.forEach(img => {
        // Die src-URL wird nur neu gesetzt (und damit das Bild erneut geladen), wenn Status complete (aber naturalWidth === 0).
        // Bei !img.complete, lädt es noch vom letzten Versuch. 
        if (img.complete) {
          const originalSrc = img.src.split('?')[0];
          const separator = originalSrc.includes('?') ? '&' : '?';
          img.src = originalSrc + separator + 'retry=' + Date.now();
        }
      });

      // Funktion nach exponentieller Wartezeit (und etwas zufälligem Offset) erneut ausführen
      const delay = reLoadFailedImagesConfig.delayInMs * Math.pow(2, reLoadFailedImagesConfig.maxRetries - attemptsLeft)
        + Math.floor(Math.random() * 500);
      setTimeout(() => {
        reloadFailedImages(attemptsLeft - 1);
      }, delay);
    }

    if (document.readyState === 'complete') {
      reloadFailedImages();
    } else {
      window.addEventListener('load', () => reloadFailedImages());
    }
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
     const popoverList = [...popoverTriggerList].map(pEl => {
       let p = new bootstrap.Popover(pEl, {
         html: true,
         sanitize: false,
         placement: 'top',
         container: 'body',
         content: () => document.getElementById(pEl.dataset.wsrbPopoverContentTemplate).content.cloneNode(true)
       });
       pEl.addEventListener('shown.bs.popover', function (e) {
         let ppo =  bootstrap.Popover.getInstance(e.target);
         ppo.tip.querySelector('.btn-close').addEventListener("click", function() {
           ppo.hide();  
         });
       }); 
       return p;
     });
    });
  </script>
  <script th:replace="~{fragments/page :: html_footer}"></script>
</body>
</html>