<!-- BEGIN PAGE HEADER-->
<div class="page-bar">
	<ul class="page-breadcrumb">
		<li>
			<i class="fa fa-home"></i>
			<a href="#/dashboard.html">Home</a>
			<i class="fa fa-angle-right"></i>
		</li>
		<li>
			<a href="#">Todo</a>
		</li>
	</ul>
	<div class="page-toolbar">
		<div class="btn-group pull-right">
			<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
			Actions <i class="fa fa-angle-down"></i>
			</button>
			<ul class="dropdown-menu pull-right" role="menu">
				<li>
					<a href="#">
					<i class="icon-user"></i> New User </a>
				</li>
				<li>
					<a href="#">
					<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
					</a>
				</li>
				<li>
					<a href="#">
					<i class="icon-basket"></i> New order </a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
					<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
					</a>
				</li>
				<li>
					<a href="#">
					<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- END PAGE HEADER-->

<!-- BEGIN PAGE CONTENT-->
<div class="row">
	<div class="col-md-12">
		<!-- BEGIN TODO SIDEBAR -->
		<div class="todo-ui">
			<div class="todo-sidebar">
				<div class="portlet light">
					<div class="portlet-title">
						<div class="caption" data-toggle="collapse" data-target=".todo-project-list-content">
							<span class="caption-subject font-green-sharp bold uppercase">PROJECTS </span>
							<span class="caption-helper visible-sm-inline-block visible-xs-inline-block">click to view project list</span>
						</div>
						<div class="actions">
							<div class="btn-group">
								<a class="btn green-haze btn-circle btn-sm todo-projects-config" href="#" data-toggle="dropdown" dropdown-menu-hover data-close-others="true">
								<i class="icon-settings"></i> &nbsp; <i class="fa fa-angle-down"></i>
								</a>
								<ul class="dropdown-menu pull-right">
									<li>
										<a href="#">
										<i class="i"></i> New Project </a>
									</li>
									<li class="divider">
									</li>
									<li>
										<a href="#">
										Pending <span class="badge badge-danger">
										4 </span>
										</a>
									</li>
									<li>
										<a href="#">
										Completed <span class="badge badge-success">
										12 </span>
										</a>
									</li>
									<li>
										<a href="#">
										Overdue <span class="badge badge-warning">
										9 </span>
										</a>
									</li>
									<li class="divider">
									</li>
									<li>
										<a href="#">
										<i class="i"></i> Archived Projects </a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="portlet-body todo-project-list-content">
						<div class="todo-project-list">
							<ul class="nav nav-pills nav-stacked">
								<li>
									<a href="#">
									<span class="badge badge-success"> 6 </span> AirAsia Ads </a>
								</li>
								<li>
									<a href="#">
									<span class="badge badge-success"> 2 </span> HSBC Promo </a>
								</li>
								<li class="active">
									<a href="#">
									<span class="badge badge-success badge-active"> 3 </span> GlobalEx System </a>
								</li>
								<li>
									<a href="#">
									<span class="badge badge-default"> 14 </span> Empire City </a>
								</li>
								<li>
									<a href="#">
									<span class="badge badge-success"> 6 </span> AirAsia Ads </a>
								</li>
								<li>
									<a href="#">
									<span class="badge badge-success"> 2 </span> Loop Inc Promo </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- END TODO SIDEBAR -->
			<!-- BEGIN TODO CONTENT -->
			<div class="todo-content">
				<div class="portlet light">
					<!-- PROJECT HEAD -->
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-bar-chart font-green-sharp hide"></i>
							<span class="caption-helper">PROJECT:</span> &nbsp; <span class="caption-subject font-green-sharp bold uppercase">Tune Website</span>
						</div>
						<div class="actions">
							<div class="btn-group">
								<a class="btn green-haze btn-circle btn-sm" href="#" data-toggle="dropdown" dropdown-menu-hover data-close-others="true">
								MANAGE <i class="fa fa-angle-down"></i>
								</a>
								<ul class="dropdown-menu pull-right">
									<li>
										<a href="#">
										<i class="i"></i> New Task </a>
									</li>
									<li class="divider">
									</li>
									<li>
										<a href="#">
										Pending <span class="badge badge-danger">
										4 </span>
										</a>
									</li>
									<li>
										<a href="#">
										Completed <span class="badge badge-success">
										12 </span>
										</a>
									</li>
									<li>
										<a href="#">
										Overdue <span class="badge badge-warning">
										9 </span>
										</a>
									</li>
									<li class="divider">
									</li>
									<li>
										<a href="#">
										<i class="i"></i> Delete Project </a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- end PROJECT HEAD -->
					<div class="portlet-body">
						<div class="row">
							<div class="col-md-5 col-sm-4">
								<div class="scroller" style="max-height: 600px;" data-always-visible="0" data-rail-visible="0" data-handle-color="#dae3e7">
									<div class="todo-tasklist">
										<div class="todo-tasklist-item todo-tasklist-item-border-green">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar4.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Slider Redesign
											</div>
											<div class="todo-tasklist-item-text">
												Lorem dolor sit amet ipsum dolor sit consectetuer dolore.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 21 Sep 2014 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Urgent</span>
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-red">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar5.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Homepage Alignments to adjust
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum dolor sit amet, consectetuer dolore dolor sit amet.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 14 Sep 2014 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Important</span>
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-green">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar9.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Slider Redesign
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 10 Feb 2015 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Important</span>&nbsp;
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-blue">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar6.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Contact Us Map Location changes
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum amet, consectetuer dolore dolor sit amet.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 04 Oct 2014 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Postponed</span>&nbsp; <span class="todo-tasklist-badge badge badge-roundless">Test</span>
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-purple">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar7.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Projects list new Forms
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum dolor sit amet, consectetuer dolore psum dolor sit.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 19 Dec 2014 </span>
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-yellow">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar8.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												New Search Keywords
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum dolor sit amet, consectetuer sit amet ipsum dolor, consectetuer ipsum consectetuer sit amet dolore.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 02 Feb 2015 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Postponed</span>&nbsp;
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-green">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar9.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Slider Redesign
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 10 Feb 2015 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Important</span>&nbsp;
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-red">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar5.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Homepage Alignments to adjust
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum dolor sit amet, consectetuer dolore psum dolor sit.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 14 Sep 2014 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Important</span>
											</div>
										</div>
										<div class="todo-tasklist-item todo-tasklist-item-border-blue">
											<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar6.jpg" width="27px" height="27px">
											<div class="todo-tasklist-item-title">
												Contact Us Improvement
											</div>
											<div class="todo-tasklist-item-text">
												Lorem ipsum amet, psum dolor sit consectetuer dolore.
											</div>
											<div class="todo-tasklist-controls pull-left">
												<span class="todo-tasklist-date"><i class="fa fa-calendar"></i> 21 Feb 2015 </span>
												<span class="todo-tasklist-badge badge badge-roundless">Postponed</span>&nbsp; <span class="todo-tasklist-badge badge badge-roundless">Primary</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="todo-tasklist-devider">
							</div>
							<div class="col-md-7 col-sm-8">
								<div class="scroller" style="max-height: 600px;" data-always-visible="0" data-rail-visible="0" data-handle-color="#dae3e7">
									<form action="#" class="form-horizontal">
										<!-- TASK HEAD -->
										<div class="form">
											<div class="form-group">
												<div class="col-md-8 col-sm-8">
													<div class="todo-taskbody-user">
														<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar6.jpg" width="50px" height="50px">
														<span class="todo-username pull-left">Vanessa Bond</span>
														<button type="button" class="todo-username-btn btn btn-circle btn-default btn-xs">&nbsp;edit&nbsp;</button>
													</div>
												</div>
												<div class="col-md-4 col-sm-4">
													<div class="todo-taskbody-date pull-right">
														<button type="button" class="todo-username-btn btn btn-circle btn-default btn-xs">&nbsp; Complete &nbsp;</button>
													</div>
												</div>
											</div>
											<!-- END TASK HEAD -->
											<!-- TASK TITLE -->
											<div class="form-group">
												<div class="col-md-12">
													<input type="text" class="form-control todo-taskbody-tasktitle" placeholder="Task Title...">
												</div>
											</div>
											<!-- TASK DESC -->
											<div class="form-group">
												<div class="col-md-12">
													<textarea class="form-control todo-taskbody-taskdesc" rows="8" placeholder="Task Description..."></textarea>
												</div>
											</div>
											<!-- END TASK DESC -->
											<!-- TASK DUE DATE -->
											<div class="form-group">
												<div class="col-md-12">
													<div class="input-icon">
														<i class="fa fa-calendar"></i>
														<input type="text" class="form-control todo-taskbody-due" placeholder="Due Date...">
													</div>
												</div>
											</div>
											<!-- TASK TAGS -->
											<div class="form-group">
												<div class="col-md-12">
													<input type="text" class="form-control todo-taskbody-tags" placeholder="Tags..." value="Pending, Requested">
												</div>
											</div>
											<!-- TASK TAGS -->
											<div class="form-actions right todo-form-actions">
												<button class="btn btn-circle btn-sm green-haze">Save Changes</button>
												<button class="btn btn-circle btn-sm btn-default">Cancel</button>
											</div>
										</div>
										<div class="tabbable-line">
											<ul class="nav nav-tabs ">
												<li class="active">
													<a href="#" data-target="#tab_1" data-toggle="tab">
													Comments </a>
												</li>
												<li>
													<a href="#" data-target="#tab_2" data-toggle="tab">
													History </a>
												</li>
											</ul>
											<div class="tab-content">
												<div class="tab-pane active" id="tab_1">
													<!-- TASK COMMENTS -->
													<div class="form-group">
														<div class="col-md-12">
															<ul class="media-list">
																<li class="media">
																	<a class="pull-left" href="#">
																	<img class="todo-userpic" src="../../../assets/admin/layout/img/avatar8.jpg" width="27px" height="27px">
																	</a>
																	<div class="media-body todo-comment">
																		<button type="button" class="todo-comment-btn btn btn-circle btn-default btn-xs">&nbsp; Reply &nbsp;</button>
																		<p class="todo-comment-head">
																			<span class="todo-comment-username">Christina Aguilera</span> &nbsp; <span class="todo-comment-date">17 Sep 2014 at 2:05pm</span>
																		</p>
																		<p class="todo-text-color">
																			Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
																		</p>
																		<!-- Nested media object -->
																		<div class="media">
																			<a class="pull-left" href="#">
																			<img class="todo-userpic" src="../../../assets/admin/layout/img/avatar4.jpg" width="27px" height="27px">
																			</a>
																			<div class="media-body">
																				<p class="todo-comment-head">
																					<span class="todo-comment-username">Carles Puyol</span> &nbsp; <span class="todo-comment-date">17 Sep 2014 at 4:30pm</span>
																				</p>
																				<p class="todo-text-color">
																					Thanks so much my dear!
																				</p>
																			</div>
																		</div>
																	</div>
																</li>
																<li class="media">
																	<a class="pull-left" href="#">
																	<img class="todo-userpic" src="../../../assets/admin/layout/img/avatar5.jpg" width="27px" height="27px">
																	</a>
																	<div class="media-body todo-comment">
																		<button type="button" class="todo-comment-btn btn btn-circle btn-default btn-xs">&nbsp; Reply &nbsp;</button>
																		<p class="todo-comment-head">
																			<span class="todo-comment-username">Andres Iniesta</span> &nbsp; <span class="todo-comment-date">18 Sep 2014 at 9:22am</span>
																		</p>
																		<p class="todo-text-color">
																			Cras sit amet nibh libero, in gravida nulla. Scelerisque ante sollicitudin commodo Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <br>
																		</p>
																	</div>
																</li>
																<li class="media">
																	<a class="pull-left" href="#">
																	<img class="todo-userpic" src="../../../assets/admin/layout/img/avatar6.jpg" width="27px" height="27px">
																	</a>
																	<div class="media-body todo-comment">
																		<button type="button" class="todo-comment-btn btn btn-circle btn-default btn-xs">&nbsp; Reply &nbsp;</button>
																		<p class="todo-comment-head">
																			<span class="todo-comment-username">Olivia Wilde</span> &nbsp; <span class="todo-comment-date">18 Sep 2014 at 11:50am</span>
																		</p>
																		<p class="todo-text-color">
																			Cras sit amet nibh libero, in gravida nulla. Scelerisque ante sollicitudin commodo Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <br>
																		</p>
																	</div>
																</li>
															</ul>
														</div>
													</div>
													<!-- END TASK COMMENTS -->
													<!-- TASK COMMENT FORM -->
													<div class="form-group">
														<div class="col-md-12">
															<ul class="media-list">
																<li class="media">
																	<img class="todo-userpic pull-left" src="../../../assets/admin/layout/img/avatar4.jpg" width="27px" height="27px">
																	<div class="media-body">
																		<textarea class="form-control todo-taskbody-taskdesc" rows="4" placeholder="Type comment..."></textarea>
																	</div>
																</li>
															</ul>
															<button type="button" class="pull-right btn btn-sm btn-circle green-haze"> &nbsp; Submit &nbsp; </button>
														</div>
													</div>
													<!-- END TASK COMMENT FORM -->
												</div>
												<div class="tab-pane" id="tab_2">
													<ul class="todo-task-history">
														<li>
															<div class="todo-task-history-date">
																20 Jun, 2014 at 11:35am
															</div>
															<div class="todo-task-history-desc">
																Task created
															</div>
														</li>
														<li>
															<div class="todo-task-history-date">
																21 Jun, 2014 at 10:35pm
															</div>
															<div class="todo-task-history-desc">
																Task category status changed to "Top Priority"
															</div>
														</li>
														<li>
															<div class="todo-task-history-date">
																22 Jun, 2014 at 11:35am
															</div>
															<div class="todo-task-history-desc">
																Task owner changed to "Nick Larson"
															</div>
														</li>
														<li>
															<div class="todo-task-history-date">
																30 Jun, 2014 at 8:09am
															</div>
															<div class="todo-task-history-desc">
																Task completed by "Nick Larson"
															</div>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END TODO CONTENT -->
		</div>
	</div>
	<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTENT-->

<script>
	Todo.init(); // init todo page
</script>