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

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

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

{% endblock stylesheets %}

{% block content %}

{% load static %}

{% 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>
		</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 forloop.first %} active {% endif %} ">
						<a href="{{slide.link_url}}" target="_blank">
							<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 class="page-inner mt--5">
		<div class="row mt--2">
			<div class="col-md-9">
				<div class="card card-post card-round">
					<div class="card-header">
						<div class="card-title text-primary">Informasi Terkini</div>
					</div>
					<div class="card-body" style="padding-bottom: 0.25rem;padding-top: 0.25rem;">
						{% for z in berita_feat|slice:":3" %}
						<p class="card-category text-info mb-1" style="margin-top: 0px;">
							<a href="{% url 'berita_grup' %}?q={{z.category.slug}} ">{{ z.category.name }}</a>
						</p>
						<h4>
							<a href="{% url 'berita_detil' z.slug %}" class="nav-link pl-0 pr-0">{{ z.title }}</a>
						</h4>
						{% if forloop.last == False %}
							<div class="separator-solid"></div>
						{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="card card-post card-round">
					<div class="card-header">
						<div class="card-head-row">
							<div class="card-title">Berita Lainnya</div>
							<div class="card-tools">
								<ul class="nav nav-pills nav-primary nav-pills-no-bd nav-sm" id="pills-tab" role="tablist">
									{% regroup berita_norm|dictsort:"category.id" by category.name as berita_lain %}

									{% for grup, konten in berita_lain %}
										<li class="nav-item submenu">
											<a class="nav-link {% if forloop.first %}active show{% endif %}" id="v-pills-{{grup|cut:' '}}-tab-nobd"
												data-toggle="pill" href="#v-pills-{{grup|cut:' '}}-nobd" role="tab" aria-controls="v-pills-{{grup|cut:' '}}-nobd" aria-selected="false">{{ grup }}</a>
										</li>
									{% endfor %}
								</ul>
							</div>
						</div>
					</div>
					<div class="card-body" style="padding-bottom: 0.25rem;padding-top: 0.25rem;">						
						<div class="tab-content" id="v-pills-without-border-tabContent">
							{% regroup berita_norm|dictsort:"category.name" by category.name as berita_lain %}
							{% for grup, konten in berita_lain %}
								<div class="tab-pane fade {% if forloop.first %}show active {% endif %}" id="v-pills-{{grup|cut:' '}}-nobd" role="tabpanel" aria-labelledby="v-pills-{{grup|cut:' '}}-tab-nobd">
									{% for z in konten|slice:":5" %}
									<div class="d-flex">
										<div class="flex-1">
											<h4>
												<a href="{% url 'berita_detil' z.slug %}" class="nav-link pl-0 pr-0">{{ z.title }}</a>
											</h>
											<!-- <h6 class="fw-bold mb-1"><span class="text-warning">Author</span></h6> -->
										</div>
									</div>
                                    <div class="row">
                                        <div class="col-md-12 {% if forloop.last %} pb-3 {% endif %}">
                                        	<!-- <span class="text-warning">Author</span> -->
											<span class="float-right mr-2"><small class="text-muted">{{ z.date_added|timesince }}</small></span>
                                        </div>
                                    </div> 
									{% if forloop.last == False %}
										<div class="separator-solid"></div>
									{% endif %}
									{% endfor %}
								</div>
							{% endfor %}
						</div>
		
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card card-profile">
					<div class="card-body" style="padding-top:10px;">
						<div class="user-profile text-center">
							<div class="social-media" style="padding-top: 10px;margin-bottom: 0px">
								<a class="btn btn-info btn-twitter btn-sm btn-link" href="https://twitter.com/ditjenpk?lang=en" target="_blank"> 
									<span class="btn-label just-icon"><i class="fab fa-twitter"></i> </span>
								</a>
								<a class="btn btn-danger btn-sm btn-link" rel="publisher" href="https://www.instagram.com/accounts/login/" target="_blank"> 
									<span class="btn-label just-icon"><i class="fab fa-instagram"></i> </span> 
								</a>
								<a class="btn btn-primary btn-sm btn-link" rel="publisher" href="https://www.facebook.com/ditjenpk" target="_blank"> 
									<span class="btn-label just-icon"><i class="fab fa-facebook-f"></i> </span> 
								</a>
								<a class="btn btn-danger btn-sm btn-link" rel="publisher" href="https://www.youtube.com/channel/UCXytKhqEyuuMwm0z6irXkFg" target="_blank"> 
									<span class="btn-label just-icon"><i class="fab fa-youtube"></i> </span> 
								</a>
							</div>
						</div>
					</div>
				</div>

				{% if ultah %}
				<div class="card card-info bg-info-gradient">
					<div class="card-body">
						<div class="card-title fw-mediumbold">Selamat Ulang Tahun</div>
						{% for i in ultah %}
						<div class="card-list">
							<div class="item-list">
								<div class="avatar">
									<img src="https://account.kemenkeu.go.id/manage/Uploads/Thumbnails/{{i.nipbaru}}.jpg" alt="..." class="avatar-img rounded-circle">
								</div>
								<div class="info-user ml-3">
									<div class="name"><b>{{i.nama | title}}</b></div>
									<div class="status text-white">{{i.esl3 | title}}</div>
								</div>
							</div>
						</div>
						{% endfor %}
					</div>
				</div>
				{% endif %}

				<div class="card card-post card-round">
					<div class="embed-responsive embed-responsive-16by9">
						<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{id_video}}?autoplay=0&mute=1" allowfullscreen></iframe>
					</div>
					<div class="card-body">
						<h5 class="fw-bold mb-1">{{title_video}}</h5>
					</div>
				</div>
				<div class="card card-post card-round">
					<div class="card-body">
						<div class="card-title mt--2">
							<h5 class="text-center font-italic">One Day One Information</h5>
						</div>
						<div class="separator-solid btn-info"></div>
					</div>
					<img class="card-img-top" src="{% static 'assets/img/ODOI.PNG' %}" alt="Card image cap">
				</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 %} ">
						<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 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">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 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>
		<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 %}
