<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>WSRB Edition</title>
  <meta th:replace="~{fragments/page :: html_header}" />
</head>
<body>
  <header class=""><div></div></header>
  <nav th:replace="~{fragments/page :: navigation (navActive='nav-main-__${pageId}__')}">...</nav>
  <div th:utext="${html4BiblPopups}"></div>
  <main class="container">
     
      <div class="row">
        <div class="col-3 mt-5 pt-2" >
          <nav class="toc" th:unless="${#lists.isEmpty(subPages)}">
           <ul class="toc-list">
            <li class="toc-list-item" th:each="p: ${subPages}" th:classappend="${#strings.equals(subpageId, p)} ? 'is-active-li'">
              <a class="toc-link" th:classappend="${#strings.equals(subpageId, p)} ? 'is-active-link'"
                  th:href="@{/site/__${p}__}" th:text="${pageLabels['__${p}__']}">Link</a>
            </li>
          </ul>
          </nav>
      </div>
      <div class="col">
      <h2 th:text="#{wsrb.page.headlines.main.__${pageId}__}">Hauptüberschrift</h2>
      <hr class="mt-0"/>
      <div th:utext="${htmlBody}">
      <h4>Hello</h4>
      <p> more information can be found here ... </p>
      </div>
      </div>
      </div>
    </main>
  <footer th:replace="~{fragments/page :: footer}"></footer>
  <script th:replace="~{fragments/page :: html_footer}"></script>
  <script th:inline="javascript" th:if="${param.anchor}">
      document.addEventListener('DOMContentLoaded', function () {
        let a_id = /*[[${param.anchor[0]}]]*/ "";   
        let e = document.getElementById(a_id);
        e.classList.add("wsrb-highlight");
        e.scrollIntoView();
      });
  </script>
  <script>
      window.addEventListener('DOMContentLoaded', function() {
          document.querySelectorAll('[data-bs-toggle="popover"]').forEach( 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>
</body>
</html>
