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

{% block title %} {{ judul }} {% endblock %} 

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

{% block content %}
			
	<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="#overview" class="btn btn-white btn-border btn-round">INTERKONEKSI</a>
						<a href="#overview" class="btn btn-white btn-border btn-round">SIKD KITA</a>
						<a href="#aplikasi" class="btn btn-secondary btn-round">DATA</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 mt-2 mb-3" 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 class="card-body" 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="{{ data.button_style }}">
										<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>
						{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

{% endblock javascripts %}
