<!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-edition')}">...</nav>
  <div th:utext="${html4BiblPopups}"></div>
  <main class="container">
    <div class="row">
      <div class="col-3 mt-5 pt-2">
        <form method="get" th:action="@{/edition}">
          <input type="submit" hidden="hidden">
          <!-- 
          <div th:if="${param.id != null}">
			<input type="hidden" name="id" th:value="${v}" th:each="v:${param.id}"></input>  
		  </div>
		  -->	  
          <div>
            <a th:href="@{/edition}" class="btn wsrb-button1 btn-sm btn-light float-end ms-2 mb-1" style="width:2.5em;height:2em;"
               title="Filter löschen"><svg class="icon"><use xlink:href="images/wsrb_icons.svg#bi_bi-trash-fill" /></svg></a>
            <button class="btn wsrb-button1 btn-sm btn-light float-end ms-2 mb-1" type="button" style="width:2.5em;height:2em; position:relative" 
                    title="Tastatur für Sonderzeichen"
                    data-bs-toggle="collapse" data-bs-target="#sondertasten" aria-expanded="false" aria-controls="sondertasten">
                <span style="font-size:1.75em;position:absolute;top:-.15em;left:.18em;color:gray"><svg class="icon"><use xlink:href="images/wsrb_icons.svg#bi_bi-keyboard" /></svg></span>
            </button>
            <template id="templ_content4pop_help_search">
              <div class="card">
                <div class="card-header">
                  <button type="button" class="btn-close float-end" aria-label="Close"></button>
                  <strong>Hilfe</strong>
                </div>
                <div class="card-body">
                  Eine Beschreibung der Such- und Filter&shy;möglichkeiten finden Sie im Abschnitt 
                  <a class="fw-bold" href="site/intro__benutzung#a_intro_7_1_3">7.1.3 Suche und Filter</a> der Einführung.
                </div>
              </div>
            </template>
            <button type="button" class="btn float-end ms-2 border-0 py-0 pe-0 text-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" 
                    data-bs-custom-class="wsrb-popover wsrb-popover-help" data-wsrb-popover-content-template="templ_content4pop_help_search">
                    <svg class="icon"><use xlink:href="images/wsrb_icons.svg#bi_bi-question-circle-fill" /></svg>
            </button>    

            <h4>Filter</h4>
            <div class="clearfix"></div>
			<div class="collapse mb-2" id="sondertasten" data-suchfeld-id="inp-searchterm">
				<div class="card card-body py-2 px-1 border border-secondary w-100">
					<div class="d-grid gap-1 d-sm-block">
						<span th:each="key: ${#strings.arraySplit('aͤ|eͤ|oͤ|uͤ|ē|ū|æ|œ|ſ', '|')}"> 
							<button type="button" class="btn btn-light border-dark btn-sm font-monospace" style="font-size:.96rem; min-width:1.33em;border-radius:20%" 
							        th:onclick="'insertZeichen(\'__${key}__\')'" th:text="${key}">A</button>
						</span>
					</div>
				</div>
			</div>
          </div>
          <div class="clearfix mb-2">
            <h6 class="mb-0">Volltext</h6>
            <div class="input-group">
                  <input type="text" class="form-control"  onfocus="saveSuchfeld(this.id)" 
                     id="inp-searchterm" th:name="searchTerm" placeholder="Suchbegriff"
                     th:value="${param.searchTerm==null ? '' : param.searchTerm}">
                  <button type="submit" class="btn btn-sm btn-primary font-monospace float-end" 
                          style="width:2.5em"  title="Suchen...">
                    <svg class="icon"><use xlink:href="images/wsrb_icons.svg#fa-solid_fa-magnifying-glass" /></svg>        
                  </button>
            </div>
            <div class="form-check float-start ms-2 mt-2 wsrb-facetlist">
                <input class="form-check-input" type="radio" onChange="this.form.submit()"
                       name="searchRegion" id="inp-searchregion-edition" value="edition"
                       th:checked="${param.searchRegion==null or param.searchRegion[0]=='edition'}">
                <label class="form-check-label" for="inp-searchregion-edition">Text</label>
            </div>
            <!--/* für Radio 2 und 3 unterscheiden sich die Abstände und die Prüfung in th:checked */-->
            <div class="form-check float-start ms-2 mt-2 wsrb-facetlist">
                <input class="form-check-input" type="radio" onChange="this.form.submit()"
                       name="searchRegion" id="inp-searchregion-translation" value="translation"
                       th:checked="${param.searchRegion!=null and param.searchRegion[0]=='translation'}">
                <label class="form-check-label" for="inp-searchregion-translation">Übersetzung</label>
            </div>
            <div class="form-check float-start ms-2 mt-2 wsrb-facetlist">
                <input class="form-check-input" type="radio" onChange="this.form.submit()"
                       name="searchRegion" id="inp-searchregion-apparat" value="apparat"
                       th:checked="${param.searchRegion!=null and param.searchRegion[0]=='apparat'}">
                <label class="form-check-label" th:for="inp-searchregion-apparat">Apparat</label>
            </div>
          </div>
 
          <div class="pt-3">
            <div class="mb-3"
                 th:each="taxGroup: ${#strings.arraySplit('tax.expr|tax.illoc|tax.theme|tax.verse_count|tax.transcription', '|')}">
              <h6 class="mb-0" th:text="${taxLabels.get(taxGroup)}"></h6>
              <div class="row wsrb-facetlist gx-5 ps-4">
                <div class="form-check" th:classappend="${(taxGroup == 'tax.verse_count' or taxGroup == 'tax.transcription') ? 'col-6' : 'col-12'}"
                     th:each="tax: ${resultFacets.keySet()}" th:if="${#strings.startsWith(tax, taxGroup)}">
                   <span th:if="${(resultFacets.get(tax) > 0) or (param.filter!=null and #arrays.contains(param.filter, tax))}"
                         class="d-block badge text-muted float-end ps-3 pt-2" th:text=${resultFacets.get(tax)}>Anzahl</span>
                   <input type="checkbox" class="form-check-input" th:id="${'input_' + tax}" onChange="this.form.submit()" 
                          name="filter" th:value="${tax}"
                          th:checked="${param.filter!=null and #arrays.contains(param.filter, tax)}">
                   <label class="form-check-label" th:for="${'input_'+tax}" style="max-width:calc(100% - 3rem)"
                          th:text="${taxLabels.get(tax)}"></label>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="col-9">
		<div class="clearfix">
        <h2 class="float-start">Edition der Sprüche</h2>
		<h4 class="float-end">
		 <span class="badge rounded-pill text-bg-primary mb-2 pt-1">Trefferzahl: <strong th:text="${#lists.size(resultIDs)}"></strong></span>
		</h4>
		</div>
        <hr class="mt-0" />

	    <div id="divNotFound" th:if="${#lists.size(resultIDs)==0}" class="alert alert-secondary fs-4" role="alert">Ihre Suche lieferte keinen Treffer.</div>
        <div id="divEdition" th:unless="${#lists.size(resultIDs)==0}" th:utext="${filteredSprueche}">Edition on display</div>
      </div>
    </div>
  </main>
  <footer th:replace="~{fragments/page :: footer}"></footer>

  <script th:replace="~{fragments/page :: html_footer}"></script>
  <script type="text/javascript">
    function saveSuchfeld(id) {
      document.getElementById('sondertasten').dataset.suchfeldId = id;
    }
    
    function insertZeichen(s) {
      let current = document.getElementById('sondertasten').dataset.suchfeldId;
      if(current) {
        let inp = document.getElementById(current);
        let pos = inp.selectionStart;
		let posEnd = inp.selectionEnd;
		inp.value = inp.value.substring(0, pos) + s + inp.value.substring(posEnd);
		inp.setSelectionRange(pos+s.length, pos+s.length);
		inp.focus();
      }
    }
    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 po =  bootstrap.Popover.getInstance(e.target);
          po.tip.querySelector('.btn-close').addEventListener("click", function() {
              po.hide();  
          });
          po.tip.querySelectorAll('[data-bs-toggle="popover"]').forEach( ppEl => {
            console.log(ppEl);
            if (ppEl.classList.contains("wsrb-biblref")) {
              console.log('templ_content4pop_'+ ppEl.dataset.wsrbBiblref);
              let pp = new bootstrap.Popover(ppEl, {
                html: true,
                sanitize: false,
                placement: 'top',
                container: 'body',
                content: () => document.getElementById(ppEl.dataset.wsrbPopoverContentTemplate).content.cloneNode(true)
              });
              ppEl.addEventListener('shown.bs.popover', function (e) {
                  let ppo =  bootstrap.Popover.getInstance(e.target);
                  ppo.tip.querySelector('.btn-close').addEventListener("click", function() {
                    ppo.hide();  
                  });
              });
              return pp;
            }
          });
        })
        return p;
      });
      
      document.querySelectorAll('.wsrb-te-collapse').forEach( c => {
          c.addEventListener('show.bs.collapse', function () {
            let url = 'texteinheit?te_ids=' + encodeURIComponent(c.dataset.wsrbTeIds)+'&te_labels='+encodeURIComponent(c.dataset.wsrbTeLabels);
            fetch(url).then(function (response) {
              	// The API call was successful!
              return response.text();
            }).then(function (html) {
          	  c.innerHTML = html;
            }).catch(function (err) {
          	  console.warn('Something went wrong.', err);
            });
          });
      });
    });
  </script>
</body>
</html>
