{% 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">Layanan</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="#">Ekosistem Digital</a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Layanan</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-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">Data dan Informasi</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</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">Teknologi Informasi</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>
                                                <h4 class="page-title">Jelajahi Data dan Informasi DJPK disini</h4>
                                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                                    <ol class="carousel-indicators">
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                                    </ol>
                                                    <div class="carousel-inner">
                                                      <div class="carousel-item active">                                                        
                                                        <table>
                                                            <tr>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/portal.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Portal Satu Data DJPK</h5>
                                                                          <p class="card-text">Temukan Data DJPK Dalam Satu Portal Aplikasi</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>                                                          
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/dt.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Dashboard Sinergi S5</h5>
                                                                          <p class="card-text">Monitoring Data Transaksi Sinergi S5 SIKD</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/saiku.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Data Analytic SAIKU</h5>
                                                                          <p class="card-text">analysis data menggunakan aplikasi SAIKU</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>                                                   
                                                      </div>
                                                      <div class="carousel-item"> 
                                                        <table>
                                                            <tr>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/dt2.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                        <h5 class="card-title">Dashboard Interkoneksi S5</h5>
                                                                        <p class="card-text">Monitoring Interkoneksi data transaksi</p>
                                                                        <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>                                                     
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/core.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Aplikasi Core SIKD</h5>
                                                                          <p class="card-text">Penyampaian dan Monitoring Data SIKD</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/kas.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">SIKD Modul Simpatik</h5>
                                                                          <p class="card-text">Posisi Kas dan Perkiraan Belanja</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>                                              
                                                      </div>
                                                      <div class="carousel-item"> 
                                                        <table>
                                                          <tr>
                                                            <td>
                                                              <div class="card" style="width: 18rem;">
                                                                <img class="card-img-top" src="../static/assets/img/img-sinergi/saiku.png" alt="Card image cap">
                                                                <div class="card-body">
                                                                  <h5 class="card-title">Data Analytic Tools SAIKU</h5>
                                                                  <p class="card-text">Analysis data menggunakan aplikasi SAIKU</p>
                                                                  <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                </div>
                                                             </div>
                                                            </td>
                                                          </tr>                                                          
                                                        </table>                                                       
                                                      </div>
                                                    </div>
                                                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                                      <span class="carousel-control-prev-icon" aria-hidden="true">
                                                        <h2 style="background-color:red;"><b><</b></h2>
                                                      </span>
                                                      <span class="visually-hidden">Previous</span>
                                                    </a>
                                                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                                      <span class="carousel-control-next-icon" aria-hidden="true">
                                                        <h2 style="background-color:red;"><b>></b></h2>
                                                      </span>
                                                      <span class="visually-hidden">Next</span>
                                                    </a>
                                                  </div>
                                                <br>
                                            </div>

                                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"><br>
                                                <h4 class="page-title">Jelajahi Aplikasi DJPK disini</h4>
                                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                                    <ol class="carousel-indicators">
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                                    </ol>
                                                    <div class="carousel-inner">
                                                      <div class="carousel-item active">                                                        
                                                        <table>
                                                            <tr>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/atk.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Aplikasi Kesekretariatan</h5>
                                                                          <p class="card-text">Aplikasi Terpadu Kesekretariatan DJPK</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>                                                          
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/mona.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Aplikasi SiMONA</h5>
                                                                          <p class="card-text">List dan Monitoring Aplikasi di DJPK</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/sigap.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Aplikasi SIGAP DJPK</h5>
                                                                          <p class="card-text">Sistem Informasi Gaji Pegawai DJPK</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>                                                   
                                                      </div>
                                                      <div class="carousel-item"> 
                                                        <table>
                                                            <tr>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/dt2.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                        <h5 class="card-title">Dashboard Interkoneksi S5</h5>
                                                                        <p class="card-text">Monitoring Interkoneksi data transaksi</p>
                                                                        <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>                                                     
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/core.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">Aplikasi Core SIKD</h5>
                                                                          <p class="card-text">Penyampaian dan Monitoring Data SIKD</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="card" style="width: 18rem;">
                                                                        <img class="card-img-top" src="../static/assets/img/img-sinergi/kas.png" alt="Card image cap">
                                                                        <div class="card-body">
                                                                          <h5 class="card-title">SIKD Modul Simpatik</h5>
                                                                          <p class="card-text">Posisi Kas dan Perkiraan Belanja</p>
                                                                          <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>                                              
                                                      </div>
                                                      <div class="carousel-item"> 
                                                        <table>
                                                          <tr>
                                                            <td>
                                                              <div class="card" style="width: 18rem;">
                                                                <img class="card-img-top" src="../static/assets/img/img-sinergi/saiku.png" alt="Card image cap">
                                                                <div class="card-body">
                                                                  <h5 class="card-title">Data Analytic Tools SAIKU</h5>
                                                                  <p class="card-text">Analysis data menggunakan aplikasi SAIKU</p>
                                                                  <a href="#" class="btn btn-primary">Jelajahi</a>
                                                                </div>
                                                              </div>
                                                            </td>
                                                          </tr>
                                                        </table>                                                                        
                                                      </div>
                                                    </div>
                                                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                                      <span class="carousel-control-prev-icon" aria-hidden="true">
                                                        <h2 style="background-color:red;"><b><</b></h2>
                                                      </span>
                                                      <span class="sr-only">Previous</span>
                                                    </a>
                                                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                                      <span class="carousel-control-next-icon" aria-hidden="true">
                                                        <h2 style="background-color:red;"><b>></b></h2>
                                                      </span>
                                                      <span class="sr-only">Next</span>
                                                    </a>
                                                  </div>
                                                <br>                                 
                                            </div>

                                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"><br>
                                                <h4 class="page-title">Layanan Teknologi Informasi</h4>
                                                <div class="alert alert-success" role="alert">
                                                    <b>A. Software di DJPK</b><br>
                                                    <table class="table table-hover table-sm">
                                                        <thead>
                                                          <tr class="table-success">
                                                            <th scope="col">No.</th>
                                                            <th scope="col">Nama Software</th>
                                                            <th scope="col">Kuantitas</th>
                                                            <th scope="col">Digunakan</th>
                                                            <th scope="col">Tersedia</th>
                                                          </tr>
                                                        </thead>
                                                        <tbody>
                                                          <tr>
                                                            <th scope="row">1</th>
                                                            <td>Tableau</td>
                                                            <td>10</td>
                                                            <td>1</td>
                                                            <td>9</td>
                                                          </tr>
                                                          <tr>
                                                            <th scope="row">2</th>
                                                            <td>Adobe</td>
                                                            <td>5</td>
                                                            <td>2</td>
                                                            <td>3</td>
                                                          </tr>
                                                          <tr>
                                                            <th scope="row">3</th>
                                                            <td>MS Office</td>
                                                            <td>10</td>
                                                            <td>6</td>
                                                            <td>4</td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                </div>
                                                <div class="alert alert-success" role="alert">
                                                    <b>B. Mekanisme Pengajuan Permintaan Software</b><br>
                                                    Untuk permintaan pengajuan software atau tools lainnya dapat melalui Nota Dinas Eselon III kepada Kasubdit PABDIOTI. 
                                                    <br>Nota Dinas dilengkapi dengan urgensi dan kuantitas software atau tools yang dibutuhkan. 
                                                </div>
                                                <div class="alert alert-success" role="alert">
                                                    <b>C. Pengaduan Teknologi Informasi</b><br>
                                                    Jika terdapat gangguan pada teknologi informasi di DJPK, Pegawai dapat melaporkan disini.
                                                </div>                                            
                                            </div>
                                        </div>
                                    </div>
                                
                                <p>{{ object.isi | safe }}</p>
                                <hr/>
                                <p>Author: admin</p>
                                <p>Publikasi: 31 Desember 2021</p>
                            <!---End Content-->
                            </div>
                        </div>
                    </div>
                </div>            
        </div>
    </div>
{% endblock content %}

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

{% endblock javascripts %}
