{% extends "base.html" %}

{% block content %}

<div class="action">
  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ new display of random titles from dataset;</span>
  </span>
  <button onclick="addRandomTitle()" title="add one">+</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ add a random title from dataset;</span>
  </span>
  <button onclick="removeRandomTitle()" title="remove one">-</button>
  <span class="info" style="display: none;">
    <span class="operations">↝ remove a random title from page;</span>
  </span>
  <button id="notes-operations" onclick="hideShowInfo()">?</button>
  <a href="{{ url_for('main.index') }}" class="search-back text-left" title="back to search">search</a>
</div>

<div class="row">
  <div class="col m-5">
    <p class="h1 h1-s text-center">Poetics of Titles</p>
  </div>
</div>

<div id="page-titles">
  {% for title in titles %}

    <span class="title">
      <a href="{{ url_for('search.id_search', id=title['id'], core='all') }}">
        {{ title['title'] }}
      </a>
    </span>

    <span class="joint">&</span>

  {% endfor %}
</div>

<script type="text/javascript">
  var titles = {{ additional_titles|tojson }};

  x = 0;

  function addRandomTitle(){
    var record_array = titles[x];
    document.querySelector('#page-titles').innerHTML += "<a href='/search/id?id=" + record_array['id'] + "&core=all'><span class='title'>" + record_array['title'] + "</span></a><span class='joint'>&</span>";
    x++;
    window.scrollTo(0, document.body.scrollHeight);
  }
</script>

{% endblock %}