{% extends "other_base.html" %}
{% block title%}Book|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: #87CEEB;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-1">
                    <h5 style="position:relative; top:12px;font-size:22px;font-weight: bold;color: white;">
                        {{ doctor.name }}</h5>
                </div>
                <div class="col-7">
                    <p style="font-size: 16px;margin-top:30px ;color: white;">{{doctor.department}}</p>
                </div>

                <div class="col-2" style="display: flex; align-items: center;justify-content: end;">
                    <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;justify-content: end; cursor: pointer; margin-left: 10px;"
                        onclick="location.href='{{ url_for('main.date')}}'">
                        <span style="font-size: 18px; color: white;">返回</span>
                    </div>
                </div>

            </div>
            <div class="row">
                <p style="font-size: 16px;color: white;">{{doctor.about_me}}</p>
            </div>
        </div>
        <div class="container"
            style="background-color: #f2dee2;padding-left: 30px;padding-right: 20px;height: 70px;display: flex;flex-direction: column;justify-content: center;">
            <div class="row align-items-center">
                <div class="col-8">
                    <p style="font-size: 16px;color: red;margin-bottom: 0;">该医生已开通在线咨询</p>
                </div>
                <div class="col-4 text-right">
                    <a href="{{ url_for('appointment.doctor_info', docid=doctor.id) }}">
                        <button class="btn btn-danger" style="color: white;">去咨询</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="container" style="background-color: white;height:50px;">
            <div class="row">
                <div class="col-2">
                    <a href="{{ url_for('appointment.book_date', chosen_docid=doctor.id) }}">
                        {% if "0" == active_date %}
                        <button class="btn btn-link" style="color: black;text-decoration: underline;">全部</button>
                        {%else%}
                        <button class="btn btn-link" style="color: black;">全部</button>
                        {%endif%}
                    </a>
                </div>
                <div class="col-10">
                    <div class="row">
                        {% for date in workdays %}
                        <div class="col-md-2 col-4">
                            <a
                                href="{{ url_for('appointment.book_appointment', chosen_docid=doctor.id, formatted_date=date.date) }}">
                                {% if date.date.strftime('%Y-%m-%d') == active_date %}
                                <button class="btn btn-link " style="color: black;text-decoration: underline;">{{
                                    date.date
                                    }}</button>
                                {%else%}
                                <button class="btn btn-link " style="color: black;">{{ date.date }}</button>
                                {%endif%}
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="container" style="background-color: white;margin-top: 10px;">
            <div>
                <p style="font-size: 16px;margin-bottom: 0;">{{doctor.location}} --传染科</p>
                <hr>
                {%for workday in actworkdays%}
                <div class="row">
                    <div class="col-md-8">
                        <p style="font-size: 16px;margin-bottom: 0; display: inline;">
                            {{ workday.date }}&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="margin-left: 60px;">上午</span>
                        </p>
                        <p style="font-size: 14px;margin-bottom: 0; display: block;color: #333; opacity: 0.8;">
                            专家门诊&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">{{ workday.cost }}元</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        {% if workday.temp_morning > 0 %}
                        <a
                            href="{{ url_for('appointment.submit_date', chosen_docid=doctor.id, formatted_date=workday.date,time=1) }}">
                            <button class="btn btn-info">余号：{{ workday.temp_morning }}</button>
                        </a>
                        {% else %}
                        <button class="btn btn-secondary" disabled>无余号</button>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <p style="font-size: 16px;margin-bottom: 0; display: inline;">
                            {{ workday.date }}&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="margin-left: 60px;">下午</span>
                        </p>
                        <p style="font-size: 14px;margin-bottom: 0; display: block;color: #333; opacity: 0.8;">
                            专家门诊&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">{{ workday.cost }}元</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        {% if workday.temp_afternoon > 0 %}
                        <a
                            href="{{ url_for('appointment.submit_date', chosen_docid=doctor.id, formatted_date=workday.date,time=0) }}">
                            <button class="btn btn-info">余号：{{ workday.temp_afternoon }}</button>
                        </a>
                        {% else %}
                        <button class="btn btn-secondary" disabled>无余号</button>
                        {% endif %}
                    </div>
                </div>
                <hr>
                {% endfor %}

            </div>
        </div>
    </div>
</div>
{% endblock %}