<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>
        <%=title%>
    </title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="/assets/img/favicon.png" rel="icon">
    <link href="/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="/assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="/assets/css/style.css" rel="stylesheet">

    <!-- =======================================================
  * Template Name: iPortfolio - v3.7.0
  * Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->

    <!-- Style for Map-->
    <style type="text/css">
        /* Set the size of the div element that contains the map */
        #map {
            height: 100vh;
            /* The height is 400 pixels */
            width: 100%;
            /* The width is the width of the web page */
        }
    </style>
    <script>
        var uname = "<%=name%>"
        var journey_no = <%=journey_no%>
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <!-- ======= Mobile nav toggle button ======= -->
    <i class="bi bi-list mobile-nav-toggle d-xl-none"></i>

    <!-- ======= Header ======= -->
    <header id="header">
        <div class="d-flex flex-column">
            <div class="profile">
                <img src="<%=profile_pic%>" alt="" class="img-fluid rounded-circle">
                <h1 class="text-light"><a href="index.html">
                        <%=name%>
                    </a></h1>
            </div>

            <nav id="navbar" class="nav-menu navbar">
                <ul>
                    <li><a href="/<%=name%>/feed" class="nav-link scrollto"><i class="bx bx-home"></i>
                            <span>Feed</span></a></li>
                    <li><a href="/<%=name%>/travels" class="nav-link scrollto active"><i class="bx bx-file-blank"></i> <span>My
                                Travels</span></a></li>
                </ul>
            </nav><!-- .nav-menu -->
            
            <h3 color="red"><%=title%></h3>
            <button type="button" class="btn btn-light" style="margin-top:20vh" onclick="add_destination()">Add New Location</button>
            
        </div>

    </header><!-- End Header -->

    <main id="main">
        <div id="map"></div>
    </main>

    <!-- Modals -->
    <div class="modal fade" id="display_modal" tabindex="-1" role="dialog" aria-labelledby="display_modal_title"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="display_modal_title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="display_modal_body">
                    Hello world!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Markers -->
    <div class="modal fade" id="display_modal" tabindex="-1" role="dialog" aria-labelledby="display_modal_title"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="display_modal_title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="display_modal_body">
                    Hello world!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for adding new location -->
    <div class="modal fade" id="addLocation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold">Record your new Experience!</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body mx-3">
                    <div class="modal-footer d-flex justify-content-center">
                        <button class="btn btn-unique border" onclick="update_location()"><i class="fas fa-paper-plane-o ml-1">Get your Current Location</i></button>
                    </div>
                    <div class="md-form mb-3">
                        <label data-error="wrong" data-success="right" for="lat_box">Latitude</label>
                        <input type="text" id="lat_box" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="long_box">Longitude</label>
                        <input type="text" id="long_box" class="form-control validate">
                        <label data-error="wrong" data-success="right" for="long_box">Title of your visit</label>
                        <input type="text" id="title_box" class="form-control validate">
                    </div>

                    <div class="md-form">
                        <i class="fas fa-pencil prefix grey-text"></i>
                        <label data-error="wrong" data-success="right" for="form8">Your Message</label>
                        <textarea type="text" id="msg_box" class="md-textarea form-control" rows="4"></textarea>
                    </div>

                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button class="btn btn-unique border" onclick="add_destination_loc()"><i class="fas fa-paper-plane-o ml-1">Add to your Journey!</i></button>
                </div>
            </div>
        </div>
    </div>

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="/assets/vendor/purecounter/purecounter.js"></script>
    <script src="/assets/vendor/aos/aos.js"></script>
    <script src="/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="/assets/vendor/typed.js/typed.min.js"></script>
    <script src="/assets/vendor/waypoints/noframework.waypoints.js"></script>
    <script src="/assets/vendor/php-email-form/validate.js"></script>

    <!-- Template Main JS File -->
    <script src="/assets/js/main.js"></script>
    <script src="/assets/js/maps.js"></script>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVRq1IKa9EWVfRoHG7Q0TT85wPxS1wWWA&callback=setup_travel&libraries=&v=weekly"
        async></script>

</body>

</html>