<!DOCTYPE html>
<html lang="en" data-bs-theme="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- ================= META ================= -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title th:text="${project.name} + ' | Kiyan Mckop'">Project</title>

    <!-- SEO -->
    <meta name="description" th:content="${project.description}">
    <meta name="author" content="Kiyan Mckop">

    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/css/project.css}">
</head>

<body>

    <!-- ================= NAVBAR ================= -->
    <div th:replace="~{fragments/navbar :: navbar}"></div>

    <!-- ================= HERO ================= -->
    <header  class="hero bg-light">
        <div  class="container text-center">
            <h1 class="fw-bold" th:text="${project.name}">Project Name</h1>

            <p class="lead text-muted mt-2" th:text="${project.description}">
                Project description
            </p>

            <!-- Project Links -->
            <div class="d-flex justify-content-center gap-4 mt-4">
                <a th:href="${project.githubUrl}" target="_blank" class="icon-link" title="GitHub Repository">
                    <i class="bi bi-github"></i>
                </a>

                <a th:if="${project.liveUrl != null}" th:href="${project.liveUrl}" target="_blank" class="icon-link"
                    title="Live Application">
                    <i class="bi bi-box-arrow-up-right"></i>
                </a>
            </div>
        </div>
    </header>

    <!-- ================= SCREENSHOTS ================= -->
    <section th:if="${project.screenshots != null && !project.screenshots.isEmpty()}">
        <div class="container">
            <h2 class="fw-bold text-center mb-5">Application Screenshots</h2>

            <div id="projectCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner rounded-4 shadow-sm">
                    <div th:each="img, stat : ${project.screenshots}"
                        th:class="'carousel-item ' + (${stat.index} == 0 ? 'active' : '')">
                        <img th:src="${img}" class="d-block w-100" alt="Project Screenshot">
                    </div>
                </div>


                <button class="carousel-control-prev" type="button" data-bs-target="#projectCarousel"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>

                <button class="carousel-control-next" type="button" data-bs-target="#projectCarousel"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div>
    </section>

    <!-- ================= OVERVIEW & STACK ================= -->
    <section id="project-overview" class="bg-light">
        <div class="container">
            <div class="row gy-4">

                <!-- Overview -->
                <div class="col-lg-8">
                    <h2 class="fw-bold">Project Overview</h2>
                    <div th:utext="${project.overviewHtml}"></div>
                </div>

                <!-- Stack -->
                <div class="col-lg-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <div th:utext="${project.stackHtml}"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- ================= DOCUMENTATION ================= -->
    <section id="documentation" th:if="${project.documentationHtml != null}">
        <div class="container">
            <h2 class="fw-bold text-center mb-5">Documentation</h2>
            <div th:utext="${project.documentationHtml}"></div>
        </div>
    </section>

    <!-- ================= FUTURE PLANS ================= -->
    <section id="future-plans" class="bg-light" th:if="${project.futureHtml != null}">
        <div class="container">
            <h2 class="fw-bold text-center mb-5">Future Plans</h2>
            <div th:utext="${project.futureHtml}"></div>
        </div>
    </section>

    <!-- ================= DEMO ================= -->
    <section id="demo-vid">
        <div class="container">
            <h2 class="fw-bold text-center mb-5">Demo Video</h2>

            <div class="ratio ratio-16x9 rounded-4 shadow-sm overflow-hidden text-center">
                <span><em>Coming Soon</em></span>
            </div>
        </div>
    </section>

    <!-- ================= FOOTER ================= -->
    <div th:replace="~{fragments/footer :: footer}"></div>

    <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>

</body>

</html>