<%- include('partials/_header.ejs') -%>

<body>
    <div class="tm-page-wrap mx-auto">
        <div class="position-relative">

            <%- include('partials/_navigation.ejs') -%>

            <div class="tm-welcome-container text-center text-white">
                <div class="tm-welcome-container-inner">
                    <p class="tm-welcome-text mb-1 text-white">Video Catalog is brought to you by TemplateMo.</p>
                    <p class="tm-welcome-text mb-5 text-white">This is a full-width video banner.</p>
                    <a href="#content" class="btn tm-btn-animate tm-btn-cta tm-icon-down">
                        <span>Discover</span>
                    </a>
                </div>
            </div>

            <div id="tm-video-container">
                <img src="/img/camera.jpg" />    
            </div>
            
            <i id="tm-video-control-button" class="fas fa-plus"></i>
        </div>

        <div class="container-fluid">
            <div id="content" class="mx-auto tm-content-container">
                <main>
                    <div class="row tm-catalog-item-list">

                        <% for(let i = 0; i < photos.length; i ++) { %>
                        <div class="col-lg-4 col-md-6 col-sm-12 tm-catalog-item">
                            <div class="position-relative tm-thumbnail-container">
                                <img src="<%= photos[i].image %>" alt="Image" class="img-fluid tm-catalog-item-img">    
                                <a href="/photos/<%= photos[i]._id %>" class="position-absolute tm-img-overlay">
                                    <i class="fas fa-play tm-overlay-icon"></i>
                                </a>
                            </div>    
                            <div class="p-4 tm-bg-gray tm-catalog-item-description">
                                <h3 class="tm-text-primary mb-3 tm-catalog-item-title"><%= photos[i].title %></h3>
                                <p class="tm-catalog-item-text"><%=photos[i].description %></p>
                            </div>
                        </div>
                        <% } %>
                    </div>

                    <!-- Catalog Paging Buttons -->
                    <div>
                        <% if(pages > 0 ) { %>
                        <ul class="nav tm-paging-links">
                            <% for(let i = 1; i <= pages; i++) { %>
                                <!-- Önceki sayfa oku -->
                                <% if(current > 1 && i === 1) { %> <li class="nav-item"><a href="/?page=<%= current - 1 %>" class="nav-link tm-paging-link">&#60;</a></li> <% } %>

                                <!-- Sayfa linklerini oluştur -->
                                <li class="nav-item <% if(current === i) { %>active<% } %>"><a href="/?page=<%= i %>" class="nav-link tm-paging-link"><%= i %></a></li>

                                <!-- Sonraki sayfa linki -->
                                <% if(current < pages && i === pages) { %> <li class="nav-item"><a href="/?page=<%= current + 1 %>" class="nav-link tm-paging-link">&#62;</a></li> <% } %>
                            <% } %>
                        </ul>
                        <% } %>
                    </div>
                </main>

                <%- include('partials/_footer.ejs') -%>
        </div>

    </div> <!-- .tm-page-wrap -->

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function setVideoSize() {
            const vidWidth = 1920;
            const vidHeight = 1080;
            let windowWidth = window.innerWidth;
            let newVidWidth = windowWidth;
            let newVidHeight = windowWidth * vidHeight / vidWidth;
            let marginLeft = 0;
            let marginTop = 0;

            if (newVidHeight < 500) {
                newVidHeight = 500;
                newVidWidth = newVidHeight * vidWidth / vidHeight;
            }

            if(newVidWidth > windowWidth) {
                marginLeft = -((newVidWidth - windowWidth) / 2);
            }

            if(newVidHeight > 720) {
                marginTop = -((newVidHeight - $('#tm-video-container').height()) / 2);
            }

            const tmVideo = $('#tm-video');

            tmVideo.css('width', newVidWidth);
            tmVideo.css('height', newVidHeight);
            tmVideo.css('margin-left', marginLeft);
            tmVideo.css('margin-top', marginTop);
        }

        $(document).ready(function () {
            /************** Video background *********/

            setVideoSize();

            // Set video background size based on window size
            let timeout;
            window.onresize = function () {
                clearTimeout(timeout);
                timeout = setTimeout(setVideoSize, 100);
            };

            // Play/Pause button for video background      
            const btn = $("#tm-video-control-button");

            btn.on("click", function (e) {
                const video = document.getElementById("tm-video");
                $(this).removeClass();

                if (video.paused) {
                    video.play();
                    $(this).addClass("fas fa-pause");
                } else {
                    video.pause();
                    $(this).addClass("fas fa-play");
                }
            });
        })
    </script>
</body>

</html>