{% extends "layouts/base.html" %}

{% block title %} Home{% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
.b-0 {
    bottom: 0;
}
.bg-shadow {
    background: rgba(76, 76, 76, 0);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));
    background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.top-indicator {
    right: 0;
    top: 1rem;
    bottom: inherit;
    left: inherit;
    margin-right: 1rem;
}
.overflow {
    position: relative;
    overflow: hidden;
}
.zoom img {
    transition: all 0.2s linear;
}
.zoom:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.info-user {
    font-size:12px;
}
</style>
{% endblock stylesheets %}


{% block content %}

	{% if request.user.is_authenticated %}
	<div class="content">
		<div class="panel-header bg-default-gradient">
			<div class="page-inner py-5">
				<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
					<div>
						<h2 class="text-black pb-2 fw-bold">PLATFORM SINERGI DAN KOLABORASI DIGITAL DJPK</h2>
						<h5 class="text-black op-7 mb-2">Menuju DJPK yang Kreatif, Energetik, Reformis, Efektif dan Nasionalis (DJPK Keren)</h5>
					</div>
					<div class="ml-md-auto py-2 py-md-0">
						<a href="#" class="btn btn-info btn-border btn-round mr-2">Data</a>
						<a href="#" class="btn btn-secondary btn-round">Informasi</a>
					</div>
				</div>
			</div>
		</div>
		<div class="page-inner mt--5">
			<div class="row mt--2">
				<div class="col-md-6">
					<div class="card full-height">
						<div class="card-body">
							<div class="card-title">Statistik Realisasi</div>
							<div class="card-category">Informasi Capaian Realisasi Terkini</div>
							<div class="d-flex flex-wrap justify-content-around pb-2 pt-4">
								<div class="px-2 pb-2 pb-md-0 text-center">
									<div id="circles-1"></div>
									<h6 class="fw-bold mt-3 mb-0">APBN</h6>
								</div>
								<div class="px-2 pb-2 pb-md-0 text-center">
									<div id="circles-2"></div>
									<h6 class="fw-bold mt-3 mb-0">TKDD</h6>
								</div>
								<div class="px-2 pb-2 pb-md-0 text-center">
									<div id="circles-3"></div>
									<h6 class="fw-bold mt-3 mb-0">APBD</h6>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="card full-height">
						<div class="card-body">
							<div class="card-title">Total Realisasi Penyaluran TKDD</div>
							<div class="row py-3">
								<div class="col-md-4 d-flex flex-column justify-content-around">
									<div>
										<h6 class="fw-bold text-uppercase text-success op-8">Total Alokasi</h6>
										<h3 class="fw-bold">779 Triliun</h3>
									</div>
									<div>
										<h6 class="fw-bold text-uppercase text-danger op-8">Total Realisasi</h6>
										<h3 class="fw-bold">500 Triliun</h3>
									</div>
								</div>
								<div class="col-md-8">
									<div id="chart-container">
										<canvas id="totalIncomeChart"></canvas>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			{% comment %} yg bawah {% endcomment %}
			<div class="row mt--2">
				<div class="col-md-9">
					<div class="card full-height">
						<div class="card-body">
							<div class="card-title">Informasi Terkini</div>
							<section class="row mt--2">
								<!--Start slider news-->
								<div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
									<div id="featured" class="carousel slide carousel" data-ride="carousel">
										<!--dots navigate-->
										<ol class="carousel-indicators top-indicator">
											<li data-target="#featured" data-slide-to="0" class="active"></li>
											<li data-target="#featured" data-slide-to="1"></li>
											<li data-target="#featured" data-slide-to="2"></li>
											<li data-target="#featured" data-slide-to="3"></li>
										</ol>
										
										<!--carousel inner-->
										<div class="carousel-inner">
											<!--Item slider-->
											<div class="carousel-item active">
												<div class="border-0 rounded-0 text-light overflow zoom">
													<div class="position-relative">
														<!--thumbnail img-->
														<div class="ratio_left-cover-1 image-wrapper">
															<a href="http://www.djpk.kemenkeu.go.id/?p=10508" target="_blank">
																<img class="img-fluid w-100"
																	 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+1"
																	 alt="Video Edukasi Pajak Daerah dan Retribusi Daerah">
															</a>
														</div>
														<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
															<!--title-->
															<a href="http://www.djpk.kemenkeu.go.id/?p=10508" target="_blank">
																<h2 class="h3 post-title text-white my-1">Video Edukasi Pajak Daerah dan Retribusi Daerah</h2>
															</a>
															<!-- meta title -->
															<div class="news-meta">
																<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Admin DJPK</a></span>
																<span class="news-date">Oct 22, 2019</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											
											<!--Item slider-->
											<div class="carousel-item">
												<div class="card border-0 rounded-0 text-light overflow zoom">
													<div class="position-relative">
														<!--thumbnail img-->
														<div class="ratio_left-cover-1 image-wrapper">
															<a href="https://hori.kemenkeu.go.id/" target="_blank">
																<img class="img-fluid w-100"
																	 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+2"
																	 alt="Hori Kemenkeu">
															</a>
														</div>
														<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
															<!--title-->
															<a href="https://hori.kemenkeu.go.id/" target="_blank">
																<h2 class="h3 post-title text-white my-1">Hori Kemenkeu</h2>
															</a>
															<!-- meta title -->
															<div class="news-meta">
																<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Admin DJPK</a></span>
																<span class="news-date">Oct 22, 2021</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											
											<!--Item slider-->
											<div class="carousel-item">
												<div class="cardK border-0 rounded-0 text-light overflow zoom">
													<div class="position-relative">
														<!--thumbnail img-->
														<div class="ratio_left-cover-1 image-wrapper">
															<a href="http://www.djpk.kemenkeu.go.id/?page_id=20581" target="_blank">
																<img class="img-fluid w-100"
																	 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+3"
																	 alt="Rincian Alokasi TKDD">
															</a>
														</div>
														<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
															<!--title-->
															<a href="http://www.djpk.kemenkeu.go.id/?page_id=20581" target="_blank">
																<h2 class="h3 post-title text-white my-1">Rincian Alokasi TKDD</h2>
															</a>
															<!-- meta title -->
															<div class="news-meta">
																<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Admin DJPK</a></span>
																<span class="news-date">Nov 22, 2019</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											
											<!--Item slider-->
											<div class="carousel-item">
												<div class="cardK border-0 rounded-0 text-light overflow zoom">
													<div class="position-relative">
														<!--thumbnail img-->
														<div class="ratio_left-cover-1 image-wrapper">
															<a href="http://www.djpk.kemenkeu.go.id/?p=21927" target="_blank">
																<img class="img-fluid w-100"
																	 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+4"
																	 alt="Pembahasan RUU HKPD dalam Raker Panja HKPD">
															</a>
														</div>
														<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
															<!--title-->
															<a href="http://www.djpk.kemenkeu.go.id/?p=21927" target="_blank">
																<h2 class="h3 post-title text-white my-1">Pembahasan RUU HKPD dalam Raker Panja HKPD</h2>
															</a>
															<!-- meta title -->
															<div class="news-meta">
																<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Admin DJPK</a></span>
																<span class="news-date">Oct 22, 2019</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<!--end item slider-->
										</div>
										<!--end carousel inner-->
									</div>
									
									<!--navigation-->
									<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
										<span class="carousel-control-prev-icon" aria-hidden="true"></span>
										<span class="sr-only">Previous</span>
									</a>
									<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
										<span class="carousel-control-next-icon" aria-hidden="true"></span>
										<span class="sr-only">Next</span>
									</a>
								</div>
								<!--End slider news-->
								
								<!--Start box news-->
								<div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
									<div class="row">
										<!--news box-->
										<div class="col-6 pb-1 pt-0 pr-1">
											<div class="cardK border-0 rounded-0 text-white overflow zoom">
												<div class="position-relative">
													<!--thumbnail img-->
													<div class="ratio_right-cover-2 image-wrapper">
														<a href="http://www.djpk.kemenkeu.go.id/?tag=peraturan-presiden" target="_blank">
															<img class="img-fluid"
																 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+5"
																 alt="Peraturan Preside">
														</a>
													</div>
													<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
														<!-- category -->
														<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/source/img5.jpg">Perpres</a>
				
														<!--title-->
														<a href="http://www.djpk.kemenkeu.go.id/?tag=peraturan-presiden" target="_blank">
															<h2 class="h5 text-white my-1">Peraturan Presiden Terkini</h2>
														</a>
													</div>
												</div>
											</div>
										</div>
										
										<!--news box-->
										<div class="col-6 pb-1 pl-1 pt-0">
											<div class="cardK border-0 rounded-0 text-white overflow zoom">
												<div class="position-relative">
													<!--thumbnail img-->
													<div class="ratio_right-cover-2 image-wrapper">
														<a href="http://www.djpk.kemenkeu.go.id/?tag=peraturan-menteri-keuangan" target="_blank">
															<img class="img-fluid"
																 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+6"
																 alt="PMK">
														</a>
													</div>
													<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
														<!-- category -->
														<a class="p-1 badge badge-primary rounded-0" href="http://www.djpk.kemenkeu.go.id/?tag=peraturan-menteri-keuangan" target="_blank">PMK</a>
														<!--title-->
														<a href="http://www.djpk.kemenkeu.go.id/?tag=peraturan-menteri-keuangan" target="_blank">
															<h2 class="h5 text-white my-1">Peraturan Menteri Keuangan</h2>
														</a>
													</div>
												</div>
											</div>
										</div>
										
										<!--news box-->
										<div class="col-6 pb-1 pr-1 pt-1">
											<div class="cardK border-0 rounded-0 text-white overflow zoom">
												<div class="position-relative">
													<!--thumbnail img-->
													<div class="ratio_right-cover-2 image-wrapper">
														<a href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-menteri-keuangan" target="_blank">
															<img class="img-fluid"
																 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+7"
																 alt="keputusan Menteri Keuangan">
														</a>
													</div>
													<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
														<!-- category -->
														<a class="p-1 badge badge-primary rounded-0" href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-menteri-keuangan" target="_blank">KMK</a>
														<!--title-->
														<a href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-menteri-keuangan" target="_blank">
															<h2 class="h5 text-white my-1">Keputusan Menteri Keuangan</h2>
														</a>
													</div>
												</div>
											</div>
										</div>
										
										<!--news box-->
										<div class="col-6 pb-1 pl-1 pt-1">
											<div class="cardK border-0 rounded-0 text-white overflow zoom">
												<div class="position-relative">
													<!--thumbnail img-->
													<div class="ratio_right-cover-2 image-wrapper">
														<a href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-dan-peraturan-lainnya" target="_blank">
															<img class="img-fluid"
																 src="https://dummyimage.com/418x355/000000/fff.png&text=Photo+8"
																 alt="blog website templates bootstrap">
														</a>
													</div>
													<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
														<!-- category -->
														<a class="p-1 badge badge-primary rounded-0" href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-dan-peraturan-lainnya" target="_blank">Lainnya</a>
														<!--title-->
														<a href="http://www.djpk.kemenkeu.go.id/?tag=keputusan-dan-peraturan-lainnya" target="_blank">
															<h2 class="h5 text-white my-1">Keputusan dan Peraturan Lainnya</h2>
														</a>
													</div>
												</div>
											</div>
										</div>
										<!--end news box-->
									</div>
								</div>
								<!--End box news-->
							</section>
							
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card card-primary bg-primary-gradient full-height">
						<div class="card-body">
							<div class="card-title fw-mediumbold">Selamat Ulang Tahun</div>
							<div class="card-list">
								<div class="item-list">
									<div class="avatar">
										<img src="https://account.kemenkeu.go.id/manage/Uploads/Thumbnails/199503182018012003.jpg" alt="..." class="avatar-img rounded-circle">
									</div>
									<div class="info-user ml-3">
										<div class="name"><b>Rizky Herliana</b></div>
										<div class="position">Subdirektorat Transformasi SIKD </div>
									</div> 
								</div>
								<div class="item-list">
									<div class="avatar">
										<img src="https://account.kemenkeu.go.id/manage/Uploads/Thumbnails/199701062018012001.jpg" alt="..." class="avatar-img rounded-circle">
									</div>
									<div class="info-user ml-3">
										<div class="name"><b>Euis Ulfah Nurlatifah</b></div>
										<div class="position">Subdirektorat Transformasi SIKD</div>
									</div> 
								</div>
								<div class="item-list">
									<div class="avatar">
										<img src="https://account.kemenkeu.go.id/manage/Uploads/Thumbnails/198407292006021001.jpg" alt="..." class="avatar-img rounded-circle">
									</div>
									<div class="info-user ml-3">
										<div class="name"><b>Erdhany Dwi Cahyadi</b></div>
										<div class="position">Fungsional Pranata Komputer</div>
									</div> 
								</div>
								<div class="item-list">
									<div class="avatar">
										<img src="https://account.kemenkeu.go.id/manage/Uploads/Thumbnails/197904182001121002.jpg" alt="..." class="avatar-img rounded-circle">
									</div>
									<div class="info-user ml-3">
										<div class="name"><b>Arman Gunawan</b></div>
										<div class="position">Kasubdit PABDIOTI</div>
									</div> 
								</div>
							</div>
						</div>
					</div>
				
				</div>
			</div>
		</div>
	</div>
	{% else %}
	<div class="content">
		<div class="panel-header bg-primary-gradient">
			<div class="page-inner py-5">
				<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
					<div>
						<h1 class="text-white pb-2 fw-bold">{{ headline }} </h1>
					</div>
					<div class="ml-md-auto py-2 py-md-0">
						<a href="/pemda" class="btn btn-white btn-border btn-round">PEMDA</a>
						<a href="/developer" class="btn btn-white btn-border btn-round">DEVELOPER</a>
					</div>
				</div>
			</div>
		</div>
		<div class="page-inner mt--5">
			<!--banner start-->
			<div class=" row mt--2">
				<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner">
						<!---start carousel-->
						{% for slide in List_Banner %}
						<div class="carousel-item 
								{% if slide.id == 1 %}
									active
								{% endif %}
								">
							<div class="col-md-12">
								<div class="card full-height">
									<div class="card-body">
										<img src="media/{{ slide.image }}" class="d-block w-100" alt="...">
										<div class="carousel-caption d-none d-md-block">
											<h2>{{ slide.title }}</h2>
											<p>{{ slide.cta }}</p>
										</div>
									</div>
								</div>
							</div>
	
						</div>
						{% endfor %}
						<!---end carousel-->
					</div>
					<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
			<!--banner end-->
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-head-row">
								<div class="card-title text-primary"><span class="h2">OVERVIEW SIKD</span></div>
								<div class="card-tools">
									<ul class="nav nav-pills nav-secondary nav-pills-no-bd" id="pills-tab-without-border"
										role="tablist">
										<li class="nav-item">
											<a class="nav-link active" id="pills-home-tab-nobd" data-toggle="pill"
												href="#pills-home-nobd" role="tab" aria-controls="pills-home-nobd"
												aria-selected="true">Sekilas</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill"
												href="#pills-profile-nobd" role="tab" aria-controls="pills-profile-nobd"
												aria-selected="false">Regulasi</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" id="pills-contact-tab-nobd" data-toggle="pill"
												href="#pills-contact-nobd" role="tab" aria-controls="pills-contact-nobd"
												aria-selected="false">Pembakuan</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="card-body">
							<div class="tab-content" id="pills-without-border-tabContent">
								<div class="tab-pane fade show active" id="pills-home-nobd" role="tabpanel"
									aria-labelledby="pills-home-tab-nobd">
									<div style="text-align:justify">
										{% for konten in Konten_Sekilas %}
										{% autoescape off %}
										{{ konten.isi }}
										{% endautoescape %}
										{% endfor %}
									</div>
								</div>
								<div class="tab-pane fade" id="pills-profile-nobd" role="tabpanel"
									aria-labelledby="pills-profile-tab-nobd">
									<div class="card-body" style="text-align:justify">
										{% for konten in Konten_Regulasi %}
										{% autoescape off %}
										{{ konten.isi }}
										{% endautoescape %}
										{% endfor %}
									</div>
								</div>
								<div class="tab-pane fade" id="pills-contact-nobd" role="tabpanel"
									aria-labelledby="pills-contact-tab-nobd">
									<div class="card-body">
										{% for konten in Konten_Pembakuan %}
										{% autoescape off %}
										{{ konten.isi }}
										{% endautoescape %}
										{% endfor %}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- <div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-head-row">
								<div class="card-title text-primary"><span class="h2">SIKD ONE EKOSISTEM </span></div>
							</div>
						</div>
						<div class="card-body">
							<div class=" row mt--2">
								{% for data in List_Ekosistem %}
								<div class="col-md-2">
									<a href="{{data.link_url}}">
										<button class="{{data.button_class}}" style="width:100%;">
											<span class="btn-label">
												<i class="{{ data.icon }}"></i>
											</span>
											{{ data.caption }}
										</button>
									</a>
								</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div> -->

				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-head-row">
								<div class="card-title text-primary"><span class="h2">SIKD ONE EKOSISTEM </span></div>
							</div>
						</div>
						<div class="card-body">
							<div class="row">
								{% for url, title, img in layanan_sikd %}
									<div class="col-md-3">
										<a href="{{ url }}" class="btn btn-light btn-rounded btn-sm" target="_blank">
											<img class="card-img-top" src="{{ img }}" style="width:30%;" alt="{{ title }}">
											<code class="text-primary"><h5>{{ title|upper }}</h5></code>
										</a>
									<div class="card-body text-center">
										<div class="card-desc">
											
										</div>
									</div>
									</div>
								{% endfor %}

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row row-card-no-pd">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-head-row card-tools-still-right">
								<div class="card-title text-primary"><span class="h2">TOPIK FAQ SIKD</span></div>
							</div>
						</div>
						<div class="card-body">
							{% for category in List_Category %}
							<h3><a href="{% url 'faq:category_detail' category.slug %}"></i>{{category.name}} </a></h3>
							{% if category.description %}
							<p>{{category.description}}</p>
							{% endif %}
							<hr style="height:0.5px;background-color:blue">
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	{% endif%}
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
	<!-- JS Sinergi-->
	<script src="/static/assets/js/sinergi.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/wrick17/calendar-plugin@master/calendar.min.js"></script>

	{% if request.user.is_authenticated %}
	<script>

		Circles.create({
			id:'circles-1',
			radius:45,
			value:60,
			maxValue:100,
			width:7,
			text: 5,
			colors:['#f1f1f1', '#FF9E27'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-2',
			radius:45,
			value:70,
			maxValue:100,
			width:7,
			text: 36,
			colors:['#f1f1f1', '#2BB930'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-3',
			radius:45,
			value:40,
			maxValue:100,
			width:7,
			text: 12,
			colors:['#f1f1f1', '#F25961'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		var totalIncomeChart = document.getElementById('totalIncomeChart').getContext('2d');

		var mytotalIncomeChart = new Chart(totalIncomeChart, {
			type: 'bar',
			data: {
				labels: ["DBH", "DAU", "DAK FISIK", "DAKNONFISIK", "DID", "OTSUS", "DIY", "DANA DESA"],
				datasets : [{
					label: "Total Income",
					backgroundColor: '#ff9e27',
					borderColor: 'rgb(23, 125, 255)',
					data: [6, 4, 9, 5, 4, 6, 4, 3, 8, 10],
				}],
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				legend: {
					display: false,
				},
				scales: {
					yAxes: [{
						ticks: {
							display: false //this will remove only the label
						},
						gridLines : {
							drawBorder: false,
							display : false
						}
					}],
					xAxes : [ {
						gridLines : {
							drawBorder: false,
							display : false
						}
					}]
				},
			}
		});

		$('#lineChart').sparkline([105,103,123,100,95,105,115], {
			type: 'line',
			height: '70',
			width: '100%',
			lineWidth: '2',
			lineColor: '#ffa534',
			fillColor: 'rgba(255, 165, 52, .14)'
		});

		
	</script>
	{% endif %}
{% endblock javascripts %}