<?php
require_once __DIR__ . "/database/connection.php";

$ogImage = "https://www.colombomarathon.lk/assets/img/meta/colombo-marathon-cover.jpg";
$ogTitle = "Photo & Video Gallery - Colombo Marathon 2026";
$ogDesc = "View photos and video albums from the Colombo Marathon 2026. Explore the moments of unity, sport, and human connection in Colombo.";
$albumSlug = trim($_GET["album"] ?? "");

try {
    Database::setUpConnection();
    if ($albumSlug !== "") {
        $stmt = Database::prepare("SELECT id, name FROM gallery_albums WHERE slug = ? LIMIT 1");
        $stmt->bind_param("s", $albumSlug);
        $stmt->execute();
        $res = $stmt->get_result();
        $album = $res->fetch_assoc();
        $stmt->close();
        
        if ($album) {
            $ogTitle = $album["name"] . " Album - Colombo Marathon 2026";
            $ogDesc = "View photos and video albums from the Colombo Marathon 2026. Explore the moments of unity, sport, and human connection in Colombo.";
            
            $albumId = (int)$album["id"];
            $imgStmt = Database::prepare("SELECT image_url FROM gallery_images WHERE album_id = ? AND is_active = 1 ORDER BY id DESC LIMIT 1");
            $imgStmt->bind_param("i", $albumId);
            $imgStmt->execute();
            $imgRes = $imgStmt->get_result();
            $latestImg = $imgRes->fetch_assoc();
            $imgStmt->close();
            
            $previewUrl = $latestImg ? $latestImg["image_url"] : null;
            
            if (!empty($previewUrl)) {
                $imgUrl = $previewUrl;
                if (strpos($imgUrl, 'http') === 0) {
                    $ogImage = $imgUrl;
                } else {
                    $ogImage = "https://www.colombomarathon.lk" . (strpos($imgUrl, '/') === 0 ? '' : '/') . $imgUrl;
                }
            }
        }
    }
} catch (Throwable $e) {
    // Fail silently
}
?>
﻿<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><?php echo htmlspecialchars($ogTitle, ENT_QUOTES, 'UTF-8'); ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($ogDesc, ENT_QUOTES, 'UTF-8'); ?>">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.colombomarathon.lk/gallery?album=<?php echo urlencode($albumSlug); ?>">
    <meta property="og:title" content="<?php echo htmlspecialchars($ogTitle, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="og:description" content="<?php echo htmlspecialchars($ogDesc, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="og:image" content="<?php echo htmlspecialchars($ogImage, ENT_QUOTES, 'UTF-8'); ?>">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.colombomarathon.lk/gallery?album=<?php echo urlencode($albumSlug); ?>">
    <meta property="twitter:title" content="<?php echo htmlspecialchars($ogTitle, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="twitter:description" content="<?php echo htmlspecialchars($ogDesc, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="twitter:image" content="<?php echo htmlspecialchars($ogImage, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="assets/img/favicon.png">
    <link rel="apple-touch-icon" href="assets/img/favicon.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Manrope:wght@200..800&family=Montez&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        @media (min-width: 992px) {
            .col-xl-5th {
                flex: 0 0 20%;
                max-width: 20%;
            }
        }
        .gallery-box.style5 .gallery-img {
            aspect-ratio: 1 / 1;
            height: auto;
            overflow: hidden;
        }
        .gallery-box.style5 .gallery-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="th-menu-wrapper onepage-nav">
        <div class="th-menu-area text-center">
            <button class="th-menu-toggle"><i class="fal fa-times"></i></button>
            <div class="mobile-logo"><a href="index"><img src="assets/img/logo2.svg" alt="ColomboMarathon"></a></div>
            <div class="th-mobile-menu">
                <ul>
                    <li><a href="index">Home</a></li>
                    <li><a href="about">About Us</a></li>
                    <li class="menu-item-has-children"><a href="#">Race Info</a><ul class="sub-menu"><li><a href="race-categories">Race Categories</a></li><li><a href="rules-regulations">Rules & Regulations</a></li></ul></li>
                    <li class="menu-item-has-children"><a href="#">Registration</a><ul class="sub-menu"><li><a href="local-google-form">Local Registration</a></li><li><a href="international-google-form">International Runners</a></li></ul></li>
                    <li class="menu-item-has-children"><a href="#" class="active">Media</a><ul class="sub-menu"><li><a href="news-updates">News & Updates</a></li><li><a href="gallery-albums">Gallery Albums</a></li></ul></li>
                    <li class="menu-item-has-children"><a href="#">Results</a><ul class="sub-menu"><li><a href="leaderboard">Leaderboard</a></li><li><a href="certificates">Certificates</a></li></ul></li>
                    <li><a href="contact">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <header class="th-header header-layout1 header-layout2">
        <div class="sticky-wrapper">
            <div class="menu-area">
                <div class="container th-container">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto"><div class="header-logo"><a href="index"><img src="assets/img/logo3.svg" alt="ColomboMarathon"></a></div></div>
                        <div class="col-auto">
                            <nav class="main-menu d-none d-xl-inline-block">
                                <ul>
                                    <li><a href="index">Home</a></li>
                                    <li><a href="about">About Us</a></li>
                                    <li class="menu-item-has-children"><a href="#">Race Info</a><ul class="sub-menu"><li><a href="race-categories">Race Categories</a></li><li><a href="rules-regulations">Rules & Regulations</a></li></ul></li>
                                    <li class="menu-item-has-children"><a href="#">Registration</a><ul class="sub-menu"><li><a href="local-google-form">Local Registration</a></li><li><a href="international-google-form">International Runners</a></li></ul></li>
                                    <li class="menu-item-has-children"><a href="#" class="active">Media</a><ul class="sub-menu"><li><a href="news-updates">News & Updates</a></li><li><a href="gallery-albums">Gallery Albums</a></li></ul></li>
                                    <li class="menu-item-has-children"><a href="#">Results</a><ul class="sub-menu"><li><a href="leaderboard">Leaderboard</a></li><li><a href="certificates">Certificates</a></li></ul></li>
                                    <li><a href="contact">Contact Us</a></li>
                                </ul>
                            </nav>
                            <button type="button" class="th-menu-toggle d-block d-xl-none"><i class="far fa-bars"></i></button>
                        </div>
                        <div class="col-auto d-none d-xl-block">
                            <div class="header-right"><div class="currency-menu"><select class="form-select nice-select"><option selected>ENG</option><option>SIN</option><option>TAM</option></select></div><div class="header-links"><ul><li><a href="https://web.facebook.com/profile.php?id=61589630767530"><i class="fab fa-facebook"></i></a></li><li><a href="#"><i class="fab fa-instagram"></i></a></li><li><a href="#"><i class="fab fa-youtube"></i></a></li></ul></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="breadcumb-wrapper " style="padding-top:50px; padding-bottom:50px;">
        <div class="container"><div class="breadcumb-content"><h1 class="breadcumb-title">Marathon Moments Gallery</h1><ul class="breadcumb-menu"><li><a href="index">Home</a></li><li><a href="gallery-albums">Gallery Albums</a></li><li>Photo Gallery</li></ul></div></div>
    </div>
    <div class="overflow-hidden space" id="gallery-sec">
        <div class="container-fluid">
            <div class="title-area mb-30 text-center"><span class="sub-title">Photo Collection</span><h2 class="sec-title">2026</h2></div>
            <div class="row gy-4">
                <div class="col-6 col-md-4 col-xl-5th"><div class="gallery-box style5"><div class="gallery-img global-img"><img src="assets/img/gallery/gallery_8_1.jpg" alt="2026 gallery image"><a href="assets/img/gallery/gallery_8_1.jpg" class="icon-btn popup-image"><i class="fal fa-magnifying-glass-plus"></i></a></div></div></div>
                <div class="col-6 col-md-4 col-xl-5th"><div class="gallery-box style5"><div class="gallery-img global-img"><img src="assets/img/gallery/gallery_8_2.jpg" alt="2026 gallery image"><a href="assets/img/gallery/gallery_8_2.jpg" class="icon-btn popup-image"><i class="fal fa-magnifying-glass-plus"></i></a></div></div></div>
                <div class="col-6 col-md-4 col-xl-5th"><div class="gallery-box style5"><div class="gallery-img global-img"><img src="assets/img/gallery/gallery_8_3.jpg" alt="2026 gallery image"><a href="assets/img/gallery/gallery_8_3.jpg" class="icon-btn popup-image"><i class="fal fa-magnifying-glass-plus"></i></a></div></div></div>
                <div class="col-6 col-md-4 col-xl-5th"><div class="gallery-box style5"><div class="gallery-img global-img"><img src="assets/img/gallery/gallery_8_4.jpg" alt="2026 gallery image"><a href="assets/img/gallery/gallery_8_4.jpg" class="icon-btn popup-image"><i class="fal fa-magnifying-glass-plus"></i></a></div></div></div>
                <div class="col-6 col-md-4 col-xl-5th"><div class="gallery-box style5"><div class="gallery-img global-img"><img src="assets/img/gallery/gallery_8_4.jpg" alt="2026 gallery image"><a href="assets/img/gallery/gallery_8_4.jpg" class="icon-btn popup-image"><i class="fal fa-magnifying-glass-plus"></i></a></div></div></div>

            </div>
            <div class="text-center mt-5"><a href="gallery-albums" class="th-btn style3 th-icon">Back to Albums</a></div>
        </div>
    </div>

        <footer class="footer-wrapper bg-title footer-layout2">
        <div class="widget-area">
            <div class="container">
                <div class="newsletter-area">
                    <div class="newsletter-top">
                        <div class="row gy-4 align-items-center">
                            <div class="col-lg-5">
                                <h2 class="newsletter-title text-white text-capitalize mb-0">get updated the latest
                                    newsletter</h2>
                            </div>
                            <div class="col-lg-7">
                                <form class="newsletter-form style2">
                                    <input class="form-control " type="email" placeholder="Enter Email" required="">
                                    <button type="submit" class="th-btn style1">Subscribe Now <img src="assets/img/icon/plane2.svg" alt=""></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-between">
                    <div class="col-md-6 col-xl-3">
                        <div class="widget footer-widget">
                            <div class="th-widget-about">
                                <div class="about-logo">
                                    <a href="index"><img src="assets/img/logo-white.svg" alt="ColomboMarathon"></a>
                                </div>
                                <p class="about-text">Experience Sri Lanka’s biggest marathon event filled with energy, passion, and unforgettable moments.
                                <div class="th-social">
                                    <a href="https://www.facebook.com/profile.php?id=61589630767530"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-whatsapp"></i></a>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-auto">
                        <div class="widget widget_nav_menu footer-widget">
                            <h3 class="widget_title">Quick Links</h3>
                            <div class="menu-all-pages-container">
                                <ul class="menu">
                                    <!-- Quick Links -->
                                    <li><a href="index">Home</a></li>
                                    <li><a href="about">About Us</a></li>
                                    
                                    <li><a href="runner-registration">Register Now</a></li>
                                    <li><a href="gallery-albums">Gallery Albums</a></li>
                                    <li><a href="news-updates">News & Updates</a></li>
                                    <li><a href="contact">Contact Us</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-auto">
                        <div class="widget footer-widget">
                            <h3 class="widget_title">Get In Touch</h3>
                            <div class="th-widget-contact">
                                <div class="info-box_text">
                                    <div class="icon">
                                        <img src="assets/img/icon/phone.svg" alt="img">
                                    </div>
                                    <div class="details">
                                        <p><a href="tel:+94112697934" class="info-box_link">+94 112 697 934</a></p>
                                        
                                    </div>
                                </div>
                                <div class="info-box_text">
                                    <div class="icon">
                                        <img src="assets/img/icon/envelope.svg" alt="img">
                                    </div>
                                    <div class="details">
                                        <p><a href="mailto:colombomarathon@gmail.com" class="info-box_link">colombomarathon@gmail.com</a></p>
                                        <p><a href="mailto:secretary@moys.gov.lk" class="info-box_link">secretary@moys.gov.lk</a></p>
                                    </div>
                                </div>
                                <div class="info-box_text">
                                    <div class="icon"><img src="assets/img/icon/location-dot.svg" alt="img"></div>
                                    <div class="details">
                                        <p>No. 09, Philip Gunawardena

Mawatha, Colombo 07, Sri Lanka.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-auto">
                        <div class="widget footer-widget">
                            <h3 class="widget_title">Instagram Post</h3>
                            <div class="sidebar-gallery">
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_1.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_2.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_3.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_4.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_5.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                                <div class="gallery-thumb">
                                    <img src="assets/img/widget/gallery_1_6.jpg" alt="Gallery Image">
                                    <a target="_blank" href="https://www.instagram.com/" class="gallery-btn"><i class="fab fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright-wrap">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-md-6">
                        <p class="copyright-text">Copyright 2026 <a href="index">Colombo Marathon</a>. All Rights Reserved.</p>
                    </div>
                    <div class="col-md-6 text-end d-none d-md-block">
                        <div class="footer-card">
                            <span class="title">Organized By</span>
                            <img src="assets/img/Ministry-of-Youth-Affairs-&-Sports.png" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="shape-mockup movingX d-none d-xxl-block" data-top="24%" data-left="5%">
            <img src="assets/img/shape/shape_8.png" alt="shape">
        </div>
    </footer>

    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/matter.min.js"></script>
    <script src="assets/js/matterjs-custom.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/main.js"></script>
    <!-- Public Dynamic Loader -->
    <script src="assets/js/public-dynamic.js"></script>
</body>

</html>
