{% 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">Ekosistem</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="#">Layanan Aplikasi</a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">{{ object.title }}</a>
                        </li>
                    </ul>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title"><h1>Kategori Aplikasi Sinergi DJPK</h1></h4>	
                            </div>
                            <div class="card-body">        
                            <!---Content-->

                             <div class="container-fluid">
                                        <nav>
                                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Aplikasi Eksternal DJPK</a>
                                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Aplikasi Internal DJPK</a>
                                                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Aplikasi K/L</a>
                                            </div>
                                        </nav>
                                        <div class="tab-content" id="nav-tabContent">
                                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"><br>
                                                <div class="row">
                                                    {% for data in layanan_list %}
                                                    <div class="col-md-3">
                                                        <div class="card 
                                                            {% if data.status == 'Operasional' %}
                                                                card-primary 
                                                            {% elif data.status == 'Pembangunan' %}
                                                                card-warning
                                                            {% else %}
                                                                card-danger 
                                                            {% endif%}
                                                            card-annoucement card-round">
                                                            <div class="card-body text-center">
                                                                <div class="card-opening">{{ data.aplikasi }}</div>
                                                                <div class="card-desc">
                                                                    {{ data.status }}{% if data.modul != None %} - {{ data.modul }} {% endif %}
                                                                </div>
                                                                <div class="card-detail">
                                                                    {% if data.url is not None %}
                                                                        <a href="{{ data.url }}" class="btn btn-light btn-rounded" target="_blank">Buka</a>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>

                                                <br>
                                            </div>
                                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"><br>Ini untuk kategori aplikasi internal</div>
                                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"><br>ini untuk kategori aplikasi lainnya</div>
                                        </div>
                                    </div>
                                
                                <p>{{ object.isi | safe }}</p>
                                <hr/>
                                <p>Author: admin</p>
                                <p>Publikasi: 31 Oktober 2021</p>
                            <!---End Content-->
                            </div>
                        </div>
                    </div>
                </div>            
        </div>
    </div>
{% endblock content %}

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

{% endblock javascripts %}
