{% extends "main_base.html" %}
{% block title%}Date|COVID-19 Detector{% endblock %}
{% block mycontent%}
<section class="page-header">
    <div class="container">
    </div><!-- /.container -->
</section><!-- /.page-header -->

<section class="about-three">
    <div class="container" style="margin-top: 30px;">
        <form action="/search_res" method="GET" class="search-form">
            <input type="text" name="q" placeholder="按医生名搜索...">
            <button type="submit"><i class="fas fa-search"></i></button>
        </form>
        <div style="display: flex; align-items: center;margin-top: 20px;">
            <h4 style="font-weight: bold;">推荐医生</h4>
            <p style="font-size: 17px; opacity: 0.7; color: #333; margin-left: 10px;margin-top: 7px;">严格质控 双重审核</p>
        </div>
        {% for doctor in doctors %}
        <div class="row align-items-start" style="margin-top: 10px;">
            <div class="col-1 d-flex flex-column" style="height: 80px;">
                {% if doctor.has_avatar %}
                <img src="{{ url_for('static', filename='images/avatar/' ~doctor.username ~ '.jpg')}}" alt="头像"
                    class="img-fluid rounded-circle align-self-center" style="width:75px; height:75px;">
                {% else %}
                <div class="postavatar {{ doctor.avatar_color }} align-self-center"
                    style="width:75px; height:75px;font-size: 70px">
                    <span id="initial">{{ doctor.username[0] }}</span>
                </div>
                {% endif %}
            </div>
            <div class="col-8" style="padding-left: 0px;">
                <h5 style="position:relative; top:12px;font-size:20px;font-weight: bold;">
                    {{ doctor.name }}&nbsp;&nbsp; {{ doctor.department }}</h5>
                <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;
                        font-size: 18px;margin-bottom: 0rem;">{{ doctor.about_me }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2" style="color: #333;opacity: 0.6;font-size: 16px;">
                        用户评分
                    </div>
                    <div class="col-2" style="color: orange;font-weight: bold;font-size: 17px;">
                        {{stars[loop.index-1]}}
                    </div>
                    <div class="col-2" style="color: #333;opacity: 0.6;font-size: 16px;">
                        月问诊数：
                    </div>
                    <div class="col-2" style="color: orange;font-weight: bold;font-size: 17px;">
                        {{counts[loop.index-1]}}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col" style="margin-right: 300px;">
                <div class="text-right">
                    <div class="btn-group" role="group" aria-label="Ask Button">
                        <a href="{{ url_for('appointment.doctor_info',docid=doctor.id) }}">
                            <button class="faqbtn btn-sm btn-primary" style="background-color:#4da6ff;"
                                id="ask-{{ doctor.id }}">
                                咨询医生
                            </button>
                        </a>
                    </div>
                    <div class="btn-group" role="group" aria-label="Date Button">
                        <a href="{{ url_for('appointment.book_date',chosen_docid=doctor.id) }}">
                            <button class="faqbtn btn-sm btn-primary" style="background-color:#4da6ff;"
                                id="date-{{ doctor.id }}" onclick="date('{{ doctor.id }}')">
                                预约挂号
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section><!-- /.about-three -->
{% endblock %}