{% extends "layout.html" %}
		{% block content %}
       <div class="all">
         <h1>These are all the files</h1>
<!--           {{ listingfiles }} <br>
          {{ jsonfiles }} <br>
          {{ listingdirectories }} -->
          <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 }} 
	            				<p>{{listofdicts[0]["name"]}}<br>
	            				{{listofdicts[0]["email"]}}<br>
	            				{{listofdicts[0]["friend"]}}<br>
	            				{{listofdicts[0]["content"]}}</p>
            				</div>
            			{% 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 }} 
	            				<p>{{listofdicts[1]["name"]}}<br>
	            				{{listofdicts[1]["email"]}}<br>
	            				{{listofdicts[1]["friend"]}}<br>
	            				{{listofdicts[1]["content"]}}</p>
            				</div>
            			{% 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 }} 
	            				<p>{{listofdicts[2]["name"]}}<br>
	            				{{listofdicts[2]["email"]}}<br>
	            				{{listofdicts[2]["friend"]}}<br>
	            				{{listofdicts[2]["content"]}}</p>
            				</div>
            			{% endif %}
            		{% endfor %}
            {% endif %}
 		  
 		  {% endfor %}
 		  </div>
       </div>
       {% endblock %}