{% extends "layout.html" %}
{% block content %}
<div class="description">

<h2 style = "text-align: center;">{{ itemid }}</h2>

<!--passing files
		<p>{{ datafromjson }}</p>-->

<div class="allcontent">

<div class="item column">
{% set count=[0] %}
{% for item in datafromjson %}
    {% if item.lower().endswith(('.png', '.jpg', '.jpeg')) %}
          <img class="img-responsive" src=" ../{{ item }}">

    {% elif item.lower().endswith(('.mp4')) %}
          <video width="320" height="240" controls><source src="../{{ item }}" type="video/mp4">Your browser does not support the video tag.</video>

		{% elif item.lower().endswith(('.mp3')) %}
          <audio controls><source src="../{{ item }}" type="audio/mpeg">Your browser does not support the audio tag.</audio>

{% endif %}
{% endfor %}
</div>
<div class="text column">
{% set count=[0] %}
{% for item in datafromjson %}
    {% if item.lower().endswith(('.html')) %}
        {{ textfiles[count[0]] }}
        {% if count.append(count.pop() + 1) %}{% endif %}
        <br/><br/><br/>
    {% endif %}
{% endfor %}
</div>

</div>
</div>

{% set int_itemid = itemid|int %}

{% if itemid != "31" %}
 {% set countplus = int_itemid + 1 %}

 {% if int_itemid in range(1,10) %}
  {% set addressplus = "/description?id=" + "0" + countplus|string %}
 {% else %}
  {% set addressplus = "/description?id=" + countplus|string %}
 {% endif %}

{% else %}
 {% set addressplus = "/description?id=" + itemid %}
{% endif %}



{% if itemid != "01" %}
 {% set countminus = int_itemid - 1 %}

 {% if int_itemid in range(1,10) %}
  {% set addressminus = "/description?id=" + "0" + countminus|string %}
 {% else %}
  {% set addressminus = "/description?id=" + countminus|string %}
 {% endif %}

{% else  %}
 {% set addressminus = "/description?id=" + itemid %}
{% endif %}



<nav class="nav_bottom">
  <div id="bottom_descrip_left">
    <li class="index"><a href="/">index</a></li>
  </div>

  <div id="bottom_descrip_right">
    <li class="next_item"><a href={{addressplus}}>next item</a></li>
    <li class="prev_item"><a href={{addressminus}}>previous item</a></li>
    <li class="no_here">{{itemid}}/31</li>
  </div>
</nav>
{% endblock %}