{% extends "layout.html" %}
{% block content %}
    <div class="description">
		<h2 style = "text-align: center;">{{ itemid }}</h2>

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

<div class="col-lg-3 col-md-4 col-xs-6 thumb">

{% set count=[0] %}
{% for item in datafromjson %}

    {% if item.lower().endswith(('.png', '.jpg', '.jpeg')) %}
        <div>
          <img class="img-responsive" src=" ../{{ item }}">
        </div>

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

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

    {% elif item.lower().endswith(('.html')) %}
        {{ textfiles[count[0]] }}
        {% if count.append(count.pop() + 1) %}{% endif %}
        <br/><br/><br/>
    {% endif %}

{% endfor %}
</div>

{% endblock %}