<!DOCTYPE html>
<html lang="en">
    <header>
        <link rel="shortcut icon" href="index_favicon.ico">
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
        <title>0x01fe.net - Music</title>
    </header>
    <body>
        <div class="header">
            <h1>Music</h1>
            {{ status|safe }}
        </div>
        <div class="container">
            <!-- Sidebar -->
            <div class="sidebar">
                <a href="/"><u>Home</u></a><br>
                <a href="/category/games/">Games</a><br>
                <a href="/music/">Music</a><br>
                <a href="/category/motion-pictures/">Motion Picture</a><br>
                <a href="/programming/">Programming</a><br>
                <a href="/about/">About</a><br>
                <a href="/login/">Login</a>
            </div>

            <!-- Main Page -->
            <!-- Get it? D-Log? Like digital log? -->
            <div class="dlog">
                {% for post in posts %}
                    <div class="post">
                        <div class="post-date">
                            {{ post.date_str }}
                        </div>
                        {{ post.body|safe }}
                    </div>
                {% endfor %}
            </div>

            <div class="albums">
                <h1>Top Albums</h1>
                <div class="real-albums">
                    {% for album in top_albums %}
                        <a title="{{ album.album_name}} by {{ album.artist_name }} - {{ album.listen_time }} Hours">
                            <img src="{{ album.album_cover }}">
                        </a>
                        {% if loop.index % 3 == 0 %}
                            <br>
                        {% endif %}
                    {% endfor %}
             </div>
            </div>
        </div>
    </body>
</html>
