<!DOCTYPE html>
<html>

	<%- include('includes/head') %>

	<!-- bootstrap datepicker -->
	<link rel="stylesheet" href="/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

	<body class="hold-transition skin-red sidebar-mini">

		<div class="wrapper">

			<!-- The header is the topbar -->
			<%- include('includes/header') %>

			<!-- The sidebar includes the menu -->
			<%- include('includes/sidebar') %>

			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">

				<!-- Content Header (Page header) -->
				<section class="content-header">
					<h1> <%= translate("UTILS").SETTINGS %> <small> Dashboard v1.0 </small> </h1>
				</section>

				<!-- Main content -->
				<section class="content">

					<!-- Info boxes -->
					<div class="row">
						<div class="col-md-12">
							<!-- general form elements -->
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><%= translate("economy/profile:YOUR_PROFILE") %></h3>
								</div>
								<!-- /.box-header -->
								<!-- form start -->
								<form role="form" action="/settings" method="POST">
									<div class="box-body">
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label><%= translate("economy/profile:BIO") %></label>
													<input name="bio" class="form-control" placeholder="<%= user.bio || translate("economy/profile:NO_BIO") %>">
												</div>
												<div class="form-group">
													<label><%= translate("economy/profile:BIRTHDATE") %></label>
													<div class="input-group date">
														<div class="input-group-addon">
														<i class="fa fa-calendar"></i>
														</div>
														<input type="text" name="birthdate" class="form-control pull-right" id="datepicker" placeholder="<%= printDate(new Date(user.birthdate)) %>">
													</div>
													<!-- /.input group -->
												</div>
												<!-- /.form group -->
											</div>
										</div>
									</div>
									<!-- /.box-body -->
									<div class="box-footer">
										<button type="submit" class="btn btn-primary"><%= translate("common:UPDATE") %></button>
									</div>
								</form>
							</div>
						  <!-- /.box -->
						</div>
						<!-- ./col -->
					</div>
					<!-- /.row -->
				</section>
				<!-- /.content -->
			</div>
			<!-- /.content-wrapper -->
			<%- include('includes/footer') %>
		</div>
		<!-- ./wrapper -->
		<!-- bootstrap datepicker -->
		<script src="/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<!-- ChartJS -->
		<script src="/bower_components/chart.js/Chart.js"></script>
		<script>
			$(function(){
				$("#datepicker").datepicker({
					language: "ru",
					title: "Выбор даты",
					format: 'dd/mm/yyyy',
					clearBtn: true,
					autoclose: true,
					zIndexOffset: 5
				});
			});
		</script>
	</body>
</html>