<html>
    <head>
        <title>Image Tiles -- {{ folder_location }}</title>
        <link rel="stylesheet" href="static/normalize.css">
        <link rel="stylesheet" href="static/sakura.css">
        <link rel="stylesheet" href="static/main.css">
    </head>
    <body>
        <h1>Image Tiles</h1>
        <div id="options">
            <div id="left">
                <p><h6>Folder Location: </h6><code>{{ folder_location }}</code></p>
                <p><h6>Max Number of Images: </h6><code>{{ num_images }}</code></p>
            </div>
            <div id="right">
                <p><h6>Normalization: </h6><code>{{ normalization }}</code></p>
                <p><h6>Render Method: </h6><code>{{ render_method }}</code></p>
            </div>
        </div>
        <p><h6>Items per Row: </h6><input name="items_per" type="text" value=4 oninput="set_items_per_row(this.value)"></input></p>
        <ul>
        {% for item in items %}
            <li><a  href="{{item}}"><img src="{{item}}" /></a></li>
        {% endfor %}
        </ul>

        <script src="static/main.js"></script>
    </body>
</html>