{% 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">


        {% 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>
            {% endif %}

        {% endfor %}

        {% if textfile is defined %}
        	<p>{{ textfile }}</p>
        {% endif %}


	</div>
	{% endblock %}