<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <title>HODOR | Home</title>
</head>
<body>
<div class="container-fluid">
<img src="img/hodor-logo4.png" id="hodor-logo">
<div id="sidenavbar" class="sidenavbar">
        <a href="#" id="profile"  data-toggle="modal" data-target="#profile-modal"><img src="img/img_avatar.png" alt="Avatar"><br>Sabhariesh<i class="fa fa-user fa-lg"></i></a><br><br>
        <a href="dashboard.html" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
        <a href="#" id="learn">Learn<i class="fa fa-laptop fa-lg"></i></a>
        <a href="#" id="leaderboard">Leaderboard<i class="fa fa-bar-chart fa-lg"></i></a>
        <a href="#" id="ctf">Capture the Flag<i class="fa fa-flag fa-lg"></i></a>
        <a href="#" id="docs">Documentation & help &nbsp;&nbsp;&nbsp;<i class="fa fa-info fa-lg"></i></a><br>
        <a href="#" id="logout">Logout<i style="color:#d9534f !important;" class="fa fa-power-off fa-lg"></i></a>
</div>
<div id="profile-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modalhead" style="text-align: center">
                <img src="img/img_avatar.png" alt="Avatar" style="border-radius: 50%;width: 75px;">&nbsp;&nbsp;&nbsp;Name</div>
            </div>
            <div class="modal-body">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a data-toggle="pill" href="#home">View Profile</a></li>
                    <li><a data-toggle="pill" href="#menu2">Edit Profile</a></li>
                </ul>

                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <h3>Name</h3>
                        <p>Sabhariesh</p>
                        <h3>Username</h3>
                        <p>frozenfire</p>
                        <h3>Email-ID</h3>
                        <p>sabbhy1996@gmail.com</p>
                        <h3>Github</h3>
                        <p>@shariharasudan</p>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                    <div id="menu2" class="tab-pane fade">
                        <form>
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" id="name">
                            </div>
                            <div class="form-group">
                                <label for="uname">Username</label>
                                <input type="text" class="form-control" id="uname">
                            </div>                            <div class="form-group">
                                <label for="email">Email address:</label>
                                <input type="email" class="form-control" id="email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd">
                                <label for="rpwd"> Re-enter Password:</label>
                                <input type="password" class="form-control" id="rpwd">
                            </div>
                            <button type="submit" class="btn btn-success" style="align-self: center">Submit</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>