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

{% block title %} {{ judul }} {% 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">Informasi</h4>
			<ul class="breadcrumbs">
				<li class="nav-home">
					<a href="/home">
						<i class="flaticon-home"></i>
					</a>
				</li>
				<li class="separator">
					<i class="flaticon-right-arrow"></i>
				</li>
				<li class="nav-item">
					<a href="">Informasi</a>
				</li>
				<li class="separator">
					<i class="flaticon-right-arrow"></i>
				</li>
				<li class="nav-item">
					<a href="#">Pilih Topik</a>
				</li>
			</ul>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header" style="background-color:#0077FF">
						<h4 class="card-title" style="color:white;">Topik</h4>
					</div>
					<div class="card-body">
						<!---Content-->
						{% for category in categories %}
						<h3 style="color:#0077FF;"><a
								href="{% url 'faq:category_detail' category.slug %}">{{category.name}}</a></h3>
						{% if category.description %}
						<p>{{category.description}}</p>
						{% endif %}
						<hr>
						{% endfor %}
						<!---End Content-->
					</div>

				</div>
			</div>
		</div>
	</div>
</div>
{% endblock content %}

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

{% endblock javascripts %}
