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

  <div class="profile-container">
    <h1 id="tp">Doctor Profile</h1>
    <img class="profile-img" src=<%= doctor.image %> alt=<%= doctor.name %> >
    <div class="btn-circle blink"></div>
    <div class="content">
      <h3 class="profile-title"> <b> <%= doctor.name %></b></h3>
      <div class="profile-content">
        <ul>
          <% for( degree of doctor.degrees ) { %>
            <%= degree %>, 
          <% } %>
        </ul>
        <ul><%= doctor.position %></ul>
        <ul><%= doctor.hospital %></ul>
        <br> <br>
      </div>
      <div class="profile-special">
        <h4>Speciality</h4>
        <% for( speciality of doctor.speciality ) { %>
          <button type="button" class="btn btn-info"><%= speciality %> </button>
        <% } %>
      </div>
      <div class="profile-exp">
        <h4>Experience</h4>
        <p><%= doctor.exp %> </p>
        <h4>Languages</h4>
        <p>
          <% for( language of doctor.languages ) { %>
            <%= language %> ,
          <% } %>
        </p>
        <h4>Contact</h4>
        <p><%= doctor.contact %> </p>
        <br>
      </div>
      <div class="profile-doc-about">
        <h4>About <%= doctor.name %> </h4>
        <img class="profile-ratings" src="/img/rating3.png" alt="">
        <img class="profile-ratings" src="/img/rating3.png" alt="">
        <img class="profile-ratings" src="/img/rating3.png" alt="">
        <img class="profile-ratings" src="/img/rating3.png" alt="">
        <p> <%= doctor.about %> </p>
           <a href="./<%= doctor.id %>/appointment" type="button" class="btn btn-warning">Book Appointment</a>
           <a href="./<%= doctor.id %>/chat" type="button" class="btn btn-primary">Click here to chat</a>

      </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="/doctors" class="footer-item">Doctors</a>
            <a href="/signup" class="footer-item">Sign-Up</a>
            <a href="#all-about" 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="/specialities" 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="https://2ab7ii5zafm.typeform.com/to/PW3SWUyR" class="footer-item">Stars</a>
            <a href="https://2ab7ii5zafm.typeform.com/to/PW3SWUyR" class="footer-item">Feedback</a>
            <a href="https://2ab7ii5zafm.typeform.com/to/PW3SWUyR" 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="https://facebook.com/" class="footer-item">Facebook</a>
            <a href="https://twitter.com/" class="footer-item">Twitter</a>
            <a href="https://github.com/codadept/decoding-apocalypse.git" class="footer-item">Github</a>
          </div>
        </div>
    
      </div>
    
    
    </footer>
  </div>