{% extends 'base.html' %}

<!-- {% load static %} -->

{% block body %}
    {% include 'navbar.html' %}
	<div class="pcoded-main-container">
		<div class="pcoded-content">
			<!-- [ breadcrumb ] start -->
			<div class="page-header">
				<div class="page-block">
					<div class="row align-items-center">
						<div class="col-md-12">
							<div class="page-header-title">
								<h5 class="m-b-10">Dashboard</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- [ breadcrumb ] end -->
			<!-- [ Main Content ] start -->
			<div class="row">
				<div class="col-lg-4 col-md-6">
					<div class="card">
						<div class="card-body">
							<div class="row align-items-center">
								<div class="col-8">
									<h4 class="text-c-yellow">{{users}}</h4>
									<h6 class="text-muted m-b-0">Users</h6>
								</div>
								<div class="col-4 text-right">
									<i class="feather icon-users f-28"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="card">
						<div class="card-body">
							<div class="row align-items-center">
								<div class="col-8">
									<h4 class="text-c-green">{{movies}}</h4>
									<h6 class="text-muted m-b-0">Movies</h6>
								</div>
								<div class="col-4 text-right">
									<i class="feather icon-film f-28"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="card">
						<div class="card-body">
							<div class="row align-items-center">
								<div class="col-8">
									<h4 class="text-c-red">{{ott}}</h4>
									<h6 class="text-muted m-b-0">OTT</h6>
								</div>
								<div class="col-4 text-right">
									<i class="fa fa-film f-28"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>

	// var options = {
	// 	chart: {
	// 		type: 'line'
	// 	},
	// 	series: [{
	// 		name: 'Sales',
	// 		data: []
	// 	}],
	// 	xaxis: {
	// 		categories: []
	// 	}
	// }
	// var chart = new ApexCharts(document.querySelector("#realtime-visit-chart"), options);

	// chart.render();


</script>