<html>
<head>
<title>User Dashboard</title>
<link href="../css/primary.css" type="text/css" rel="stylesheet" />
<link href="../css/dashboard.css" type="text/css" rel="stylesheet" />
<script src="../js/dashboard.js"></script>
<script src="../js/profile.js"></script>
<script src="../js/history.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><img src="../img/logo.png" /></div>
<div class="logout-panel">
<div id="username"></div>
<a href="index.html">Logout</a>
</div>
</div>
<div class="menu">
<button class="submenu" id="order" onclick="order_clicked()">ORDER</button>
<button class="submenu" id="history" onclick="history_clicked()">HISTORY</button>
<button class="submenu selected" id="profile" onclick="getUserProfile(); profile_clicked();">PROFILE</button>
</div>
<section class="order-wrapper">
</section>
<section class="history-wrapper">
<div id="content"></div>
<button onclick="getAllTransaction()">get transaction</button>
</section>
<section class="profile-wrapper">
<div class="sub-header">
<div class="sub-header-heading"><h1>MY PROFILE</h1></div>
<div class="edit-icon"><img src="../img/pencil.png" /></div>
</div>
<div class="user-profile">
<div id="user-image"></div>
<h1 id="profile-username"></h1>
<div id="name"></div>
<div id="driver-stats"></div>
<img src="../img/mail.png" /><div id="email"></div><br />
<img src="../img/phone.png" /><div id="phone"></div><br />
</div>
<div class="sub-header">
<div class="sub-header-heading"><h1>PREFERRED LOCATION</h1></div>
<div class="edit-icon"><img src="../img/pencil.png" /></div>
</div>
<div class="user-location">
<ul type="square" id="user-location">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</section>
</div>
</body>
</html>