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

{% block title %} Knowledge Management {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
/* pop-up text */

text span {
    color:#666;
    position:absolute;
    font-family:sans-serif;
    bottom:0;
    left:-25px;
    right:-25px;
    padding:5px 7px;
    z-index:-1;
    font-size:14px;
    border-radius:2px;
    background:#fff;
    visibility:hidden;
    opacity:0;
    -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  /* pop-up text arrow */
  
  text span:before {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    position:absolute;
    bottom:-5px;
    left:40px;
  }
  
  /* text pops up when icon is in hover state */
  
  text :hover span {
    bottom:50px;
    visibility:visible;
    opacity:1;
  }
  
  /* font awesome icons */
  
  text :nth-of-type(1):before {
  content:'\f09a';
  }
  text :nth-of-type(2):before {
  content:'\f099';
  }
  text :nth-of-type(3):before {
  content:'\f0d5';
  }
  text :nth-of-type(4):before {
  content:'\f113';
  }
  text :nth-of-type(5):before {
  content:'\f17d';
  }
  text :nth-of-type(6):before {
  content:'\f1cb';
  }


.thumb{
    margin-bottom: 30px;
}

.hide {
    display: none;
  }
   
  .myDIV:hover + .hide {
    display: block;
    color: red;
  }
  
.tab-content {
    padding: 0px;
    margin-top: 0px; 
} 

.col-md-9{
    padding-right: 5px;
    padding-left: 5px;
}
.col-md-6,.col-md-12{
    padding-right: 10px;
    padding-left: 5px;
}

.cardSide{
    height: 100%;
}

.nav-pills.flex-column .nav-link {
    border-radius: 0!important;
    border:none;
    border-bottom: 1px solid #d0e2fa;
    color: #082d5c;
    margin-top: -1px;
    text-align: left!important;
    padding:10px;
    word-wrap: normal;
}

.fa{
    padding:5px;
}


 #chart-container{
     height:200px;
 }

 .titleh4{
    padding-top:15px; 
    padding-left:10px;
    color: #082d5c;
    font-weight:bold;
 }

 .kajian{
     border-bottom: 1px solid #d0e2fa;
     margin-bottom:10px;
     padding-left:10px;
     padding-top:5px;
     padding-bottom:5px;
 }
 
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.container{
    padding: 10%;
    text-align: center;
}
#custom-search-input {
    margin:0;
    margin-top: 10px;
    padding: 0;
}
 
#custom-search-input .search-query {
    width:100%;
    padding-right: 3px;
    padding-left: 15px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0;
}
 
#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: absolute;
    right:0;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#D9230F;
    cursor: unset;
    z-index: 2;
}
 
.search-query:focus{
    z-index: 0;   
}

.table{
    margin-top:10px;
}

.theadcolor{
    background-color: #EBE4FF;
}
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .popup .popuptext {
    visibility: hidden;
    /* width: 160px; */
    background-color: #547fff;
    color: #fff; 
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -400px;
  }
   
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
   
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
   
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
</style>

{% endblock stylesheets %}


{% block content %}
    <div class="content">
    	<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Knowledge Management</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="{% url 'home' %}">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Publikasi</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Knowledge Management</a>
					</li>
				</ul>
			</div>
		 	<div class="row">

				{% regroup data|dictsort:"unit" by unit as list_km %}

				<div class="col-md-3">
					<div class="card cardSide nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
						{% for grup, konten in list_km %}
							<a class="nav-link" id="v-pills-{{grup}}-tab" data-toggle="pill" href="#{{grup|lower}}" role="tab" aria-controls="v-pills-{{grup}}" aria-selected="false">
								<!-- <b><i class="icon-docs"></i></b> -->
								<span class="pad">{{grup}}</span>
							</a>
						{% endfor %}
					</div>
				</div>

				{% regroup data|dictsort:"unit" by unit as list_km %}

				<div class="col-md-9 tab-content" id="v-pills-tabContent">
					{% for grup, konten in list_km %}
					<div class="tab-pane fade {% if forloop.first %} show active {% endif %}" id="{{grup|lower}}" role="tabpanel" aria-labelledby="v-pills-{{grup}}-tab">
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<h4 class="titleh4"> {{grup}} </h4>
										<div class="col-md-12">
										<div class="table-responsive">
											<table id="basic-datatables{{grup|cut:' '}}" class="display table table-striped table-hover" >
												<thead>
													<tr>
														<!-- <th scope="col">No</th> -->
														<th scope="col">Pertanyaan</th>
														<th scope="col">Jawaban</th>
														<!-- <th scope="col">Perbaikan</th> -->
													</tr>
												</thead>
												<tfoot>
													<tr>
														<!-- <th scope="col">No</th> -->
														<th scope="col">Pertanyaan</th>
														<th scope="col">Jawaban</th>
														<!-- <th scope="col">Perbaikan</th> -->
													</tr>
												</tfoot>
												<tbody>
													{% for p in konten %}
														<p></p>
														<tr>
															<!-- <td><small>{{ p.id}}</small></td> -->
															<td><small>{{ p.pertanyaan }}</small></td>
															<td><small>{{ p.jawaban }}</small></td>
															<!-- <td><small>{{ p.perbaikan}}</small></td> -->
														</tr>
													{% endfor %} 
												</tbody>
											</table>
										</div>

									</div>
								</div>
							</div>
						</div>	  
					</div>
					{% endfor %}
				</div>			 	   
	    	</div>


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

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
	$(document).ready(function() {
		$('.table').DataTable({});
	});
</script>

{% endblock javascripts %}