<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'templates/common_head.html' %}
    <title>WU - Annotations: {{ group_name }}</title>
    <link rel="stylesheet" href="/styles/annotation_styles.css"> {# Link to the specific CSS #}
</head>
<body>
    {% include 'templates/navbar.html' %}
    <div class="layout-container">
        <main class="layout-main">
            <div class="layout-sticky-left"> {# Left Pane #}
                 <header>
                    <h1 class="album-name">Annotations</h1> {# Use album-name style for consistency #}
                    <h2 class="artist-name">{{ group_name }}</h2> {# Use artist-name style #}
                 </header>
                 {# Potentially add other sticky content here if needed #}
            </div>
            <div class="layout-content-right"> {# Right Pane #}
                {% for url, annotations_for_url in grouped_annotations.items() %}
                    <p class="annotation-url"><a href="{{ url }}" target="_blank">{{ url }}</a></p>
                    {% for annotation in annotations_for_url %}
                        <div class="annotation"> {# Individual annotation container #}
                            <div class="annotation-text">
                                {% set selection_type = annotation.selection.type if annotation.selection else 'page' %}

                                {% if selection_type == 'text' and annotation.selection.selectedText %}
                                    <blockquote>{{ annotation.selectedText_html | safe }}</blockquote>
                                {% elif selection_type == 'image' and annotation.selection.selectedImage %}
                                    <img class="annotation-image" src="{{ annotation.selection.selectedImage }}">
                                {% endif %}

                                {% if annotation.annotation %}
                                    {{ annotation.annotation_html | safe }}
                                {% endif %}
                            </div>
                            <div class="annotation-date">{{ annotation.timestamp_str }}</div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </main>
    </div>
</body>
</html> 