<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>{{ $user->first}}- Mentconnect</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/spacelab/bootstrap.min.css">
{{HTML::style('css/userprofile.css')}}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<nav class="navbar navbar-inverse container" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{HTML::link('/', 'Mentconnect', array('class' => 'navbar-brand'))}}
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome... {{ $user->first }}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li align="center" class="well">
{{HTML::image('/'.$user->photo, 'profile', array('class' => 'img-responsive'))}}<a class="change" href="">Change Picture</a></div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row well">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked well">
<li class="active "><a href="/emails/create"><i class="fa fa-envelope"></i> Compose</a></li>
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="/users"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-key"></i> Security</a></li>
<li><a href="/logout"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel">
@if(!empty($user->photo))
{{HTML::image('/'.$user->photo, 'profile', array('class' => 'pic img-circle'))}}
@endif
<div class="name"><small>Hello, {{$user->first }}</small></div>
<a href="#" class="btn btn-xs btn-primary pull-right" style="margin:10px;"><span class="glyphicon glyphicon-picture"></span> Change cover</a>
</div>
<br><br><br>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#inbox" data-toggle="tab"><i class="fa fa-envelope-o"></i> Inbox</a></li>
<li><a href="#sent" data-toggle="tab"><i class="fa fa-reply-all"></i> Sent</a></li>
<li><a href="#assignment" data-toggle="tab"><i class="fa fa-file-text-o"></i> Projects</a></li>
<li><a href="#event" data-toggle="tab"><i class="fa fa-clock-o"></i> Mentor(s)</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="inbox">
<a type="button" data-toggle="collapse" data-target="#a1">
<div class="btn-toolbar well well-sm" role="toolbar" style="margin:0px;">
<div class="btn-group"><input type="checkbox"></div>
<div class="btn-group col-md-3">{{$user->first}} {{ $user->last }}</div>
<div class="btn-group col-md-8"><b>Hi Check this new Bootstrap plugin</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:10 PM <button class="btn btn-primary btn-xs"><i class="fa fa-share-square-o"> Reply</i></button></div> </div>
</div>
</a>
<div id="a1" class="collapse out well">This is the message body</div>
<br>
<button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Delete Checked Item's</button>
</div>
<div class="tab-pane" id="sent">
<a type="button" data-toggle="collapse" data-target="#s1">
<div class="btn-toolbar well well-sm" role="toolbar" style="margin:0px;">
<div class="btn-group"><input type="checkbox"></div>
<div class="btn-group col-md-3">Kumar</div>
<div class="btn-group col-md-8"><b>This is reply from Bootstrap plugin</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:30 AM</div> </div>
</div>
</a>
<div id="s1" class="collapse out well">This is the message body1</div>
<br>
<button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Delete Checked Item's</button>
</div>
<div class="tab-pane" id="assignment">
<a href=""><div class="well well-sm" style="margin:0px;">Open GL Assignments <span class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:20 AM 20 Dec 2014 </span></div></a>
</div>
<div class="tab-pane" id="event">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Animation Workshop</h4>
2Days animation workshop to be conducted
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#myTab a:first').tab('show')
})
</script>
</body>
</html>