{% if theme() and file_exists('app/templates/themes/' + theme() + '/base.html') -%}
    {% extends 'themes/' + theme() + '/base.html' -%}
{% else -%}
    {% extends "base.html" -%}
{% endif -%} -%}
{% from 'bootstrap/form.html' import render_form -%}

{% block app_content -%}
<script type="text/javascript" nonce="{{ session['nonce'] }}">
    var toBeHidden = Array();   // this list of comment IDs will be iterated over in setupHideButtons() and the 'hide' button clicked
</script>
<div class="row">
    <div class="col-12 col-md-8 position-relative main_pane">
        {% include 'post/_post_full.html' -%}
        {% if post.comments_enabled -%}
            {% if current_user.is_authenticated -%}
                {% if current_user.verified -%}
                    <div class="row post_reply_form">
                        <hr class="mt-1" />
                        <div class="col">
                            <div class="reply_form_inner position-relative">
                                {% if post.community.ap_id and '@beehaw.org' in post.community.ap_id -%}
                                    <p>{{ _('This post is hosted on beehaw.org which has <a href="https://docs.beehaw.org/docs/core-principles/what-is-beehaw/" target="_blank" rel="nofollow">higher standards of behaviour than most places. Be nice</a>.') }}</p>
                                {% endif -%}
                                {% if post.community.posting_warning -%}
                                    <p align="center">{{ post.community.posting_warning|safe }}</p>
                                {% endif -%}
                                {{ render_form(form) }}
                                {% if not low_bandwidth -%}
                                    {% if markdown_editor -%}
                                        <script nonce="{{ session['nonce'] }}">
                                            window.addEventListener("load", function () {
                                                var downarea = new DownArea({
                                                    elem: document.querySelector('#body'),
                                                    resize: DownArea.RESIZE_VERTICAL,
                                                    hide: ['heading', 'bold-italic'],
                                                    value: document.getElementById("body").value
                                                });
                                                setupAutoResize('body');
                                            });
                                        </script>
                                    {% else -%}
                                        <!-- <a href="#" aria-hidden="true" id="post_reply_markdown_editor_enabler" class="markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a> -->
                                    {% endif -%}
                                {% endif -%}
                            </div>
                        </div>
                        {% if replies -%}
                        <hr class="mt-4" />
                        {% endif -%}
                    </div>
                {% else -%}
                    <p><a href="{{ url_for('auth.validation_required') }}">{{ _('Verify your email address to comment') }}</a></p>
                {% endif -%}
            {% else -%}
                <p><a href="{{ url_for('auth.login', next='/post/' + str(post.id)) }}">{{ _('Log in to comment') }}</a></p>
            {% endif -%}
        {% else -%}
            <p>{{ _('Comments are disabled.') }}</p>
        {% endif -%}
        {% if replies -%}
        <h2 class="visually-hidden">{{ post.reply_count }} {{ _('Comments') }}</h2>
        <div id="post_replies" class="row">
            <div class="col">
                <div class="btn-group mt-1 mb-2">
                    <a href="?sort=hot#post_replies" title="{{ _('Sort by magic') }}" class="btn btn-sm {{ 'btn-primary' if request.args.get('sort', '') == '' or request.args.get('sort', '') == 'hot' else 'btn-outline-secondary' }}" rel="nofollow noindex">
                        {{ _('Hot') }}
                    </a>
                    <a href="?sort=top#post_replies" title="{{ _('Comments with the most upvotes') }}" class="btn  btn-sm {{ 'btn-primary' if request.args.get('sort', '') == 'top' else 'btn-outline-secondary' }}" rel="nofollow noindex">
                        {{ _('Top') }}
                    </a>
                    <a href="?sort=new#post_replies" title="{{ _('Show newest first') }}" class="btn  btn-sm {{ 'btn-primary' if request.args.get('sort', '') == 'new' else 'btn-outline-secondary' }}" rel="nofollow noindex">
                        {{ _('New') }}
                    </a>
                </div>
                {% macro render_comment(comment) -%}
                    <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].score <= -10 -%}low_score{% endif -%}
                        {% if comment['comment'].author.id == post.author.id -%}original_poster{% endif -%}"
                         {% if comment['comment'].language_id and comment['comment'].language.code != 'en' -%} lang="{{ comment['comment'].language.code }}"{% endif %}
                         aria-level="{{ comment['comment'].depth + 1 }}" role="treeitem" aria-expanded="true" tabindex="0">
                        <div class="limit_height">{% if not comment['comment'].author.indexable -%}<!--googleoff: all-->{% endif -%}
                            <div class="comment_author">
                                {% with collapsed = (comment['comment'].score < reply_collapse_threshold or comment['comment'].deleted) -%}
                                    {{ render_username(comment['comment'].author) }}
                                {% endwith -%}
                                {% if comment['comment'].author.id == post.author.id -%}<span title="Submitter of original post" aria-label="{{ _('Post creator') }}" class="small">[OP] </span>{% endif -%}
                                <a href="#comment_{{ comment['comment'].id }}" class="text-muted small" aria_label="{{ _('When: ') }}">{{ comment['comment'].posted_at_localized(locale) }}{% if comment['comment'].edited_at -%}, edited {{ arrow.get(comment['comment'].edited_at).humanize(locale=locale) }} {% endif -%}</a>
                                <a class="unhide" href="#"><span class="fe fe-expand"></span></a>
                                {% if comment['comment'].reports and current_user.is_authenticated and post.community.is_moderator(current_user)%}
                                    <span class="red fe fe-report" title="{{ _('Reported. Check comment for issues.') }}"></span>
                                {% endif -%}
                            </div>
                            <div class="comment_body hidable {% if comment['comment'].reports and current_user.is_authenticated and post.community.is_moderator(current_user) -%}reported{% endif -%}">
                                {% if comment['comment'].deleted -%}
                                  {% if comment['comment'].deleted_by is none or comment['comment'].deleted_by != comment['comment'].user_id -%}
                                    <p>Deleted by moderator</p>
                                  {% else -%}
                                    <p>Deleted by author</p>
                                  {% endif -%}
                                {% else -%}
                                  {{ comment['comment'].body_html | community_links | safe }}
                                {% endif -%}
                            </div>{% if not comment['comment'].author.indexable -%}<!--googleon: all-->{% endif -%}
                        </div>
                        <div class="comment_actions hidable">
                            {% if post.comments_enabled -%}
                                <a href="{{ url_for('post.add_reply', post_id=post.id, comment_id=comment['comment'].id) }}" rel="nofollow noindex"><span class="fe fe-reply"></span> reply</a>
                            {% endif -%}
                            <div class="voting_buttons_new">
                            {% with comment=comment['comment'] -%}
                                {% include "post/_comment_voting_buttons.html" -%}
                            {% endwith -%}
                            </div>
                            <div class="hide_button">
                                {% if comment['comment'].score <= reply_collapse_threshold or comment['comment'].deleted -%}
                                    <a href='#'><span class="fe fe-expand"></span></a>
                                {% else -%}
                                    <a href='#'><span class="fe fe-collapse"></span></a>
                                {% endif -%}
                            </div>
                            <div class="notify_toggle">
                                {% if current_user.is_authenticated and current_user.verified -%}
                                    {% include "post/_reply_notification_toggle.html" -%}
                                {% endif -%}
                            </div>
                            <a href="{{ url_for('post.post_reply_options', post_id=post.id, comment_id=comment['comment'].id) }}" class="comment_actions_link" rel="nofollow noindex" aria-label="{{ _('Comment options') }}"><span class="fe fe-options" title="Options"> </span></a>
                        </div>
                        {% if comment['replies'] -%}
                            {% if comment['comment'].depth <= THREAD_CUTOFF_DEPTH -%}
                                <div class="replies hidable" role="group">
                                    {% for reply in comment['replies'] -%}
                                      {{ render_comment(reply) | safe }}
                                    {% endfor -%}
                                </div>
                            {% else -%}
                                <div class="continue_thread hidable">
                                    <a href="{{ url_for('post.continue_discussion', post_id=post.id, comment_id=comment['comment'].id, _anchor='replies') }}">
                                        Continue thread</a>
                                </div>
                            {% endif -%}
                        {% endif -%}
                    </div>
                    {% if comment['comment'].score <= reply_collapse_threshold or comment['comment'].deleted -%}
                        <script nonce="{{ session['nonce'] }}" type="text/javascript">
                            toBeHidden.push({{ comment['comment'].id }});
                        </script>
                    {% endif -%}
                {% endmacro -%}

                <div id="replies" class="comments" role="tree" aria-label="{{ _('Comments') }}" aria-expanded="true">
                    {% for reply in replies -%}
                      {{ render_comment(reply) | safe }}
                    {% endfor -%}
                </div>
            </div>
        </div>
        {% endif -%}
    </div>

    {% with community = post.community -%}
        {% include "_side_pane.html" %}
    {% endwith -%}
</div>
<script nonce="{{ session['nonce'] }}">
    window.addEventListener("load", function () {
        currentPost = document.querySelector('.post_col');  // set the current post, so A and Z voting keys work when viewing a post page
    });
</script>
{% endblock -%}