<!-- put speciality wise doctors -->
<% layout('layouts/doctorsbp') %>

<div class="bg-doctor">
    <h2 class="doctor-title">Doctors Specialist in <%= specialityName %> </h2>
    <div class="row row-cols-auto justify-content-center ">

        <% for( doctor of doctors ) { %>
        
            <div class="card col col-xl-3"  style="width: 18rem;">
                <img src=<%= doctor.image %>  class="card-img-top" alt=<%= doctor.name %> >
                <div class="card-body">
                   <h5 class="card-title"> <b><%= doctor.name %> </b> </h5>
                   <p class="card-text">
                      <b>Degree:</b>  
                      <% for( let degree of doctor.degrees) { %>
                         <%= degree %>, 
                      <% } %> <br> 
                      <b> Specialist:</b> 
                      <% for( let speciality of doctor.speciality) { %>
                         <%= speciality %>, 
                      <% } %>  
                      <br> 
                      <b>Experience:</b>  <%= doctor.exp %> 
                      <br>
                   <a href="/doctors/<%= doctor.id %>" class="btn btn-primary ">Check Profile</a>
                </div>
            </div>

        <% } %>

    </div>
<footer>
    <!-- this is footer -->
    <div class="footer-content">
        <div class="footer-col">
            <div class="footer-title">
                <span>TeleMedico</span>
            </div>
            <div>
                <a href="#" class="footer-item">Doctors</a>
                <a href="#" class="footer-item">Sign-Up</a>
                <a href="#" class="footer-item">About Us</a>
            </div>
        </div>

        <div class="footer-col">
            <div class="footer-title">
                <span>Recommended Hospitals</span>
            </div>
            <div>
                <a href="#" class="footer-item">Apollo</a>
                <a href="#" class="footer-item">Hayat</a>
                <a href="#" class="footer-item">Woodlands</a>
            </div>
        </div>

        <div class="footer-col">
            <div class="footer-title">
                <span>For Patients</span>
            </div>
            <div class="item">
                <a href="#" class="footer-item">Appointments</a>
                <a href="#" class="footer-item">Availability</a>
                <a href="#" class="footer-item">Chat with us</a>
            </div>
        </div>

        <div class="footer-col">
            <div class="footer-title">
                <span>Ratings</span>
            </div>
            <div class="item">
                <a href="#" class="footer-item">Stars</a>
                <a href="#" class="footer-item">Feedback</a>
                <a href="#" class="footer-item">24 x 7 Helpline</a>
            </div>
        </div>


        <div class="footer-col">
            <div class="footer-title">
                <span>Socials</span>
            </div>
            <div>
                <a href="#" class="footer-item">Facebook</a>
                <a href="#" class="footer-item">Twitter</a>
                <a href="#" class="footer-item">Github</a>
            </div>
        </div>

    </div>


</footer>
</div>
