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

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

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
	.block
{
    float: left;
    width: 90px;
    display: block;
    position: relative;
    text-decoration: none;
}

.block:nth-child(2)
{
    margin: 0 50px;
}
.BR {
    float:right
}
.post{
    padding-top:10px;
}
.post:hover{
   background-color:#EFF6FF;
}
.card-title{
    margin-bottom: 15px;
    font-weight: bold;
}
.cardS
{
    width: 45px;
    padding-bottom: 5px;
    background-size: cover;
    box-shadow: 0 10px 20px -5px #b6b6b6;
}

.c_c_card
{
    position: absolute;
    top: 0;
    width: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out width;
}

.block:hover .c_c_card
{
    width: 100%;
}

#c_fb
{
    background-color: #4267b2;
}
 

.cc_card
{
    background-color: #fff;
}

#c_tw
{
    background-color: #1da1f2;
}
#c_ig
{
    background: radial-gradient(circle at 20% 130%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);;
}
 
#c_gl
{
    background-color: #d93025;
}

#c_gl, #c_o_gl
{
    background-image: url("https://archive.org/download/larry_201905/larry.png");
}

.c_brand_logo
{
    color: #fff;
    font-size: 15px;
    padding: 5px 5px 0 5px;
    
}

#c_o_fb .c_brand_logo
{
    color: #4267b2;
}

#c_o_tw .c_brand_logo
{
    color: #1da1f2;
}

#c_o_gl .c_brand_logo
{
    color: #d93025;
}
#c_o_ig .c_brand_logo
{
    color: #d93025;
}

.c_brand_logo i
{
    width: 30px; 
    display: block;
    text-align: center;
    padding: 13px;
    margin: 0 auto;
    border-radius: 50%;
}

#c_fb .c_brand_logo i
{
    background-color: rgba(66, 103, 178, 0.79);
}

#c_tw .c_brand_logo i
{
    background-color: rgba(29, 161, 242, 0.79);
}

#c_gl .c_brand_logo i
{
    background-color: rgba(217, 48, 37, 0.79);
}

