{% import "common_elements.html" as common_elements %}

{% macro render_comment(comment, include_avatar, timestamp_links=False) %}
    <div class="comment-container">
        <div class="comment">
            <a class="author-avatar" href="{{ comment['author_url'] }}" title="{{ comment['author'] }}">
                {% if include_avatar %}
                    <img class="author-avatar-img" src="{{ comment['author_avatar'] }}">
                {% endif %}
            </a>
            <address>
                <a class="author" href="{{ comment['author_url'] }}" title="{{ comment['author'] }}">{{ comment['author'] }}</a>
            </address>
            <a class="permalink" href="{{ comment['permalink'] }}" title="permalink">
                <time datetime="">{{ comment['time_published'] }}</time>
            </a>
            {% if timestamp_links %}
                <span class="text">{{ common_elements.text_runs(comment['text'])|timestamps|safe }}</span>
            {% else %}
                <span class="text">{{ common_elements.text_runs(comment['text']) }}</span>
            {% endif %}

            <span class="likes">{{ comment['likes_text'] if comment['like_count'] else ''}}</span>
            <div class="bottom-row">
                {% if settings.use_comments_js and comment['reply_count'] %}
                    <details class="replies" src="{{ comment['replies_url'] }}">
                        <summary>{{ comment['view_replies_text'] }}</summary>
                        <a href="{{ comment['replies_url'] }}" class="replies-open-new-tab" target="_blank">Open in new tab</a>
                        <div class="comment_page">loading..</div>
                    </details>
                {% else %}
                    <a href="{{ comment['replies_url'] }}" class="replies">{{ comment['view_replies_text'] }}</a>
                {% endif %}
                {% if 'delete_url' is in comment %}
                    <a href="{{ comment['delete_url'] }}" target="_blank">Delete</a>
                {% endif %}
            </div>
        </div>

    </div>
{% endmacro %}

{% macro video_comments(comments_info) %}
    <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>
    <div class="comments">
        {% for comment in comments_info['comments'] %}
            {{ render_comment(comment, comments_info['include_avatars'], True) }}
        {% 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 %}
{% endmacro %}

{% macro comment_posting_box(info) %}
    <form action="{{ info['form_action'] }}" method="post" class="comment-form">
        <div id="comment-account-options">
            <label for="account-selection">Account:</label>
            <select id="account-selection" name="channel_id">
                {% for account in info['accounts'] %}
                    <option value="{{ account[0] }}">{{ account[1] }}</option>
                {% endfor %}
            </select>
            <a href="/https://youtube.com/login" target="_blank">Add account</a>
        </div>
        <textarea name="comment_text"></textarea>
        {% if info['include_video_id_input'] %}
            <input type="hidden" name="video_id" value="{{ info['video_id'] }}">
        {% endif %}
        <button type="submit" class="post-comment-button">{{ 'Post reply' if info['replying'] else 'Post comment' }}</button>
    </form>
{% endmacro %}