{% extends "layout.html" %}
		{% block content %}
       <div class="all">
         <h1>These are all the files</h1>
          {{ listingfiles }} <br>
          {{ jsonfiles }} <br>
          {{ listofdicts }} <br>
          <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          {% for filename in listingfiles %}
            {% if filename.lower().endswith(('.png', '.jpg', '.jpeg')) %}
            	<img class="img-responsive" src=" ../{{ filename }}">
            		{% for jsonfile in jsonfiles %}
            			{% if filename[0:9] == jsonfile[0:9] %}
            				<div class="descrip">
	            				{{ jsonfile }} 
	            				{% for dict in listofdicts %}
	            					{% if jsonfile[6:9]==dict["id"] %}
		            					<p>{% for key, value in dict.items() %}
		            					{{key}}: {{value}}<br>
			            				{% endfor %}</p>
			            			{% endif %}
			            		{% endfor %}
            				</div>
            				{% break %}
            			{% endif %}
            		{% endfor %}

            {% elif filename.lower().endswith(('.mp4')) %}
            	<video width="320" height="240" controls><source src="../{{filename}}" type="video/mp4">
            		Your browser does not support the video tag.
				</video>
				{% for jsonfile in jsonfiles %}
            			{% if filename[0:9] == jsonfile[0:9] %}
            				<div class="descrip">
	            				{{ jsonfile }} 
	            				{% for dict in listofdicts %}
	            					{% if jsonfile[6:9]==dict["id"] %}
		            					<p>{% for key, value in dict.items() %}
		            					{{key}}: {{value}}<br>
			            				{% endfor %}</p>
			            			{% endif %}
			            		{% endfor %}
            				</div>
            				{% break %}
            			{% endif %}
            	{% endfor %}

			{% elif filename.lower().endswith(('.mp3')) %}
				<audio controls><source src="../{{filename}}" type="audio/mpeg">
	  				Your browser does not support the audio tag.
				</audio>
				{% for jsonfile in jsonfiles %}
            			{% if filename[0:9] == jsonfile[0:9]%}
            				<div class="descrip">
	            				{{ jsonfile }} 
	            				{% for dict in listofdicts %}
	            					{% if jsonfile[6:9]==dict["id"] %}
		            					<p>{% for key, value in dict.items() %}
		            					{{key}}: {{value}}<br>
			            				{% endfor %}</p>
			            			{% endif %}
			            		{% endfor %}
            				</div>
            				{% break %}
            			{% endif %}
            	{% endfor %}
            {% endif %}
 		  
 		  {% endfor %}
 		  </div>
       </div>
       {% endblock %}