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


<!-- <div class="allcontent">
 -->
<div class="item column column-left">
{% 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 column-right">
  <h2>{{ itemid }}. {{index_dict[itemid]}}</h2>
{% set count=[0] %}
{% for item in datafromjson %}
    {% if item.lower().endswith(('.html')) %}
        <span class="h3-titles"> {{ namefile[count[0]][12:-5] }}</span><br><br>
        {{ 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,9) %}
  {% 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,11) %}
  {% 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">index</a></li>
    <li class="about"><a href="/about">about</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 %}