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

{% block title %} Panels {% endblock %} 

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

{% block content %}

	<div class="content">
		<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Produk</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="#">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="/">Home</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Produk</a>
					</li>
				</ul>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<ul class="nav nav-pills nav-secondary nav-pills-no-bd nav-pills-icons justify-content-center" id="pills-tab-with-icon" role="tablist">
								<li class="nav-item">
									<a class="nav-link" id="pills-profile-tab-icon" data-toggle="pill" href="#pills-profile-icon" role="tab" aria-controls="pills-profile-icon" aria-selected="false">
										<i class="flaticon-user-4"></i>
										SOP
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link active" id="pills-contact-tab-icon" data-toggle="pill" href="#pills-contact-icon" role="tab" aria-controls="pills-contact-icon" aria-selected="false">
										<i class="flaticon-mailbox"></i>
										Produk
									</a>
								</li>
							</ul>
							<div class="tab-content mt-2 mb-3" id="pills-with-icon-tabContent">
								<div class="tab-pane fade" id="pills-profile-icon" role="tabpanel" aria-labelledby="pills-profile-tab-icon">
									<br>

									<div class="alert alert-success" role="alert">
										<p class="card-title">SOP Subdirektorat Transformasi Sistem Informasi Keuangan Daerah</p>
									</div>

									<div class="row justify-content-center align-items-center mb-1">
										<div class="col-md-3 pl-md-0">
											<div class="card card-pricing">
												<div class="card-header">
													<h5 class="card-title">PPSIKD</h5>
												</div>
												<div class="card-body">
													<ul class="specification-list">
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="col-md-3 pl-md-0">
											<div class="card card-pricing">
												<div class="card-header">
													<h5 class="card-title">PKSIKD</h5>
												</div>
												<div class="card-body">
													<ul class="specification-list">
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="col-md-3 pl-md-0">
											<div class="card card-pricing">
												<div class="card-header">
													<h5 class="card-title">SSIKD</h5>
												</div>
												<div class="card-body">
													<ul class="specification-list">
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="col-md-3 pl-md-0">
											<div class="card card-pricing">
												<div class="card-header">
													<h5 class="card-title">MPKSIKD</h5>
												</div>
												<div class="card-body">
													<ul class="specification-list">
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
														<li>
															<span class="name-specification">Assessment dan Inventarisasi Kebutuhan TI (resource forum)</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade show active" id="pills-contact-icon" role="tabpanel" aria-labelledby="pills-contact-tab-icon">

									<br>
									<div class="alert alert-success" role="alert">
										<p class="card-title">Produk: BAGIAN ORGANISASI DAN KEPATUHAN INTERNAL</p>
									</div>

									{% load static %}
									<!-- <img src="{% static 'assets/img/co_working.svg' %}" alt=""> -->
									<!-- <div class="row justify-content-center align-items-right mb-5"
										 style="background-image: url('../static/assets/img/co_working.svg'); height:70vh;
															background-repeat: no-repeat; background-position: center;" > -->
									<!-- <div class="produk2">
										<button href="pelaporan-harta-kekayaan-dan-pajak-pajak-pribadi/" class="btn btn-primary btn-xs">Laporan Wajib</button>
										<button href="pemantauan-perjadin/" class="btn btn-primary btn-xs">Tugas Kedinasan</button>
										<span id="span"></span>
									</div>
									Button trigger modal
									<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLihat">
										Launch demo modal
									</button> -->

									<div class="row justify-content-center align-items-right mb-5 produk" >
										{% for i in produk %}
										<div class="col-md-3">
											<div class="card card-body">
												{% load index %}
												<p class="card-category text-{{ warna|index:i.esl4_id }} mb-1">
													<a href="#"><small>{{ i.esl4 | title }}</small></a>
												</p>
												<h3 class="card-title text-primary blockquote-primary">
													<a href="#">
														{{ i.judul }}
													</a>
												</h3>
											
												<!-- <p class="card-text">Info</p> -->
												<div class="social-media mr-auto ml-auto">
													{% if i.slug is not None %}
													<a class="btn btn-danger btn-sm btn-link btn-border lihat" rel="publisher"
														href="{{ i.slug }}" data-toggle="modal" data-target="#modalLihat" >
														<span class="btn-label"><i class="fas fa-book-open"></i>&nbsp;Lihat</span> 
													</a>
													{% endif %}
													{% if i.link is not None %}
													<a class="btn btn-primary btn-sm btn-link btn-border" rel="publisher"
														href="{{ i.link }}" target="_blank"> 
														<span class="btn-label just-icon"><i class="fas fa-file-pdf"></i>&nbsp;Unduh</span> 
													</a>
													{% endif %}
												</div>
											</div>
										</div>
										{% endfor %}
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Modal -->
	<div class="modal fade bd-example-modal-lg" id="modalLihat" tabindex="-1" role="dialog" aria-labelledby="modalLihatTitle" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<!-- <div class="modal-header">
			<h5 class="modal-title" id="exampleModalLongTitle"></h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			</div> -->
			<div class="modal-body">
				<span id="span"></span>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
		</div>
	</div>
{% 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-demo2.js"></script>

	<script type="text/javascript">
		$('.produk .lihat').click(function() {
			event.preventDefault();
			var link = $(this).attr('href');
			getproduk(link);
		}); 
		
		$('#exampleModalLongTitle').modal('handleUpdate')

		function getproduk(url){
			$.ajax({
				url: url,
				type: "GET",
				success: function(data){
					$('#span').html(data);
				}
			});
		}

	</script>

	{% endblock javascripts %}
