{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>All About IT News</title>
    <link rel="icon" type="image/x-icon" href="{% static 'newApp/assets/favicon_newApp.ico' %}" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{% static 'newApp/css/styles_newApp.css' %}" rel="stylesheet" />
</head>
<body class="d-flex flex-column min-vh-100">
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="{% url 'redirect_to_today_post' %}">All About IT News</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0">
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'redirect_to_today_post' %}">홈</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'index' %}" style="color: red;">뉴스 모음</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4">구독자 수: {{ subscriber_count }}</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Page Header-->
    <header class="bg-dark py-5">
        <div class="container px-4 px-lg-5 my-5">
            <div class="text-center text-white">
                <h1 class="display-4 fw-bolder">All About IT News</h1>
                <p class="lead fw-normal text-white-50 mb-0">각종 최신 IT 뉴스들을 쉽고 빠르게!</p>
            </div>
        </div>
    </header>
    <!-- Main Content-->
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-1 row-cols-md-2 row-cols-xl-4 justify-content-center" id="articles-container">
            {% for article in articles %}
            <div class="col mb-5 article-card">
                <div class="card h-100">
                    <!-- Product image-->
                    <a href="{% url 'post' date_str=article.date %}"><img class="card-img-top" src="{{ article.image }}" alt="..." /></a>
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <h5 class="fw-bolder">{{ article.display_date }}</h5>
                            <div>
                                <b>
                                    {% if article.title|length > 40 %}
                                        {{ article.title|slice:":40" }}...
                                    {% else %}
                                        {{ article.title }}
                                    {% endif %}
                                </b>
                            </div>
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{% url 'post' date_str=article.date %}">기사 보기</a></div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="d-flex justify-content-center mb-4">
            <button class="btn btn-primary text-uppercase" id="load-more" onclick="loadMoreArticles()">더 많은 뉴스보기 →</button>
        </div>
    </div>
    <!-- Footer-->
    <footer class="border-top mt-auto">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="small text-center text-muted fst-italic" style="font-size: 17.5px; font-family: Roboto, sans-serif;">Copyright &copy; All About IT News</div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="{% static 'newApp/js/scripts_newApp.js' %}"></script>
    <script>
        let currentPage = 1;
        const articlesPerPage = 16;
        
        document.addEventListener("DOMContentLoaded", function() {
            loadArticles();
        });

        function loadArticles() {
            const articles = document.querySelectorAll(".article-card");
            articles.forEach((article, index) => {
                if (index < articlesPerPage * currentPage) {
                    article.style.display = "block";
                } else {
                    article.style.display = "none";
                }
            });
            if (articlesPerPage * currentPage >= articles.length) {
                document.getElementById("load-more").style.display = "none";
            }
        }

        function loadMoreArticles() {
            currentPage++;
            loadArticles();
        }
    </script>
</body>
</html>
