{% extends "base.html" %}

{% block content %}

{% include "header.html" %}

<main>

<!-- MAIN SEARCH -->
<form class="mainsearch" action="../textresults" method="post">
  <fieldset>
    <input id="faustroll" type="radio" name="corpus" value="faustroll" checked><label for="faustroll">Faustroll</label>
    <input id="shakespeare" type="radio" name="corpus" value="shakespeare"><label for="shakespeare">Shakespeare</label>
  </fieldset>
  <fieldset>
    <input name="query" type="text" placeholder=" Search" autofocus required>
    <button type="submit" class="button"><i class="fa fa-search"></i></button>
  </fieldset>
</form>

<!-- SET CURRENT RADIO BUTTON -->
<meta id="icorpus" data-corpus="{{ corpus }}">
<script>
  const corpusRadio = document.getElementById(icorpus.dataset.corpus);
  corpusRadio.checked = true;
</script>


<nav class="subnav tabs">
  <hr>
  <a class="active" href="#poetry_tab">Poetry</a>
  <a href="#sources_tab">Sources</a>
  <a href="#algo_tab">Algorithms</a>
  <hr>
</nav>


<div class="indent">
  <span><strong>Searched for:</strong>&nbsp;&nbsp; <form class="inlineform" action="../textresults" method="post"><input type="radio" name="corpus" value="{{ corpus }}" checked><input type="submit" name="query" value="{{ query }}"></input></form></span>
  <span title="Results - Reverberations - Origins">&nbsp;&nbsp;= &nbsp;&nbsp;{{ all_tot }} - {{ all_words|length }} - {{ all_files|length }}</span>
</div>



<!-- TABS -->
<div class="tab_container">


<!-- POETRY -->
<section id="poetry_tab" class="tab_content subtab_container">
  <h2 title="Number of possible poems: {{ all_poems }}">Poetry * <span>{{ corpus }}</span></h2>

  <div class="indent">
    <p>Displayed either in <a href="http://www.bevrowe.info/Queneau/QueneauRandom_v4.html" title="Inspired by Raymond Queneau's Cent Mille Milliards de poèmes" target="_blank">Raymond Queneau</a> style or randomised. Hover for source and algorithm.</p>

    <div class="hide" id="alert">blank</div>

    <nav class="subnav subtabs">
      <hr>
      <a class="active" href="#q_tab">Queneau</a>
      <a href="#r_tab">Random</a>
      <hr>
    </nav>

    <ul class="hide">
      <li>Clicks1: <a id="clicks1">1</a></li>
      <li>Clicks2: <a id="clicks2">1</a></li>
      <li>Clicks3: <a id="clicks3">1</a></li>
      <li>Clicks4: <a id="clicks4">1</a></li>
      <li>Clicks5: <a id="clicks5">1</a></li>
      <li>Clicks6: <a id="clicks6">1</a></li>
      <li>Clicks7: <a id="clicks7">1</a></li>
      <li>Clicks8: <a id="clicks8">1</a></li>
      <li>Clicks9: <a id="clicks9">1</a></li>
      <li>Clicks10: <a id="clicks10">1</a></li>
      <li>Clicks11: <a id="clicks11">1</a></li>
      <li>Clicks12: <a id="clicks12">1</a></li>
      <li>Clicks13: <a id="clicks13">1</a></li>
      <li>Clicks14: <a id="clicks14">1</a></li>
    </ul>
    <div class="hide" id="partsize">{{ part }}</div>
    <div class="hide" id="querydiv">{{ query }}</div>
    <div class="hide" id="corpusdiv">{{ corpus }}</div>
    <div class="hide" id="clickcount">0</div>
    <div class="hide" id="lollength">{{ lol|length }}</div>
  </div>

  <div class="subtab_content" id="q_tab">
    <p class="poetryButtons"><a id="emailQueneau" href=""><i class="fa fa-envelope"></i> Email this poem!</a></p>

    <div class="poetry">
      {% if (lol|length) != 0 %}
        <div id="poem">
        {% for n in range(1, lol|length + 1) %}
          <div class="fullLine">
            <img id="line{{ n }}Left" class="disable" src="{{ url_for('static', filename='images/basheau/cheveron-left.svg') }}">
            <div class="lines">
              {% for sens in lol[n-1] %}<span class="line" title="{{ sens[0] }}, {{ sens[2] }}">{{ sens[1][0] }} <form class="inlineform" action="../textresults" method="post"><input type="radio" name="corpus" value="{{ corpus }}" checked><input type="submit" name="query" value="{{ sens[1][1] }}"></form> {{ sens[1][2] }}</span>{% endfor %}
            </div>
            <img id="line{{ n }}Right" src="{{ url_for('static', filename='images/basheau/cheveron-right.svg') }}">
          </div>
        {% endfor %}
        </div>
      {% else %}
        <p>Not enough results found.</p>
      {% endif %}
    </div>

