<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
  <title th:text="#{wsrb.page.headlines.main.daten_tei}">XML Source</title>
  <meta th:replace="~{fragments/page :: html_header}" />
  <meta name="wsrb_last_restart" th:content="${lastRestart}" />
  <link rel="stylesheet" th:href="@{/js/prismjs@1.30.0/prism.css}">
</head>
<body>
  <header class=""><div></div></header>
  <nav th:replace="~{fragments/page :: navigation (navActive='nav-main-daten_tei')}">...</nav>
  <main class="container">
      <div class="clearfix"></div>
      <div class="row">
      <div class="col-2 mt-5 pt-2">
        <nav class="toc">
          <ul class="toc-list">
            <li class="toc-list-item" th:classappend="${#strings.equals(currentXmlSource, '')} ? 'is-active-li'">
              <a class="toc-link"  th:classappend="${#strings.equals(currentXmlSource, '')} ? 'is-active-link'"
                 th:href="@{daten_tei(id=)}" th:text="${pageLabels['daten_tei__intro']}">Home</a>
            </li>
            <li th:each="x: ${xmlSourceList}"
                class="toc-list-item" th:classappend="${#strings.equals(currentXmlSource, x)} ? 'is-active-li'" >
              <a class="toc-link"  th:classappend="${#strings.equals(currentXmlSource, x)} ? 'is-active-link'"
                 th:href="@{daten_tei(id=${x})}"><svg class="icon"><use xlink:href="images/wsrb_icons.svg#bi_bi-file-earmark-code" /></svg> 
                 <span th:text="#{wsrb.labels.__${x}__}">TrID</span>
              </a>
          </li>
          </ul>
        </nav>
      </div>
      <div class="col-10">
        <h2 th:text="#{wsrb.page.headlines.main.daten_tei}">XML-Source</h2>
        <hr class="mt-0"/>
        <div th:if="${#strings.isEmpty(currentXmlSource)}" th:utext="${xmlSourceIntro}"></div>
        <div th:unless="${#strings.isEmpty(currentXmlSource)}">
            <a th:unless="${#strings.isEmpty(currentXmlSource)}" role="button"
               class="btn wsrb-button1 btn-sm btn-secondary text-white float-end" 
               th:href="@{/xml_raw/__${currentXmlSource}__.tei.xml}">
                   <svg class="icon"><use xlink:href="images/wsrb_icons.svg#bi_bi-file-earmark-arrow-down" /></svg> Download
             </a>
             <h3>TEI-XML: <span th:text="#{wsrb.labels.__${currentXmlSource}__}">TrID</span></h3>
             <div id="div-xmlsrc" class="wsrb-xmlsource">
               <!-- NO linebreak within <pre> -->
               <pre id="xmlsrc" class="line-numbers linkable-line-numbers" data-download-link data-donwload-link-label="Download"><code id="code-xmlsrc" class="language-xml">&lt;loading&gt; XML data (Please wait) ... &lt;/loading&gt;</code></pre>
             </div>
        </div>
      </div>
    </div>
  </main>
  <script th:src="@{/js/prismjs@1.30.0/prism.js}" data-manual></script>
  <script>
    document.addEventListener("DOMContentLoaded", (event) => {
      let urlParams = new URLSearchParams(document.location.search); //url parameter
      //let url="/html_prismjs/wsrb_tr1-ws1";
      let url="./xml_encoded/" + urlParams.get("id") + ".tei.xml";
      loadPrismHtml(url, "code-xmlsrc");
    });
  
    async function loadPrismHtml(url, targetDivId){
      const start = performance.now();
      await loadHtmlIntoDiv(url, targetDivId);

      let code = document.getElementById("code-xmlsrc");
      Prism.highlightElement(code, false);
    } 
  
    async function loadHtmlIntoDiv(url, targetDivId) {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const html = await response.text();
        document.getElementById(targetDivId).innerHTML = html;
      } catch (error) {
        console.error('Fehler beim Laden von ' + url, error);
        document.getElementById(targetDivId).innerHTML = 
          'Fehler beim Laden von '+ url;
      }
    }
  </script>
	
  <footer th:replace="~{fragments/page :: footer}"></footer>
  <script th:replace="~{fragments/page :: html_footer}"></script>
</body>
</html>