<% layout('layouts/doctorsbp') %> 

<div class="bg-doctor">
   <h2 class="doctor-title">Doctor List</h2>
<div class="row row-cols-auto justify-content-center ">
   
   <% for( let 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>