{% extends 'front/base.html' %}
{% load static %}
{% block title %} {{meta.meta_title}} - {{meta.meta_description}} {% endblock title %}
{% block title1 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title1 %}
{% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %}
{% block content %}

<main class="creasoft-wrap layout2">

    <div class="line_wrap layout2">
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
    </div>
      
<!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--======================  ===============  ======================-->
{% for slider in sliders %}
<div class="swiper-slide">
        {% if settings.slider_particle_is_active %}                   
            <div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
        {% endif %}
    </section>
</div>

{% endfor %}

<script>
    const sliderCounting = {{sliders.count}}
</script>

{% if projects %}
        <section class="project-area sec-mar">
            <div class="container">
                <div class="title-wrap">
                    <div class="sec-title">
                        <span>Case Study</span>
                        <h2>Project</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <ul class="isotope-menu">
                            <li class="active" data-filter="*">All</li>
                            {% for category in project_categories  %}
                                <li data-filter=".{{category.slug}}">{{category.name}}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="row g-4 project-items">

                    {% for project in projects %}
                        <div class="col-md-6 col-lg-4 single-item {{ project.category.slug }}">
                            <div class="item-img">
                                <a href="{% url "projectDetails" project.slug %}"><img src="{{ project.getProjectImage }}" alt></a>
                            </div>
                            <div class="item-inner-cnt">
                                {% if project.category %}
                                    <span>{{ project.category }}</span>
                                {% endif %}
                                <h4>{{ project.title }}</h4>
                                <div class="view-btn">
                                    <a href="{% url "projectDetails" project.slug %}">view details</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                </div>
            </div>
            <div class="load-more">
                <ul class="paginations">
                    {% if projects.previous_page_number > 0 %}
                    <li><a href="?page={{projects.previous_page_number}}"><i class="fas fa-long-arrow-alt-left"></i></a></li>
                    {% endif %}
                    {% for page in projects.paginator.page_range %}
                        <li{% if page == projects.number %} class="active"{% endif %}><a href="?page={{ page }}">{{ page }}</a></li>
                    {% endfor %}
                    {% if projects.next_page_number > 0 %}
                    <li><a href="?page={{ projects.next_page_number }}"><i class="fas fa-long-arrow-alt-right"></i></a></li>
                    {% endif %}
                </ul>
            </div>

        </section>
{% endif %}

{% endblock %}