{% extends "other_base.html" %}
{% block title%}Docinfo|COVID-19 Detector{% endblock %}
{% block content %}
<div class="page-wrapper">
    <section class="page-header">
    </section><!-- /.page-header -->
    <div class="row">
        <div class="container"
            style="background-color: #fff;border-radius: 15px;margin-top: 20px;padding-left: 30px;padding-right: 20px;">
            <div class="row align-items-center" style="margin-top: 25px;">
                <div class="col-2" style="max-width: 12%;">
                    {% if doctor.has_avatar %}
                    <img src="{{ url_for('static', filename='images/avatar/' ~ doctor.username ~ '.jpg')}}" alt="头像" class="img-fluid rounded-circle"
                        style="width:100px; height:110px;">
                    {% else %}
                    <div class="postavatar {{ doctor.avatar_color }}">
                        <span id="initial">{{ doctor.username[0] }}</span>
                    </div>
                    {% endif %}
                </div>
                <div class="col-4">
                    <h5 style="position:relative; top:12px;font-size:22px;font-weight: bold;">
                        {{ doctor.name }}</h5>
                </div>
                <div class="col-4 text-right" style="font-family: 'Times New Roman';">
                    <p>最近活跃: {{moment(doctor.last_seen).fromNow() }}</p>
                </div>
                <div class="col-2" style="display: flex; align-items: center;justify-content: end;margin-bottom: 20px;">
                    <a href="{{ url_for('main.date') }}"
                        style="display: inline-block; width: 25px; height: 25px;
                     background-image: url('{{ url_for('static', filename='images/icon/return.png')}}'); background-size: cover;">
                    </a>
                    <div style="display: flex; align-items: center; cursor: pointer; margin-left: 10px;"
                        onclick="location.href='{{ url_for('main.date')}}'">
                        <span style="font-size: 18px;">返回</span>
                    </div>
                </div>
            </div>
            <div>
                <p style="font-size: 18px;margin-bottom: 0px;">{{doctor.department}}&nbsp;传染科</p>
                <p style="font-size: 18px;margin-bottom: 0px;">{{doctor.location}}</p>
            </div>
            <div class="row">
                <p style="font-size: 16px;">{{doctor.about_me}}</p>
            </div>
        </div>
        <div class="container" 
            style="background-color: #fff;border-radius: 15px;margin-top: 20px;padding-left: 20px;padding-right: 20px;">
            <h5 style="font-size: 22px;font-weight: bold;margin-top: 10px;counter-reset: Methods;">服务内容</h5>
            <div class="row">
                <div class="col-lg-3 col-md-6 ">
                    <a href="#" onclick="return false;">
                        <div class="show_img__single">
                            <div class="show_img__image">
                                <img src=" {{ url_for('static', filename='images/shapes/service4.png')}}" alt="">
                            </div><!-- /.show_img__image -->
                            <h3>图文咨询</h3>
                            <p>30元/次</p>
                        </div><!-- /.show_img__single -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 " >
                    <a href="{{ url_for('appointment.book_date', chosen_docid=doctor.id) }}">
                        <div class="show_img__single">
                            <div class="show_img__image">
                                <img src="{{ url_for('static', filename='images/shapes/service3.png')}}" alt="">
                            </div><!-- /.show_img__image -->
                            <h3>预约挂号</h3>
                            <p>30元/次</p>
                        </div><!-- /.show_img__single -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 " >
                    <a href="#" onclick="return false;">
                        <div class="show_img__single">
                            <div class="show_img__image">
                                <img src="{{ url_for('static', filename='images/shapes/service1.png')}}" alt="">
                            </div><!-- /.show_img__image -->
                            <h3>电话咨询</h3>
                            <p>80元/次</p>
                        </div><!-- /.show_img__single -->
                    </a>
                </div><!-- /.col-lg-3 col-md-6 wow fadeInUp -->
                <div class="col-lg-3 col-md-6 ">
                    <a href="#" onclick="return false;">
                        <div class="show_img__single">
                            <div class="show_img__image">
                                <img src="{{ url_for('static', filename='images/shapes/service2.png')}}" alt="">
                            </div><!-- /.show_img__image -->
                            <h3>个性化门诊</h3>
                            <p>100元/次</p>
                        </div><!-- /.show_img__single -->
                    </a>
                </div><!-- /.col-lg-3 col-md-6 wow fadeInUp -->
            </div><!-- /.row -->
        </div>
        <div class="container" style="
        background-color: #fff;border-radius: 15px;margin-top: 20px;padding-left: 20px;padding-right: 20px;">
            <h5 style="font-size: 22px;font-weight: bold;margin-top: 10px;">患者评价</h5>
            {% 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;">
                    <img src="{{ url_for('static', filename='images/avatar/default.jpg')}}" alt="头像"
                        class="img-fluid rounded-circle align-self-center" style="width:55px; height:55px;">
                </div>
                <div class="col-8" style="padding-left: 0px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h5 style="font-size:18px;">
                            {{ author.username }}
                        </h5>
                        <div class="rating" style="text-align: right;">
                            {% for i in range(5) %}
                                {% if i < comment.star_num %}
                                    <span class="fa fa-star checked"></span>
                                {% else %}
                                    <span class="fa fa-star"></span>
                                {% endif %}
                            {% endfor %}
                        </div>                        
                    </div>  
                    <p style="font-size: 15px;margin-bottom: 0rem;">{{ comment.body }}</p>
                    <p style="color: #999; opacity: 0.8;font-size: 15px;font-family: 'Times New Roman';">{{ moment(comment.timestamp).format('LLL') }}
                    </p>
                </div>
            </div>
            {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}