<!DOCTYPE html>
<html lang="en">
<%- include('partials/preloader.ejs', {now:'index', req: req}) %>
<% if (req.query?.guild_id) { %>
	<script>
		window.onload = function () {
			window.onunload = refreshParent;

			function refreshParent() {
				window.opener.location = `/settings/<%= req.query?.guild_id %>`;
				window.close();
				return
			};
			window.opener.location = `/settings/<%= req.query?.guild_id %>`;
			window.close();
		}
	</script>
	<%- themeConfig?.customHtml %>
<% } %>
<head>
</head>
<body class="g-sidenav-show bg-gray-100" id="scroll">
<%- include('partials/preload.ejs') %>
<%- include('partials/sidebar.ejs', {config: config, now:'index'}) %>
<div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
	<!-- Navbar -->
	<%- include('partials/navbar.ejs', {now:'index'}) %>
	<!-- End Navbar -->
	<div class="container-fluid py-4" style="padding-bottom: 0px !important;">
		<div class="row mb-3">
			<%
				let i = 0;
				customThemeOptions.cards.forEach((stats) => {
				%>
				<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
					<div class="card">
						<div class="card-body p-3">
							<div class="row">
								<div class="col-8">
									<div class="numbers">
										<p class="text-sm mb-0 text-capitalize font-weight-bold">
											<%- req?.locales?.index?.feeds[i] || stats.title %></p>
										<h5 class="font-weight-bolder mb-0">
											<%- stats.getValue %>
										</h5>
									</div>
									<% if(stats.progressBar && stats.progressBar.enabled){ %>
										<div class="progress w-150" style="margin-top: 6px;">
											<div style="width: <%= stats.progressBar.getProgress %>% !important"
												 aria-label="Progress Bar"
												 class="progress-bar bg-gradient-primary"
												 role="progressbar" aria-valuenow="80" aria-valuemin="0"
												 aria-valuemax="100"></div>
										</div>
									<% } %>
								</div>
								<div class="col-4 text-end">
									<div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
										<i class="ni ni-<%= stats.icon %> text-lg opacity-10" aria-hidden="true"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<%  i++ }); %>
		</div>
		<div class="row">
			<div class="col-lg-12 mb-lg-0 mb-4">
				<div class="card">
					<div class="card-body p-3">
						<div class="row">
							<div class="col-lg-6">
								<div class="d-flex flex-column h-100">
									<p class="mb-1 pt-2 text-bold"><%- req?.locales?.index?.card?.category %></p>
									<h5 class="font-weight-bolder"><%- req?.locales?.index?.card?.title %></h5>
									<p><%- req?.locales?.index?.card?.description %></p>
									<p class="mb-5"><%= req?.locales?.index?.card?.footer %></p>
									<% if(themeConfig.index?.card?.link?.enabled) { %>
										<a class="text-body text-sm font-weight-bold mb-0 icon-move-right mt-auto"
										   href="<%- themeConfig.index.card.link.url %>">
										   <%- req?.locales?.index?.card?.link?.text %>
											<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
										</a>
									<% } %>
								</div>
							</div>
							<div class="col-lg-5 ms-auto text-center mt-5 mt-lg-0">
								<div class="bg-gradient-primary border-radius-lg h-100"
									 style="background-image: url('<%= req?.locales?.index?.card?.image %>') !important; background-repeat: no-repeat; background-size: contain; background-position: center;">
									<div class="position-relative d-flex align-items-center justify-content-center h-100"
										 style="min-height: 210px !important;">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-3">
			<div class="col-lg-7 mb-lg-0 mb-4">
				<div class="card z-index-2">
					<div class="card-body p-3">
						<h5 class="font-weight-bolder"><%- req?.locales?.index?.feeds.title || "Feeds" %></h5>
						<%- include('partials/feeds.ejs', {require, admin:false}) %>
					</div>
				</div>
			</div>
			<div class="col-lg-5 mb-4">
				<% if(themeConfig.index?.graph?.enabled) { %>
					<div class="card z-index-2">
						<div class="card-body p-3">
							<h5 class="font-weight-bolder"><%- req?.locales?.index?.graph?.title %></h5>
							<% if(themeConfig.index.graph.lineGraph) { %>
							<div class="bg-gradient-dark border-radius-lg py-3 pe-1 mb-3">
								<% } %>
								<div class="chart">
									<% if(!themeConfig.index.graph.lineGraph) { %>
										<canvas id="chart-line" class="chart-canvas" height="300"></canvas>
									<% } else { %>
										<canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
									<% } %>
								</div>
								<% if(themeConfig.index.graph.lineGraph) { %>
							</div>
							<% } %>
						</div>
					</div>
			</div>
		</div>
		<% } %>
	</div>
	<%- include('partials/footer.ejs') %>
</div>
</div>
</main>
</div>
<%- include('partials/scripts.ejs', {now: "index"}) %>
<!--  Graph Code !-->

<%- include('partials/graph.ejs') %>

</body>

</html>