<!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("common:PROFILE") %> <small> Dashboard v1.1 </small> </h1>
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
						<!-- Widget: user widget style 1 -->
						<div class="box box-widget widget-user">
							<!-- Add the bg color to the header using any of the bg-* classes -->
							<div class="widget-user-header bg-red">
								<h3 class="widget-user-username"><%= user.tag %></h3>
							</div>
							<div class="widget-user-image">
								<img class="img-circle" src="<%= user.displayAvatarURL %>" alt="User Avatar">
							</div>
							<div class="box-footer">
								<div class="row">
									<div class="col-sm-12">
										<div class="description-block">
											<span
												class="description-text"><%= user.bio || translate("economy/profile:NO_BIO") %></span>
										</div>
									</div>
									<div class="col-sm-4 border-right">
										<div class="description-block">
											<h5 class="description-header">
												<%= translate("economy/profile:BIRTHDATE").substr(2) %></h5>
											<span
												class="description-text"><%= user.birthdate ? printDate(new Date(user.birthdate)) : translate("economy/profile:NO_BIRTHDATE") %></span>
										</div>
										<!-- /.description-block -->
									</div>
									<!-- /.col -->
									<div class="col-sm-4 border-right">
										<div class="description-block">
											<h5 class="description-header"><%= translate("economy/profile:REGISTERED").substr(2) %></h5>
											<span
												class="description-text"><%= printDate(new Date(user.registeredAt)) %></span>
										</div>
										<!-- /.description-block -->
									</div>
									<!-- /.col -->
									<div class="col-sm-4">
										<div class="description-block">
											<h5 class="description-header">
												<%= translate("economy/profile:LOVER").substr(2) %></h5>
												<span
											class="description-text"><%= !user.lover ? translate("economy/profile:NO_LOVER") : bot.users.cache.get(user.lover).tag %></span>
										</div>
										<!-- /.description-block -->
									</div>
									<!-- /.col -->
								</div>
								<!-- /.row -->
							</div>
						</div>
						<!-- /.widget-user -->
					</div>
					<div class="col-md-12">
						<!-- general form elements -->
						<div class="box box-primary">
							<div class="box-header with-border">
								<h3 class="box-title"><%= translate("common:SETTINGS") %></h3>
							</div>
							<!-- /.box-header -->
							<!-- form start -->
							<form role="form" action="/profile" method="POST">
								<div class="box-body">
									<div class="row">
										<div class="col-md-6">
											<div class="form-group">
												<label><%= translate("economy/profile:BIO").substr(2) %></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").substr(2) %></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:APPLY") %></button>
								</div>
							</form>
						</div>
						<!-- /.box -->
					</div>
					<!-- ./col -->
				</div>
				<!-- /.row -->
				<!-- Info boxes -->
				<div class="row">
					<div class="col-md-3 col-sm-6 col-xs-12">
						<div class="info-box">
							<span class="info-box-icon bg-yellow"><i class="fa fa-star-o"></i></span>
							<div class="info-box-content">
								<span class="info-box-text"><%= translate("economy/profile:REPUTATION").substr(2) %></span>
								<span class="info-box-number"><%= user.rep %></span>
							</div>
							<!-- /.info-box-content -->
						</div>
						<!-- /.info-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>