{% extends 'layout/base.html' %}

{% block title %}Các dự án{% endblock %}

{% block content %}

    <div class="container-xxl bg-white p-0">
        <!-- Spinner Start -->
        <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <!-- Spinner End -->


        <!-- Navbar & Hero Start -->
        <div class="container-xxl position-relative p-0">

            {% include 'layout/header.html' %}

            <div class="container-xxl py-5 bg-primary hero-header">
                <div class="container my-5 py-5 px-lg-5">
                    <div class="row g-5 py-5">
                        <div class="col-12 text-center">
                            <h1 class="text-white animated slideInDown">Dự án</h1>
                            <hr class="bg-white mx-auto mt-0" style="width: 90px;">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb justify-content-center">
                                    <li class="breadcrumb-item"><a class="text-white" href="#">Trang chủ</a></li>
                                    <li class="breadcrumb-item text-white active" aria-current="page">Dự án</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Navbar & Hero End -->


        <!-- Projects Start -->
        <div class="container-xxl py-5">
            <div class="container py-5 px-lg-5">
                <div class="wow fadeInUp" data-wow-delay="0.1s">
                    <p class="section-title text-secondary justify-content-center"><span></span>DỰ ÁN CỦA CHÚNG TÔI<span></span></p>
                    <h1 class="text-center mb-5">Dự án đã hoàn thành</h1>
                </div>
                <div class="row mt-n2 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="col-12 text-center">
                        <ul class="list-inline mb-5" id="portfolio-flters">
                            <li class="mx-2 active" data-filter="*">All</li>
                            {% for c in categorys %}
                                <li class="mx-2" data-filter=".{{ c.name }}" >{{ c.name }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="row g-4 portfolio-container">
                    {% set wow_delay = 0.1 %}
                    {% for project in projects %}
                    {% set wow_delay = loop.index * 0.1 %}
                    <div class="col-lg-4 col-md-6 portfolio-item {{ project.category }} wow fadeIn" data-wow-delay="{{ wow_delay }}s">
                        <div class="rounded overflow-hidden">
                            <div class="position-relative overflow-hidden">
                                <img class="img-fluid w-100" src="{{ url_for('static', filename='images/imgProject/' + project.image) }}" alt="">
                                <div class="portfolio-overlay">
                                    <a class="btn btn-square btn-outline-light mx-1" href="{{ url_for('static', filename='images/imgProject/' + project.image) }}" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
                                    <a class="btn btn-square btn-outline-light mx-1" href="{{ url_for('project_detail', project_id = project.id) }}"><i class="fa fa-link"></i></a>
                                </div>
                            </div>
                            <div class="bg-light p-4">
                                <p class="text-primary fw-medium mb-2">{{ project.category }}</p>
                                
                                <a href="{{ url_for('project_detail', project_id = project.id) }}">
                                    <h5 class="lh-base mb-0">{{ project.name }}</h5>
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>

                 {% if pages > 1 %}
                <ul class="pagination mt-1 wow fadeIn justify-content-center" data-wow-delay="0.8s">
                    {% for i in range(1, pages + 1) %}
                    <li class="page-item"><a class="page-link" href="/project?page={{i}}">{{i}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
        </div>
        <!-- Projects End -->


        <!-- Back to Top -->
        <a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
    </div>

{% endblock %}