<!DOCTYPE html>
<html>
    <head>
        {% load thumbnail %}

        <link rel="stylesheet" href="{{STATIC_URL}}css/normalize.css" />
        <link rel="stylesheet" href="{{STATIC_URL}}css/browse.css" />

        <script type="text/javascript" src="{{STATIC_URL}}javascript/jquery.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}javascript/jquery.url.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}javascript/browse.js"></script>

        <title>Image Browser</title>
    </head>
    <body>
        <ul id="thumbnails">
            {% for name, file in files.items %}
                <li data-file-url="{{MEDIA_URL}}{{file.name}}">
                    {% thumbnail file 150x150 as image %}
                    <img src="{{image.url}}" height="{{image.height}}" width="{{image.width}}" alt="{{name}}" title="{{name}}" />
                    <label class="file-name">{{name}}</label>
                </li>
            {% endfor %}
        </ul>
    </body>
</html>
