{% 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>

                <div id="replies" class="comments" role="tree" aria-label="{{ _('Comments') }}" aria-expanded="true">
                    {% for reply in replies -%}
                      {% with post_reply=reply['comment'], children=reply['replies'] %}
                          {% include 'post/_post_reply_teaser.html' %}
                      {% endwith %}
                    {% 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 -%}