.cc_card .c_brand_logo i
{
    background-color: rgba(255, 255, 255, 0.79);
}
</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>
		</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}}">
							<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-12">
				<div class="card full-height">
					<div class="card-body">
						{% comment %} <div class="card-title">Informasi Terkini</div> {% endcomment %}
						<section class="row mt--2">  
							{% for z in berita_feat|slice:":4" %}
							<div class="post col-md-3 col-sm-6">
								<div class="post-thumbnail"><a href="/{{z.slug}}"><img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" alt="..." class="img-fluid"></a></div>
								<div class="post-details">
								  <div class="post-meta d-flex justify-content-between">
									<div class="category text-danger"><a href="/#">{{ z.category.name }}</a></div>
								  </div><a href="/{{z.slug}}">
									<h5 >
										<b>{{ z.title }}</b></h5></a> 
								</div>
							</div>
						{% endfor %}

							<!-- <div class="post col-md-3 col-sm-6">
								<div class="post-thumbnail"><a href="post.html"><img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" alt="..." class="img-fluid"></a></div>
								<div class="post-details">
								  <div class="post-meta d-flex justify-content-between">
									<div class="category"><a href="#">Zoominar</a></div>
								  </div><a href="post.html">
									<h5><b>Zoominar UU HKPD : Menuju Penguatan Desentralisasi Fiskal Untuk Pemerataan Kesejahteraan Masyarakat oleh BPPK</b></h5></a>
								</div>
							  </div>
							  <div class="post col-md-3 col-sm-6">
								<div class="post-thumbnail"><a href="post.html"><img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" alt="..." class="img-fluid"></a></div>
								<div class="post-details">
								  <div class="post-meta d-flex justify-content-between">
									<div class="category"><a href="#">Kabar Duka</a></div>
								  </div><a href="post.html">
									<h5><b>Berita Duka dari Keluarga Bapak Ahmad Yani</h5></b></a></div>
							  </div>
							  <div class="post col-md-3 col-sm-6">
								<div class="post-thumbnail"><a href="post.html"><img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" alt="..." class="img-fluid"></a></div>
								<div class="post-details">
								  <div class="post-meta d-flex justify-content-between">
									<div class="category"><a href="#">DWP</a></div>
								  </div><a href="post.html">
									<h5><b>Peringatan HUT DWP Kemenkeu ke-22</b></h5></a>
								</div>
							  </div> -->
						</section>
						
					</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>

							{% for z in berita_norm %}
							<div class="row mt--2 ">  
								<div class="col-md-4 mb-4  ">
									<img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" class="img-fluid" />
								</div>
								<div class="col-md-8 mb-4">
									<header class="post-header">
										<div class="category text-danger"><a href="#">{{z.category.name}}</a></div><a href="post.html">
										<h4><b>{{z.title}}</b></h4></a>
									</header>
									{{ z.isi|slice:":100" |safe }}
									<button type="button" class="btn btn-primary btn-sm BR">Selengkapnya</button>
								</div>
							</div>
							{% endfor %}

							<!-- <div class="row mt--2"> 
								<div class="col-md-4 mb-4">
									<img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" class="img-fluid" />
								</div>
								<div class="col-md-8 mb-4">
									<header class="post-header">
										<div class="category"><a href="#">Kepegawaian</a></div><a href="post.html">
										<h4><b>Kewajiban untuk Penyelesaian e-Learning Mandatory Kompetensi DJPK</b>
										</h4></a>
									</header> 
										Seiring dengan rekapitulasi pembelajaran pegawai DJPK bulan November 2021 terdapat beberapa pejabat/pegawai DJPK yg belum memenuhi standar. Berikut kami sampaikan ...
									<button type="button" class="btn btn-primary btn-sm BR">Selengkapnya</button>
								</div>
							</div>
							<div class="row mt--2"> 
								<div class="col-md-4 mb-4">
									<img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" class="img-fluid" />
								</div>
								<div class="col-md-8 mb-4">
									<header class="post-header">
										<div class="category"><a href="#">TIK DJPK</a></div><a href="post.html">
										<h4><b>
											Jadwal Maintenance untuk beberapa Aplikasi Internal DJPK</b></h4></a>
									</header> 
										Yth. Bapak/Ibu Pegawai DJPK, Sehubungan dengan akan diadanyakan maintenance atau pemeliharaan terhadap beberapa perangkat yang ada di area NOC DJPK pada tanggal 16 - 20 Desember 2021, maka beberapa aplikasi intranet tidak akan ...
									<button type="button" class="btn btn-primary btn-sm BR">Selengkapnya</button>
								</div>
							</div>
							<div class="row mt--2"> 
								<div class="col-md-4 mb-4">
									<img src="https://dummyimage.com/218x155/000000/fff.png&text=Photo+1" class="img-fluid" />
								</div>
								<div class="col-md-8 mb-4">
									<header class="post-header">
										<div class="category"><a href="#">FGD</a></div><a href="post.html">
										<h4>
										</b>Pelaksanaan Focus Group Discussion (FGD) Triwulan IV</b></h4></a>
									</header>						
										Yth. Bapak/Ibu
										Sehubungan dengan amanat pada Surat Edaran Menteri Keuangan nomor SE-3/MK.1/2020 tentang Pelaksanaan Focus Group Discussion (FGD) di Lingkungan Kementerian Keuangan,...
									<button type="button" class="btn btn-primary btn-sm BR">Selengkapnya</button>
								</div>
							</div> -->
							
							  
						
					</div>
				</div>
			</div>
			<div class="col-md-3">
				{% comment %} <div class="card"> {% endcomment %}
					<div class="card-body">  
							<div class="row mt--2">
							<div class="col-md-3 col-sm-3">
								<a href="https://www.facebook.com/ditjenpk" target="_blank" class="block">
									<div class="cardS" id="c_fb">
										<div class="c_brand_logo"><i class="fab fa-facebook-f"></i></div>
									</div>
									<div class="c_c_card">
										<div class="cardS cc_card" id="c_o_fb">
											<div class="c_brand_logo"><i class="fab fa-facebook-f"></i></div> 
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 col-sm-3">
								<a href="https://www.youtube.com/channel/UCXytKhqEyuuMwm0z6irXkFg" target="_blank" class="block">
									<div class="cardS" id="c_gl">
										<div class="c_brand_logo"><i class="fab fa-youtube"></i></div>
									</div>
									<div class="c_c_card">
										<div class="cardS cc_card" id="c_o_gl">
											<div class="c_brand_logo"><i class="fab fa-youtube"></i></div> 
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 col-sm-3">
								<a href="https://twitter.com/ditjenpk?lang=en" target="_blank" class="block">
									<div class="cardS" id="c_tw">
										<div class="c_brand_logo"><i class="fab fa-twitter"></i></div> 
									</div>
									<div class="c_c_card">
										<div class="cardS cc_card" id="c_o_tw">
											<div class="c_brand_logo"><i class="fab fa-twitter"></i></div> 
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 col-sm-3">
								<a href="https://www.instagram.com/accounts/login/" target="_blank" class="block">
									<div class="cardS" id="c_ig">
										<div class="c_brand_logo"><i class="fab fa-instagram"></i></div> 
									</div>
									<div class="c_c_card">
										<div class="cardS cc_card" id="c_o_ig">
											<div class="c_brand_logo"><i class="fab fa-instagram"></i></div> 
										</div>
									</div>
								</a>
							</div>
							 
						
														
							</div>
						 
					</div>
				{% comment %} </div> {% endcomment %}
				<!-- <div class="card card-primary bg-primary-gradient  ">
					<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 %} ">
						<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 %}
