<!DOCTYPE html>
<html lang="en">
<head>
    {% include "head.html" %}
</head>
<body>
    {%if username%}
    {% include "navbar.html" %}
            <main class="content px-3 py-4">
                <div class="container-fluid">
                    <div class="mb-3">
                        <h3 class="fw-bold fs-4 mb-3">Welcome to Dashboard</h3>
                        <div class="row">
                            <div class="col-12 col-md-4 ">
                                <div class="card border-0">
                                    <div class="card-body py-4">
                                        <h5 class="mb-2 fw-bold">
                                            Logged in as {{ username }}
                                        </h5>
                                        <p class="mb-0 fw-bold">
                                            <p>The current date is <span id="current-date"></span>.</p>
                                        </p>
                                        <div class="mb-0">
                                            <span class=" fw-bold">     
                                            <p>GMT+7 <span id="current-time"></span>.</p>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <h3 class="fw-bold fs-4 my-3">Daftar User Terbaru
                        </h3>
                        <div class="row">
                            <div class="col-9">
                                <table class="table table-striped">
                                    <thead>
                                        <tr class="highlight">
                                            <th scope="col">Id</th>
                                            <th scope="col">Nama</th>
                                            <th scope="col">Divisi</th>
                                            <th scope="col">Added</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in data[-5:] %}
                                            <tr>
                                                <td>{{item[0]}}</td>
                                                <td>{{item[1]}}</td>
                                                <td>{{item[2]}}</td>
                                                <td>{{item[4]}}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row text-body-secondary">
                        <div class="col-6 text-start ">
                            <a class="text-body-secondary" href=" #">
                                <strong></strong>
                            </a>
                        </div>
                        <div class="col-6 text-end text-body-secondary d-none d-md-block">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                    <a class="text-body-secondary" href="#">Contact</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="text-body-secondary" href="#">About Us</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="text-body-secondary" href="#">Terms & Conditions</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    {% else %}
        <div class="container-fluid full-height d-flex justify-content-center align-items-center pt-3">
            <div class="alert alert-info" role="alert">
                Please login first to access this page.
            </div>
        </div>
        {% include 'login.html' %}
    {% endif %}

    <script>
        function displayDateTime() {
            var now = new Date();
            var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            var dayOfWeek = days[now.getDay()];
            var month = months[now.getMonth()];
            var date = now.getDate();
            var year = now.getFullYear();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            var timeString = hours + ':' + minutes + ':' + seconds;
            var dateString = dayOfWeek + ', ' + month + ' ' + date + ', ' + year;
            document.getElementById('current-date').textContent = dateString;
            document.getElementById('current-time').textContent = timeString;
        }

        // Update date and time every second
        setInterval(displayDateTime, 1000);

        // Initial call to display date and time
        displayDateTime();
    </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>

</body>
</html>
