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

{% block title %} Dashboard {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
{% if request.user.is_authenticated %}
	<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>
						<h2 class="text-white pb-2 fw-bold">Dashboard</h2>
						<h5 class="text-white op-7 mb-2">Ini Index dari Sinergi</h5>
						<!-- {% for key, values in data.items %}
						<h5>{{ key }}</h5>

							{% for v in values.0 %}
								<p>{{ v }}</p>
							{% endfor %}
	
						{% endfor %} -->
					</div>
					<div class="ml-md-auto py-2 py-md-0">
						<a href="#" class="btn btn-white btn-border btn-round mr-2">Manage</a>
						<a href="#" class="btn btn-secondary btn-round">Add Customer</a>
					</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 %} ">
								<a href="{{slide.link_url}}">
									<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>
	
								</a>
								
							</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>
		</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">
							<!--- ekosistem -->
							{% 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 %}
							<!-- end ekosistem-->
						</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 %}

	<!-- Atlantis DEMO methods, don't include it in your project! -->
	<script src="/static/assets/js/setting-demo.js"></script>
	<!-- <script src="/static/assets/js/demo.js"></script> -->

{% endblock javascripts %}