<script>
  // hide or show prev and next buttons for poem lines
  const lefties = document.querySelectorAll("[id$=Left]");
  lefties.forEach(l => l.addEventListener("click", () => {
    const num = l.id.slice(4,5);
    let clickCounter = document.getElementById(`clicks${num}`);
    let clickNum = parseInt(clickCounter.innerHTML);
    if (clickNum > 1) clickCounter.innerHTML = clickNum - 1;
    const sib = l.nextElementSibling;
    const righty = sib.nextElementSibling;
    if ( sib.scrollLeft === sib.clientWidth ) { l.classList.add("disable") }
    sib.scrollBy({ top: 0, left: -sib.clientWidth, behavior: 'smooth' });
    righty.classList.remove("disable");
  }));
  const righties = document.querySelectorAll("[id$=Right]");
  righties.forEach(r => r.addEventListener("click", () => {
    const partSize = parseInt(document.getElementById("partsize").innerHTML);
    const num = r.id.slice(4,5);
    let clickCounter = document.getElementById(`clicks${num}`);
    let clickNum = parseInt(clickCounter.innerHTML);
    if (clickNum < partSize) clickCounter.innerHTML = clickNum + 1;
    const sib = r.previousElementSibling;
    const lefty = sib.previousElementSibling;
    if ( sib.scrollLeft + sib.clientWidth === 
         sib.scrollWidth - sib.clientWidth ) { r.classList.add("disable") }
    sib.scrollBy({ top: 0, left: sib.clientWidth, behavior: 'smooth' });
    lefty.classList.remove("disable");
  }));
</script>

  </div>
  <!-- end q_tabs -->

  <div class="subtab_content" id="r_tab">
    <p class="poetryButtons"><button id="shuffle"><i class="fa fa-random"></i> Randomise poem!</button> <a id="emailRandom" href=""><i class="fa fa-envelope"></i> Email this poem!</a></p>
    <div id="random_poem" class="poetry">
      {% if all_sens|length != 0 %}
        {% for n in range(0, 14) %}
          {% set rid = ['subpoem', n|string]|join %}
          {% set rsens = all_sens|random %}
          <div id="{{ rid }}">
            <span title="{{ rsens[0] }}, {{ rsens[2] }}">{{ rsens[1][0] }} <form class="inlineform" action="../textresults" method="post"><input type="radio" name="corpus" value="{{ corpus }}" checked><input type="submit" name="query" value="{{ rsens[1][1] }}"></form> {{ rsens[1][2] }}</span><br>
          </div>
        {% endfor %}
      {% else %}
        No results found.
      {% endif %}
    </div>
  </div>
  <!-- end r_tabs -->

</section>
<!-- end tab poems -->





