{% extends "base.html" %}

{% block content %}

{% include "header.html" %}

<main>

  <!-- MAIN SEARCH -->
  <form class="mainsearch" action="../imageresults" method="post">
    <fieldset>
      <input id="flickr" type="radio" name="img_choice" value="flickr" checked><label for="flickr">Flickr</label>
      <input id="bing" type="radio" name="img_choice" value="bing"><label for="bing">Bing</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="#spiral_tab">Spiral</a>
    <a href="#list_tab">List</a>
    <hr>
  </nav>


<div class="indent">
  <strong>Pataphysicalisation: &nbsp;&nbsp; </strong>
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ oldquery }}"><input class="hide" name="img_choice" value="{{ choice }}"></form> ==
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ translations.0 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form> ==
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ translations.1 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form> ==
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ translations.2 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form> ==
  [<form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.0 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.1 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.2 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.3 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.4 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.5 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.6 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.7 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.8 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>, 
  <form class="inlineform" action="../imageresults" method="post"><input type="submit" name="query" value="{{ queries.9 }}"><input class="hide" name="img_choice" value="{{ choice }}"></form>]
</div>

<!-- JAVASCRIPT -->
<meta id="iquery0" data-query="{{ queries.0 }}">
<meta id="iquery1" data-query="{{ queries.1 }}">
<meta id="iquery2" data-query="{{ queries.2 }}">
<meta id="iquery3" data-query="{{ queries.3 }}">
<meta id="iquery4" data-query="{{ queries.4 }}">
<meta id="iquery5" data-query="{{ queries.5 }}">
<meta id="iquery6" data-query="{{ queries.6 }}">
<meta id="iquery7" data-query="{{ queries.7 }}">
<meta id="iquery8" data-query="{{ queries.8 }}">
<meta id="iquery9" data-query="{{ queries.9 }}">
<!-- SET CURRENT RADIO BUTTON -->
<meta id="ichoice" data-choice="{{ choice }}">



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


<!-- SPIRAL -->
<section id="spiral_tab" class="tab_content">
  <h2>Spiral <span>{{ choice }}</span></h2>
  <div class="indent">
    <p>The results are displayed in golden spiral form in pataphysical fashion. Hover for title, click for source.</p>
  </div>
  <div class="poetry">
    <div id="img_spiral_div" class="img_empty">
      <!-- Javascript puts spiral code here -->
    </div>
  </div>
</section> <!-- end spiral -->

<!-- LIST -->
<section id="list_tab" class="tab_content">
  <h2>List <span>{{ choice }}</span></h2>
  <div class="indent">
    <p>Images - Hover for title, click for source.</p>
  </div>
  <div class="poetry">
    <div id="img_list_div" class="img_empty">
      <!-- Javascript puts list code here -->
    </div>
  </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/image.js') }}"></script>
<script>
  // used by Python API calls
  const singleQuote = /&#39;/g;
  const doubleQuote = /&#34;/g;
  const ampersand = /&amp;/g;
  const imageString1 = "{{ images_imgs }}".replace(singleQuote, "'");
  const imageString2 = imageString1.replace(doubleQuote, '"');
  const imageString3 = imageString2.replace(ampersand, '&');
  const imageArray = eval( imageString3 );
  console.log(imageArray);
  createSpiral( imageArray );
  //update radio buttons for main search
  const imageRadio = document.getElementById(ichoice.dataset.choice);
  imageRadio.checked = true;
</script>

{% endblock %}