{% extends "layout.html" %}

{% set title = 'Doctors Page' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="search">
                    <form action="">
                        <div class="row">
                            <div class="col-md-9 col-sm-8">
                                <input type="text" class="pull-left" placeholder="Search by doctor name, speciality, medicine...">
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <button class="btn text-upper pull-right">
                                    <i class="fas fa-search mrsm"></i> Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="">
    <div class="container">
        <div class="blocks-con">
            <div class="v-block">
                <div class="sponsor">
                    <a href="#" class="d-block">
                        <img src="_assets/img/ads/ad-v.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="h-block">
                <a href="#" class="d-block">
                    <img src="_assets/img/ads/ad-h.jpg" alt="">
                </a>
                <a href="#" class="d-block">
                    <img src="_assets/img/ads/ad-h.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper b-purple">top doctors</h2>
            <a href="doctors-list.html" class="pull-right mtsm">
                View all doctors
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="doctor-slider">
                {% for i in range(0, 2) -%}
                    {% include 'component/doctors/01.html' %}
                    {% include 'component/doctors/02.html' %}
                    {% include 'component/doctors/03.html' %}
                    {% include 'component/doctors/04.html' %}
                    {% include 'component/doctors/05.html' %}
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad services">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper b-purple">top services</h2>
            <a href="" class="pull-right mtsm">
                View all services
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="service-slider">
                {% for i in range(0, 2) -%}
                    <div class="doctor-card service-card">
                        <a href="#"><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/08.jpg')"></figure></a>
                        <div class="doctor-info">
                            <h3 class="text-center text-bold"><a href="#">Service Name</a></h3>
                            <p class="text-center">Service description ipsum dolor amet, consectetuer adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="doctor-card service-card">
                        <a href=""><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/09.jpg')"></figure></a>
                        <div class="doctor-info">
                            <h3 class="text-center text-bold"><a href="#">Service Name</a></h3>
                            <p class="text-center">Service description ipsum dolor amet, consectetuer adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="doctor-card service-card">
                        <a href=""><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/10.jpg')"></figure></a>
                        <div class="doctor-info">
                            <h3 class="text-center text-bold"><a href="#">Service Name</a></h3>
                            <p class="text-center">Service description ipsum dolor amet, consectetuer adipiscing elit.</p>
                        </div>
                    </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad services">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper b-purple">top specialities</h2>
            <a href="" class="pull-right mtsm">
                View all specialities
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="service-slider">
                {% for i in range(0, 2) -%}
                <div class="doctor-card service-card">
                    <a href="#"><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/11.jpg')"></figure></a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Cardiology</a></h3>
                        <p class="text-center">Lorem psum dolor amet, consectetuer adipiscing elit.</p>
                    </div>
                </div>
                <div class="doctor-card service-card">
                    <a href="#"><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/12.jpg')"></figure></a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Family Medicine</a></h3>
                        <p class="text-center">Lorem psum dolor amet, consectetuer adipiscing elit.</p>
                    </div>
                </div>
                <div class="doctor-card service-card">
                    <a href="#"><figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/13.jpg')"></figure></a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Gynecology &  Obstetrics</a></h3>
                        <p class="text-center">Lorem psum dolor amet, consectetuer adipiscing elit.</p>
                    </div>
                </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper b-purple">liked doctors</h2>
            <a href="" class="pull-right mtsm">
                View all doctors
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="doctor-slider">
                {% for i in range(0, 2) -%}
                {% include 'component/doctors/01.html' %}
                {% include 'component/doctors/02.html' %}
                {% include 'component/doctors/03.html' %}
                {% include 'component/doctors/04.html' %}
                {% include 'component/doctors/05.html' %}
                {%- endfor %}
            </div>
        </div>
    </div>
</section>


{% endblock content %}