<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
    <!-- <style>html { scroll-behavior: smooth; }</style> -->
</head>
<!-- <body class="horizontal-mode"> -->

<body>
    <h1>{{ title }}</h1>
    {{ back_button|safe }}

    <div>
        <label for="columnCountInput">Column Count: </label>
        <input type="number" id="columnCountInput" min="1" max="10" value="{{ col_count }}">
    </div>
    <!-- <div style="text-align:center; margin-bottom: 1em;">
        <button id="toggleLayout" style="padding: 6px 12px;">Switch to Justified</button>
    </div> -->
    <p align="center"> Images on this page - {{ no_of_imgs }}, on this board - {{ no_of_imgs_board }}</p>
    <p align="right"> Created on - {{ timestamp }}</p>
    <p align="right">Created with boards version: {{ version }}</p>

    <hr>

    <div class="masonry-container">
        {{ media_content }}
    </div>

    {{ pagination }}
    
    {{ back_button|safe }}
</body>

</html>