{% extends "base.html" %}

{% block content %}

<div class="action">
  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
  <button  onclick="addRandomTitle()" title="add one">+</button>
  <button  onclick="removeRandomTitle()"  title="remove one">-</button>
</div>

<div class="row">
  <div class="col m-5">
    <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
    <p class="h1 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 %}