<!-- SOURCES -->
<section id="sources_tab" class="tab_content">

  <h2>Sources <span>{{ corpus }}</span></h2>

  <div class="indent">
    <p>Sorted by source. Hover for algorithm.</p>
  </div>

  <div class="sources">
    {% for file in all_files %}
      <p><strong>{{ file }}</strong> <a href="#"><i class="fa fa-chevron-up"></i></a></p>
      <ul>
        {% for sens in all_sens %}
          {% if file == sens[0] %}
            <li title="{{ sens[2] }}">...{{ sens[1][0] }} <form class="inlineform" action="../textresults" method="post"><input type="radio" name="corpus" value="{{ corpus }}" checked><input type="submit" name="query" value="{{ sens[1][1] }}"></form> {{ sens[1][2] }}...</li>
          {% endif %}
        {% endfor %}
      </ul>
      <br>
    {% endfor %}
  </div>
</section><!-- end tab sources -->




<!-- ALGORITHMS -->
<section id="algo_tab" class="tab_content">

  <h2>Algorithms <span>{{ corpus }}</span></h2>

  <div class="indent">
    <p>Sorted by algorithm. Hover for source.</p>
    <nav class="subnav tabx">
      <hr>
      <a href="#clinamen">Clinamen</a>
      <a href="#syzygy">Syzygy</a>
      <a href="#antinomy">Antinomy</a>
      <hr>
    </nav>
  </div>

  <div class="algos">
    {% for algo in ['Clinamen', 'Syzygy', 'Antinomy'] %}
      {% if algo == 'Clinamen' %}
        <p id="clinamen">
          {% if clin_sens|length > 0 %}
            <strong>Clinamen - {{ clin_sens|length }} results for {{ clin_words|length }} pataphysicalised {% if clin_words|length == 1 %}reverberation{% else %}reverberations{% endif %} found in {{ clin_files|length }} {% if clin_files|length == 1 %}origin{% else %}origins{% endif %}. <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% else %}
            <strong>Clinamen - Sorry, no pataphysicalised reverberations found! <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% endif %}
        </p>
      {% endif %}
      {% if algo == 'Syzygy' %}
        <p id="syzygy">
          {% if sys_sens|length > 0 %}
            <strong>Syzygy - {{ sys_sens|length }} results for {{ sys_words|length }} pataphysicalised {% if sys_words|length == 1 %}reverberation{% else %}reverberations{% endif %} found in {{ sys_files|length }} {% if sys_files|length == 1 %}origin{% else %}origins{% endif %}. <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% else %}
            <strong>Syzygy - Sorry, no pataphysicalised reverberations found! <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% endif %}
        </p>
      {% endif %}
      {% if algo == 'Antinomy' %}
        <p id="antinomy">
          {% if anti_sens|length > 0 %}
            <strong>Antinomy - {{ anti_sens|length }} results for {{ anti_words|length }} pataphysicalised {% if anti_words|length == 1 %}reverberation{% else %}reverberations{% endif %} found in {{ anti_files|length }} {% if anti_files|length == 1 %}origin{% else %}origins{% endif %}. <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% else %}
            <strong>Antinomy - Sorry, no pataphysicalised reverberations found! <a href="#"><i class="fa fa-chevron-up"></i></a></strong>
          {% endif %}
        </p>
      {% endif %}
      <ul>
        {% for sens in all_sens %}
          {% if sens[2] == algo %}
            <li title="{{ sens[0] }}">...{{ sens[1][0] }} <form class="inlineform" action="../textresults" method="post"><input type="radio" name="corpus" value="{{ corpus }}" checked><input type="submit" name="query" value="{{ sens[1][1] }}"></input></form> {{ sens[1][2] }}...</li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endfor %}
  </div>
</section><!-- end tab algorithms -->


</div><!-- end tab_container -->

</main>

<script>
  // select relevant radio button
  const corpus = "{{ corpus }}"; // jinja
  document.getElementById(corpus).checked = true;
  // randomise poetry
  const n = {{ all_sens|length }};
  const sentences = {{ all_sens|tojson }};
</script>
<script type="text/javascript" src="{{ url_for('static', filename='meta/shared.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='meta/text.js') }}"></script>

{% endblock %}