{% set page_title = ('Replies' if comments_info['is_replies'] else 'Comments page ' + comments_info['page_number']) %}
{% import "comments.html" as comments with context %}

{% if not slim %}
    {% extends "base.html" %}
    {% block style %}
        <link href="/youtube.com/static/comments.css" rel="stylesheet">
    {% endblock style %}
{% endif %}

{% block main %}
    <section class="comments-area">
        {% if not comments_info['is_replies'] %}
            <section class="video-metadata">
                <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
                    <img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px">
                </a>
                <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</a>

                <h2>Comments page {{ comments_info['page_number'] }}</h2>
                <span>Sorted by {{ comments_info['sort_text'] }}</span>
            </section>
        {% endif %}

        {% if not comments_info['is_replies'] %}
            <div class="comment-links">
                {% for link_text, link_url in comments_info['comment_links'] %}
                    <a class="sort-button" href="{{ link_url }}">{{ link_text }}</a>
                {% endfor %}
            </div>
        {% endif %}

        <div class="comments">
            {% for comment in comments_info['comments'] %}
                {{ comments.render_comment(comment, comments_info['include_avatars'], slim) }}
            {% endfor %}
        </div>
        {% if 'more_comments_url' is in comments_info %}
            <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
        {% endif %}
    </section>

    {% if settings.use_comments_js %}
        <script src="/youtube.com/static/js/common.js"></script>
        <script src="/youtube.com/static/js/comments.js"></script>
    {% endif %}
{% endblock main %}