{% extends "base.html" %}

{% block content %}

{% include "header.html" %}

<main>

<!-- MAIN SEARCH -->
<form class="mainsearch" action="../videoresults" method="post">
  <fieldset>
    <input id="youtube" type="radio" name="vid_choice" value="youtube" checked><label for="youtube">Youtube</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>

<nav class="subnav tabs">
  <hr>
  <a class="active" href="#vid_spiral_tab">Spiral</a>
  <a href="#vid_list_tab">List</a>
  <hr>
</nav>

<div class="indent">
  <strong>Pataphysicalisation: &nbsp;&nbsp; </strong>
  <form class="inlineform" action="../videoresults" method="post"><input type="submit" name="query" value="{{ query }}"></form> ==
  <form class="inlineform" action="../videoresults" method="post"><input type="submit" name="query" value="{{ translations.0 }}"></form> ==
  <form class="inlineform" action="../videoresults" method="post"><input type="submit" name="query" value="{{ translations.1 }}"></form> ==
  <form class="inlineform" action="../videoresults" method="post"><input type="submit" name="query" value="{{ translations.2 }}"></form>
</div>


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

<!-- SPIRAL -->
<section id="vid_spiral_tab" class="tab_content">
  <h2>Spiral <span>YouTube</span></h2>
  <p class="indent">The results are displayed in golden spiral form in pataphysical fashion. Hover for title on smaller images, click for source.</p>
  <div class="poetry">
    <div id="vid_spiral_div">
      <!-- Javascript will populate this -->
    </div>
  </div>
</section> <!-- end spiral -->

<!-- LIST -->
<section id="vid_list_tab" class="tab_content">
  <h2>List <span>YouTube</span></h2>
  <p class="indent">Click to play.</p>
  
  <div class="poetry">
    {% if videos_len > 0 %}
      <div class="vid_list">
        {% for vid in videos_vids %}
          <div id="vid_list_div">
            <iframe width="100%" height="auto" src="https://www.youtube.com/embed/{{ vid.2 }}?controls=0&rel=0&showinfo=0&modestbranding=0&controls=0" frameborder="0"></iframe>
          </div>
        {% endfor %}
      </div>
    {% endif %}
    {% if videos_len == 0 %}
      Videos - Sorry, no pataphysicalised reverberations found!
    {% endif %}
  </div>
</section> <!-- end list -->

</div> <!-- end tabs -->

</main>

<script type="text/javascript" src="{{ url_for('static', filename='meta/shared.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='meta/video.js') }}"></script>
<script>
  const vidsString = "{{ videos_vids }}";
  const vidsStringRE = vidsString.replace(/&#39;/g, `"`);
  createVideoSpiral( JSON.parse(vidsStringRE) );
</script>

{% endblock %}