{% extends 'user_base.html' %}
{% block title %} Mypost|COVID-19 Detector {% endblock %}
{% block specific_info %}
<div class="col-md-8">
    {% for post in posts %}
        <hr>
        <div class="post">
            <div class="row align-items-center">
                <div class="col-2">
                    {% 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 }}">
                        <span id="initial" style="z-index: 1;">{{ post.author.username[0] }}</span>
                    </div>
                    {% endif %}
                </div>
                {%if post.author.role_id==2%}
                <div class="col-5" style="margin-left: -50px;">
                    <h5
                        style="position:relative; top:12px;font-size:20px;font-weight: bold;">
                        {{ post.author.username }}</h5>
                </div>
                {%else%}
                <div class="col-5" style="margin-left: -50px;">
                    <div style="height: 40px; position: relative;">
                        <h5 style="position: absolute; top: 0; left: 0; right: 0; bottom: 50%; 
                        margin: auto; font-size: 20px; font-weight: bold;">{{ post.author.name }}</h5>
                        <h5 style="position: absolute; top: 50%; left: 0; right: 0; bottom: 0; 
                        margin-top: 10px; font-size: 20px;">{{ post.author.location
                            }}&nbsp{{post.author.department}}</h5>
                    </div>
                </div>
                {%endif%}
                <div class="col-5 text-right" style="font-family: 'Times New Roman';">
                    <p>发布时间: {{ moment(post.timestamp).format('LLL') }}</p>
                </div>
            </div>
            {%set url=url_for('auth.pleaselogin')%}
            {%if current_user.is_authenticated %}
            {%set url=url_for('faqs.article',id=post.id)%}
            {%endif%}
            <a href="{{url}}">
                <div class="container">
                    <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 style="-webkit-line-clamp: 2; /* for Safari, iOS Safari */ 
                            -webkit-box-orient: vertical; 
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;">{{ post.content }}</p>
                        </div>
                    </div>
                </div>
            </a>
            <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 %}
            <div class="row">
                <div class="col text-left">
                    <div class="btn-group" role="group" aria-label="Collect Button">
                        {% set has_collected = 0 %}
                        {% if current_user.is_authenticated %}
                        {% set has_collected = Collect.query.filter_by(user_id=current_user.id, post_id=post.id).first()
                        %}
                        <button class="faqbtn btn-sm btn-primary{% if has_collected %} active{% endif %}"
                            style="background-color:#4da6ff;" id="collect1-{{ post.id }}"
                            onclick="collect1('{{ 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>
                        {% else %}
                        <button class="faqbtn btn-sm btn-primary" style="background-color:#4da6ff;" disabled>
                            <i class="fas fa-bookmark" style="margin-right: 10px;"></i>
                            {{ post.collect_num }} 个收藏
                        </button>
                        {% endif %}
                    </div>
                    {% if current_user.is_authenticated %}
                    <a href="{{ url_for('faqs.article', id=post.id) }}#comments">
                        <div class="btn-group" role="group" aria-label="Comment Button">
                            <button class="faqbtn btn-sm btn-primary" id="comment-btn-{{ post.id }}"
                                style="background-color:#4da6ff;">
                                <i class=" fas fa-comment" style="margin-right: 10px;"></i> {{ post.comment_num }} 条评论
                            </button>
                        </div>
                    </a>
                    {% else %}
                    <div class="btn-group" role="group" aria-label="Comment Button">
                        <button class="faqbtn btn-sm btn-primary disabled" style="background-color:#4da6ff;">
                            <i class=" fas fa-comment" style="margin-right: 10px;"></i> {{ post.comment_num }} 条评论
                        </button>
                    </div>
                    {% endif %}

                    <div class="btn-group" role="group" aria-label="Like Button">
                        {% set has_liked = 0 %}
                        {% if current_user.is_authenticated %}
                        {% set has_liked= Like.query.filter_by(user_id=current_user.id, post_id=post.id).first() %}
                        <button class="faqbtn btn-sm btn-primary{% if has_liked %} active{% endif %}"
                            style="background-color:#4da6ff;" id="like1-{{ post.id }}" onclick="like1('{{ 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>
                        {% else %}
                        <button class="faqbtn btn-sm btn-primary" style="background-color:#4da6ff;" disabled>
                            <i class="fas fa-heart" style="margin-right: 10px;"></i>
                            {{ post.like_num }} 个赞同
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
</div>
{% endblock %}