{% extends "other_base.html"%}
{% block title%}Article|COVID-19 Detector{% endblock %}
{% block content %}
<div class="page-wrapper">
    <section class="mypage-header">
    </section><!-- /.page-header -->
    <div class="row">
        <div class="container" style="background-color: #f3f5f9;border-radius: 15px;">
            <div class="post">
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="col-1">
                        {% if post.author.has_avatar %}
                        <img src="{{ url_for('static', filename='images/avatar/' ~ post.author.username ~ '.jpg')}}" alt="头像"
                            class="img-fluid rounded-circle" style="width:75px; height:75px;">
                        {% else %}
                        <div class="postavatar {{ post.author.avatar_color }}" style="width:75px; height:75px;">
                            <span id="initial" style="z-index: 1;">{{ post.author.username[0] }}</span>
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-7">
                        <h5 style="position:relative; top:12px;font-size:20px;">
                            {{ post.author.username }}</h5>
                    </div>
                    <div class="col-4 text-right" >
                        <p>发布时间: {{ moment(post.timestamp).format('LLL') }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <h4
                            style="position:relative; top:12px;font-size:25px;  font-weight: bold; margin-bottom: 20px;">
                            {{ post.title }}</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <p>{{ post.content }}</p>
                    </div>
                </div>
                <div class="row">
                    {% for i in range(1,post.img_count+1) %}
                    <div class="col-md-4">
                        <img src="{{ url_for('static', filename='images/post/' ~post.id~ '/' ~i~ '.jpg')}}"
                            class="img-fluid" style="max-height: 300px;" data-toggle="modal"
                            data-target="#myModal{{post.id}}a{{ i }}">
                    </div>
                    {% endfor %}
                </div>
                {% for i in range(1,post.img_count+1) %}
                <div class="modal fade" id="myModal{{post.id}}a{{ i }}" tabindex="-1" role="dialog"
                    aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-body text-center p-0"
                                style="display: flex; justify-content: center; align-items: center;">
                                <img src="{{ url_for('static', filename='images/post/' ~post.id~ '/' ~i~ '.jpg')}}"
                                    class="img-fluid"
                                    style="max-height: 70vh; max-width: 70vw; object-fit: contain !important;">
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
                <hr>
                <h3 id="comments">评论区</h3>
                <hr>
                {% if empty_comments %}
                <p style="font-size: 20px;">&nbsp;&nbsp;&nbsp;评论区空空如也~</p>
                {% else %}
                {% for comment, author in comment_pairs %}
                <div class="row align-items-start" style="margin-top: 10px;">
                    <div class="col-1 d-flex flex-column" style="height: 55px;">
                        {% if author.has_avatar %}
                        <img src="{{ url_for('static', filename='images/avatar/' ~author.username~ '.jpg')}}" alt="头像"
                            class="img-fluid rounded-circle align-self-center" style="width:55px; height:55px;">
                        {% else %}
                        <div class="postavatar {{ author.avatar_color }} align-self-center"
                            style="width:55px; height:55px;font-size: 50px">
                            <span id="initial" style="z-index: 1;">{{ author.username[0] }}</span>
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-8" style="padding-left: 0px;">
                        <h5 style="position:relative; top:12px;font-size:18px;font-family: 'Times New Roman';">
                            {{ author.username }}&nbsp;&nbsp;&nbsp;&nbsp; {{ moment(comment.timestamp).fromNow() }}</h5>
                        <p style="font-size: 15px;">{{ comment.body }}</p>
                    </div>
                </div>
                {% endfor %}
                {% endif %}
                <div class="post-actions-container stricky_bottom">
                    <div class="row">
                        <div class="col-8">
                            <div class="input-group">
                                <form method="POST">
                                    {{ form.csrf_token }}
                                    <div style="display: flex;">
                                        {% if current_user.has_avatar %}
                                        <img src="{{ url_for('static', filename='images/avatar/' ~current_user.username~ '.jpg')}}" alt="头像"
                                            class="img-fluid rounded-circle align-self-center"
                                            style="width: 50px; height: 50px; margin-right: 10px;margin-bottom: 10px;">
                                        {% else %}
                                        <div class="postavatar {{ current_user.avatar_color }} align-self-center"
                                            style="width: 50px; height: 50px; margin-right: 10px; font-size: 50px;margin-bottom: 10px;">
                                            <span id="initial" style="z-index: 1;">{{ current_user.username[0] }}</span>
                                        </div>
                                        {% endif %}

                                        <div class="form-group" style="margin-top: 10px;">
                                            {{form.body(class="form-control", style="width:500px;")}}
                                            {% if form.body.errors %}
                                            <ul class="errors">
                                                {% for error in form.body.errors %}
                                                <li>{{ error }}</li>
                                                {% endfor %}
                                            </ul>
                                            {% endif %}
                                        </div>
                                        <div class="form-group" style="margin-top: 10px;">
                                            {{ form.submit(class="btn btn-primary") }}
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-4 text-right" style="margin-top: 8px;">
                            <div class="btn-group" role="group" aria-label="Post Actions">
                                <div class="btn-group" role="group" aria-label="Collect Button">
                                    <button class="btn btn-sm btn-primary{% if has_collected %} active{% endif %}"
                                        id="collect-{{ post.id }}" onclick="collect('{{ post.id }}')">
                                        {% if has_collected %}
                                        <i class="fas fa-bookmark" style="margin-right: 10px;color: orange;"></i>
                                        {% else %}
                                        <i class="fas fa-bookmark" style="margin-right: 10px;"></i>
                                        {% endif %}
                                        {{ post.collect_num }} 个收藏
                                    </button>
                                </div>
                                <div class="btn-group" role="group" aria-label="Comment Button">
                                    <button class="btn btn-sm btn-primary" onclick="showCommentModal(); 
                                    ">
                                        <i class="fas fa-comment" style="margin-right: 10px;"></i> {{ post.comment_num
                                        }} 条评论
                                    </button>
                                </div>

                                <div class="btn-group" role="group" aria-label="Like Button">
                                    <button class="btn btn-sm btn-primary{% if has_liked %} active{% endif %}"
                                        id="like-{{ post.id }}" onclick="like('{{ post.id }}')">
                                        {% if has_liked %}
                                        <i class="fas fa-heart" style="margin-right: 10px; color:red;"></i>
                                        {% else %}
                                        <i class="fas fa-heart" style="margin-right: 10px;"></i>
                                        {% endif %}
                                        {{ post.like_num }} 个赞同
                                    </button>
                                </div>
                                <div class="btn-group" role="group" aria-label="share Button">
                                    <button class="btn btn-sm btn-primary" id="share-{{ post.id }}"
                                        onclick="share('{{ post.id }}')">
                                        <i class="fas fa-share" style="margin-right: 5px;"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
    $(document).ready(function () {
        $('.img-fluid').click(function () {
            $($(this).data("target")).modal("show");
        });
    });
</script>
<script>
    function showCommentModal() {
        // 通过location属性跳转到评论区的锚点
        location.href = "#comments";
    }  
</script>
<script>
    $(document).ready(function () {
        $('form').submit(function () {
            $('html, body').animate({
                scrollTop: $(window).scrollTop()
            }, 0);
        });
    });
</script>
{% endblock %}