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

{% block title %} Multimedia{% 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">Multimedia</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="#">Multimedia</a>
				</li>
			</ul>
		</div>
		<div class="row">
			<div class="col-md-12">
				
						
						<!-- <ul class="nav nav-pills nav-secondary" id="pills-tab" role="tablist">
							<li class="nav-item">
								<a class="nav-link active" id="pills-video-tab" data-toggle="pill" href="#pills-video" role="tab" aria-controls="pills-video" aria-selected="true">Video</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-galeri-tab" data-toggle="pill" href="#pills-galeri" role="tab" aria-controls="pills-galeri" aria-selected="false">Galeri</a>
							</li>
						</ul> -->
						<div class="tab-content mt-2 mb-3" id="pills-tabContent">
							<div class="tab-pane fade show active" id="pills-video" role="tabpanel" aria-labelledby="pills-video-tab">
								<div class="card">
									<div class="card-header">
										<h4 class="card-title">Video</h4>
									</div>
									<div class="card-body">

                    <!-- Grid row -->
                    <div class="row">

                      {% regroup video|dictsort:"grup" by grup as list_video %}

                      {% for grup, konten in list_video %}
                      <div class="col-md-12">
                        <h4 class="text-danger">{{grup|upper}}</h4>
                      </div>

                      {% for i in konten %}
                      <!-- Grid column -->
                        <div class="col-lg-3 col-md-6 mb-3">
                      
                          <!--Modal: Name-->
                          <div class="modal fade" id="modal{{i.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                      
                              <!--Content-->
                              <div class="modal-content">
                                <div class="modal-body mb-0 p-0">
                                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{i.link}}"
                                      allowfullscreen></iframe>
                                  </div>
                                </div>
                                <div class="modal-footer justify-content-center">
                                  <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
                                </div>
                              </div>
                              <!--/.Content-->
                            </div>
                          </div>

                          <!--Modal: Name-->
                          <style>
                            .img-fluid {
                              clip-path: polygon(0 12.5%, 100% 12.5%, 100% 87.5%, 0 87.5%);
                            }
                          </style>
                          <a  data-toggle="tooltip" data-html="false" title="{{i.title}}">
                            <img class="img-fluid z-depth-1" src="https://img.youtube.com/vi/{{i.link}}/sddefault.jpg" alt="video"
                              data-toggle="modal" data-target="#modal{{i.id}}">
                          </a>
                          <code class="text-primary">{{i.title}}</code>
                        </div>
                        {% endfor %}
                        {% endfor %}
                      </div>



          </div>
								</div>
							</div>
							<div class="tab-pane fade" id="pills-galeri" role="tabpanel" aria-labelledby="pills-galeri-tab">
								<div class="card">
								<div class="card-header">
										<h4 class="card-title">Galeri</h4>
								</div>
								<div class="card-body">
								<div class="card card-info card-annoucement card-round">
								<div class="card-body text-center">
								<div class="card-opening"><button class="btn btn-primary btn-rounded" disabled="disabled">GALERI DJPK</button></div>
								<div class="card-desc">
									Berisi Galery Foto Kegiatan DJPK
								</div>
								<div class="card-detail">
								     <!-- -->
									 <div class="container-fluid">
  <div class="px-lg-5">
    <div class="row">
      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2011</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2012</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2013</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2014</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2015</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
         
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2016</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2017</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
         
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2018</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2019</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2020</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
          
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm"><p>Foto Tahun 2021</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2020</p>
            </div>
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-black rounded shadow-sm">
		  <p>Foto Tahun 2001</p>
          <div class="p-1">
            <p>Admin Sekretariat  - 29/11/2021</p>
            </div>
          </div>
        </div>
      </div>
      <!-- End -->

    </div>
    
  </div>
</div>
									 <!-- -->
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>
							</div>
							
						
				</div>
			</div>
			</div>
		</div>


{% endblock content %}

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

<!-- Atlantis DEMO methods, don't include it in your project! -->
<!-- <script src="/static/assets/js/setting-demo2.js"></script> -->


{% endblock javascripts %}