{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Profile</title>

    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">   

    <!-- Styles -->
    <link href="{% static 'css/lib/calendar2/pignose.calendar.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/chartist/chartist.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/themify-icons.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/owl.carousel.min.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/owl.theme.default.min.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/weather-icons.css' %}" rel="stylesheet" />
    <link href="{% static 'css/lib/menubar/sidebar.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/lib/helper.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>

<body>

  {% include "sidebar/sidebar.html" %}  
  <!-- /# sidebar -->


  <div class="header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="float-left">
            <div class="hamburger sidebar-toggle">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </div>
          </div>
          
          </div>
        </div>
      </div>
    </div>
  </div>



  <div class="content-wrap">
    <div class="main">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-8 p-r-0 title-margin-right">
            <div class="page-header">
              <div class="page-title">
                <!-- <h1>Hello,
                  <span>Welcome Here</span>
                </h1> -->
              </div>
            </div>
          </div>
          <!-- /# column -->
          <div class="col-lg-4 p-l-0 title-margin-left">
            <div class="page-header">
              <div class="page-title">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <a href="#">Dashboard</a>
                  </li>
                  <li class="breadcrumb-item active">App-Profile</li>
                </ol>
              </div>
            </div>
          </div>
          <!-- /# column -->
        </div>
        <!-- /# row -->
        <section id="main-content">
          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-body">
                  <div class="user-profile">
                    <div class="row">
                      
                      </div>
                      <div class="col-lg-8">
                        <div class="user-profile-name">{{u_name}}</div>
                        <div class="user-Location">
                          <i class="ti-location-pin"></i> Srilanka</div>
                        <div class="user-job-title">{{role}}</div>

                        <div class="custom-tab user-profile-tab">
                          <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                              <a href="#1" aria-controls="1" role="tab" data-toggle="tab">About</a>
                            </li>
                          </ul>
                          <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="1">
                              <div class="contact-information">
                                <h4>Contact information</h4>
                                <div class="phone-content">
                                  <span class="contact-title">Phone:</span>
                                  <span class="phone-number">{{mobile}}</span>
                                </div>
                                <div class="email-content">
                                  <span class="contact-title">Email:</span>
                                  <span class="contact-email">{{email}}</span>
                                </div>
                                <div class="address-content">
                                  <span class="contact-title">Hospital Name:</span>
                                  <span class="mail-address">{{hospital_name}}</span>
                                </div>
                                <div class="website-content">
                                  <span class="contact-title">Pharmacy Name:</span>
                                  <span class="contact-website">{{pharmacy_name}}</span>
                                </div>
                                <!-- <div class="skype-content">
                                  <span class="contact-title">Skype:</span>
                                  <span class="contact-skype">Admin Board</span>
                                </div>
                              </div>
                              <div class="basic-information">
                                <h4>Basic information</h4>
                                <div class="birthday-content">
                                  <span class="contact-title">Birthday:</span>
                                  <span class="birth-date">January 31, 1990 </span>
                                </div>
                                <div class="gender-content">
                                  <span class="contact-title">Gender:</span>
                                  <span class="gender">Male</span>
                                </div>
                              </div> -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /# row -->

          <div class="row">
                        <div class="col-lg-12">
                            <div class="footer">
                                <p>2022 © Admin. - <a href="#">projectX.com</a></p>
                            </div>
                        </div>
                    </div>
        </section>
      </div>
    </div>
  </div>







    <!-- jquery vendor -->
    <script src="{% static 'js/lib/jquery.min.js' %}"></script>
    <script src="{% static 'js/lib/jquery.nanoscroller.min.js' %}"></script>
    <!-- nano scroller -->
    <script src="{% static 'js/lib/menubar/sidebar.js' %}"></script>
    <script src="{% static 'js/lib/preloader/pace.min.js' %}"></script>
    <!-- sidebar -->

    <script src="{% static 'js/lib/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
    <!-- bootstrap -->

    <script src="{% static 'js/lib/calendar-2/moment.latest.min.js' %}"></script>
    <script src="{% static 'js/lib/calendar-2/pignose.calendar.min.js' %}"></script>
    <script src="{% static 'js/lib/calendar-2/pignose.init.js' %}"></script>


    <script src="{% static 'js/lib/weather/jquery.simpleWeather.min.js' %}"></script>
    <script src="{% static 'js/lib/weather/weather-init.js' %}"></script>
    <script src="{% static 'js/lib/circle-progress/circle-progress.min.js' %}"></script>
    <script src="{% static 'js/lib/circle-progress/circle-progress-init.js' %}"></script>
    <script src="{% static 'js/lib/chartist/chartist.min.js' %}"></script>
    <script src="{% static 'js/lib/sparklinechart/jquery.sparkline.min.js' %}"></script>
    <script src="{% static 'js/lib/sparklinechart/sparkline.init.js' %}"></script>
    <script src="{% static 'js/lib/owl-carousel/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/lib/owl-carousel/owl.carousel-init.js' %}"></script>
    <!-- scripit init-->
    <script src="{% static 'js/dashboard2.js' %}"></script>

</body>

</html>