{% 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>Add Drugs</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">

    <style>
        #map {
            height: 600px;
            /* The height is 400 pixels */
            width: 200%;
            /* The width is the width of the web page */
            }
    </style>

</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 class="float-right">
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-bell"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">Recent Notifications</span>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">5 members joined today </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mariam</div>
                                                        <div class="notification-text">likes a photo of you</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Tasnim</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <i class="ti-email"></i>
                                <div class="drop-down dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">2 New Messages</span>
                                        <a href="email.html">
                                            <i class="ti-pencil-alt pull-right"></i>
                                        </a>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/1.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="notification-unread">
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Michael Qin</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                                    <div class="notification-content">
                                                        <small class="notification-timestamp pull-right">02:34 PM</small>
                                                        <div class="notification-heading">Mr. John</div>
                                                        <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="text-center">
                                                <a href="#" class="more-link">See All</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dib">
                            <div class="header-icon" data-toggle="dropdown">
                                <span class="user-avatar">John
                                    <i class="ti-angle-down f-s-10"></i>
                                </span>
                                <div class="drop-down dropdown-profile dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-content-heading">
                                        <span class="text-left">Upgrade Now</span>
                                        <p class="trial-day">30 Days Trail</p>
                                    </div>
                                    <div class="dropdown-content-body">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-user"></i>
                                                    <span>Profile</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-email"></i>
                                                    <span>Inbox</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-settings"></i>
                                                    <span>Setting</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="#">
                                                    <i class="ti-lock"></i>
                                                    <span>Lock Screen</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="ti-power-off"></i>
                                                    <span>Logout</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </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>Nearest <span>Pharmacy</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">Add New Users</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->
                <section id="main-content">


                    <!-- /# row -->
                    <div class="row">
                        <div class="col-lg-6">
                            <div >
                                <div class="card-title">
                                    
                                </div>
                                <div class="card-body">
                                    <div class="basic-form">
                                        <form>



                                        <div class="col-md-6 mb-4">

                                              <!-- <div class="input-group md-form form-sm form-1 pl-0">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white" aria-hidden="true"></i></span>
                                                </div>
                                                <input class="form-control my-0 py-1" type="text" placeholder="Search Your City" aria-label="Search">
                                              </div> <br> -->

                                              <!-- Map -->

                                                <!-- <div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="1080" id="gmap_canvas" src="https://maps.google.com/maps?q=srilanka&t=&z=9&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://fmovies-online.net">fmovies</a><br><style>.mapouter{position:relative;text-align:right;height:1080px;width:600px;}</style><a href="https://www.embedgooglemap.net">adding a google map to a website</a><style>.gmap_canvas {overflow:hidden;background:none!important;height:1080px;width:600px;}</style></div></div> -->

                                                <!-- <div id="map"></div> -->
                                                <iframe src="http://localhost/map/" height="600" width="1000" title="Nearest Pharmacy"></iframe>

                                              <!-- End Map -->

                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
 
                    </div>

                    <!-- <button onclick="locate()">Click Me!</button> -->

                    <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>

    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkPHRLgrz1Uv_ctapXqGgEyFxTI_7aAtk&callback=initMap" async defer></script> -->

    <!-- <script>

        navigator.geolocation.getCurrentPosition(
        function (position) {
            initMap(position.coords.latitude, position.coords.longitude)
        },
        function errorCallback(error) {
            console.log(error)
        }
        );

        function initMap(lat, lng) {

            var myLatLng = {
            lat,
            lng
            };

            var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

            var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            });
        }

    </script> -->

</body>

</html>