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

{% block title %} Organisasi {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}

{% endblock stylesheets %}
{% block content %}

{% load static %}

	<div class="content">
		<div class="page-inner">
			<!-- <div class="page-header"> -->
				<!-- <h4 class="page-title">Berita</h4> -->
				<!-- <ul class="breadcrumbs" style="padding-left: 0px;margin-left: 0px;">
					<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="{% url 'home' %}">Berita</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}">{{ berita.0.category }}</a>
					</li>
				</ul> -->
			<!-- </div> -->
		</div>
        <div class="page-inner mt--5">
            <div class="row">
				<div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
							<ul class="breadcrumbs pl-0 ml-0">
								<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="{% url 'home' %}">Berita</a>
								</li>
								<li class="separator">
									<i class="flaticon-right-arrow"></i>
								</li>
								<li class="nav-item">
									<a href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}">{{ berita.0.category }}</a>
								</li>
							</ul>
							<div class="separator-solid"></div>	
                            <div class="post-single mt-2">
								{% for i in berita %}
								<div class="post-details">
                                    <div class="post-body"> 
                                        <h3 class="title text-primary">
											<a href="{% url 'berita_detil' i.slug %}" class="nav-link">{{ i.title }}</a>
										</h3>
										<div class="ml-3">{{ i.isi | safe | truncatewords:40 }}
											<span class="text-danger">
												<a href="{% url 'berita_detil' i.slug %}">Selengkapnya</a>
											</span>
										</div>
                                    </div> 
									<div class="float-right pt-2 mr-2">
										<i class="icon-clock"></i> {{ i.date_added }}
									</div>
									<div class="row">
										<div class="col-md-12 mt-2">Author</div>
                                    </div> 
									<div class="separator-solid"></div>
                                </div>
								{% endfor %}	
							</div>
							<div class="col-md-12">
								{% if berita.has_other_pages %}
								<ul class="pagination pg-primary">

									{% if berita.has_previous %}
										<li class="page-item">
											<a class="page-link" href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}&page={{ berita.previous_page_number }}" aria-label="Previous">
												<span aria-hidden="true">«</span>
												<span class="sr-only">Previous</span>
											</a>
										</li>
									{% endif %}

									{% for i in berita.paginator.page_range %}
										{% if berita.number == i %}
											<li class="page-item active"><a class="page-link" href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}&page={{i}}">{{ i }}</a></li>
										{% else %}
											<li class="page-item"><a class="page-link" 
												href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}&page={{i}}">{{ i }}</a></li>
										{% endif %}
									{% endfor %}

									{% if berita.has_next %}
										<li class="page-item">
											<a class="page-link" href="{% url 'berita_grup' %}?q={{ berita.0.category.slug }}&page={{ berita.next_page_number }}" aria-label="Next">
												<span aria-hidden="true">»</span>
												<span class="sr-only">Next</span>
											</a>
										</li>
									{% endif %}
								</ul>
							  {% endif %}
							</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 %}
