{% from 'templates/audio_player.html' import audio_player %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'templates/common_head.html' %}
    <title>WU - {{ album.name }}</title>
    <link rel="stylesheet" href="/styles/album_styles.css">
</head>
<body>
    {% include 'templates/navbar.html' %}
    <div class="layout-container">
        <main class="layout-main">
            <div class="layout-sticky-left">
                <header>
                    <h1 class="album-name">{{ album.name }}</h1>
                    <h2 class="artist-name">{{ artist_str }}</h2>
                </header>
                {% if cover_path %}
                <img src="{{ cover_path }}" alt="Album Art for {{ album.name }}" class="album-art">
                {% else %}
                <div class="album-art-placeholder"></div> {# Optional: Add a placeholder style #}
                {% endif %}
                
                {{ audio_player() }}
            </div>
            <div class="layout-content-right">
                {% for review in album_reviews %}
                <div class="annotation">
                    {# Use | safe filter if review.markdown contains HTML, otherwise Jinja2 escapes it #}
                    <span class="annotation-text">{{ review.html_text | safe }}</span>
                    <span class="annotation-date">{{ review.formatted_date }}</span>
                </div>
                {% endfor %}
                
                {% for song in songs_with_reviews %}
                    <a class="song-name" href="https://www.youtube.com/watch?v={{ song.id }}" target="_blank">{{ song.name }}</a>
                    {% for review in song.reviews %}
                    <div class="annotation">
                        <span class="annotation-text">{{ review.html_text | safe }}</span>
                        <span class="annotation-date">{{ review.formatted_date }}</span>
                    </div>
                    {% endfor %}
                {% endfor %}
                    
            </div>
        </main>
    </div>
</body>
</html> 