<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Show Posters</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                background-color: #141414 !important;
            }
        
            .tile {
                width: 400px;
                margin: 10px;
                text-align: center;
                border: 1px solid #030000;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: #00000069 0px 5px 10px;
                transition: all 0.2s ease;
                position: relative;
            }
        
            .tile:hover {
                transform: scale(1.05);
                box-shadow: #00000069 0px 10px 15px;
            }
    
            .tile img {
                width: 100%;
                height: auto;
                display: block;
            }
    
            .tile .title {
                padding: 10px;
                color: #eeeeee;
                background-color: #030000be;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                transform: translateY(100%);
                opacity: 0;
                transition: transform 0.3s ease, opacity 0.3s ease;
            }
    
            .tile:hover .title {
                transform: translateY(0);
                opacity: 1;
            }
    
            /* Make the star hidden by default */
            .favorite-star {
                position: absolute;
                top: 0px;
                right: 8px;
                font-size: 30px;
                color: #ffffff;
                cursor: pointer;
                opacity: 0; /* Hide the star */
                transition: opacity 0.3s ease; /* Smooth transition */
                text-shadow: #000000 1px 1px 10px;
            }
    
            /* Show the star on hover */
            .tile:hover .favorite-star {
                opacity: 1; /* Show the star when the tile is hovered */
            }
    
            /* Style the favorited star */
            .favorite-star.favorited {
                color: gold;
            }
        </style>
    </head>
    <body>
        {% for item in data %}
        <div class="tile" data-id="{{ item['ID'] }}">
            <!-- Make the image clickable by wrapping it in an anchor tag -->
            <a href="/show/{{ item['LINK'] }}">
                <img src="{{ item['POSTER'] }}" alt="{{ item['SHOW'] }}">
            </a>
            <div class="title">{{ item['SHOW'] }}</div>
            <div class="favorite-star">&#9733;</div>
        </div>
        {% endfor %}
    
        <!-- <script>
            // Load favorites from localStorage
            const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    
            // Function to update favorite status based on stored data
            function updateFavoriteStatus() {
                const tiles = document.querySelectorAll('.tile');
                tiles.forEach(tile => {
                    const id = tile.getAttribute('data-id');
                    const star = tile.querySelector('.favorite-star');
                    
                    // Add "favorited" class if item is in favorites
                    if (favorites.includes(id)) {
                        star.classList.add('favorited');
                    } else {
                        star.classList.remove('favorited');
                    }
                });
            }
    
            // Add event listeners for the favorite stars
            document.querySelectorAll('.favorite-star').forEach(star => {
                star.addEventListener('click', (e) => {
                    e.stopPropagation(); // Prevent the click from bubbling up to the tile
    
                    const tile = e.target.closest('.tile');
                    const id = tile.getAttribute('data-id');
    
                    // Toggle favorite
                    if (favorites.includes(id)) {
                        favorites.splice(favorites.indexOf(id), 1); // Remove from favorites
                    } else {
                        favorites.push(id); // Add to favorites
                    }
    
                    // Save the updated favorites list to localStorage
                    localStorage.setItem('favorites', JSON.stringify(favorites));
    
                    // Update the tile's favorite status
                    updateFavoriteStatus();
                    
                    // Reorder items: Move favorites to the top
                    reorderItems();
                });
            });
    
            // Function to reorder items with favorites at the top
            function reorderItems() {
                const tiles = document.querySelectorAll('.tile');
                const tilesArray = Array.from(tiles);
    
                // Sort tiles: favorites first
                tilesArray.sort((a, b) => {
                    const idA = a.getAttribute('data-id');
                    const idB = b.getAttribute('data-id');
                    const isAFavorite = favorites.includes(idA);
                    const isBFavorite = favorites.includes(idB);
                    return isBFavorite - isAFavorite;
                });
    
                // Append tiles back in the new order
                const container = document.body;
                tilesArray.forEach(tile => container.appendChild(tile));
            }
    
            // Initially update the favorite status and reorder items
            updateFavoriteStatus();
            reorderItems();
        </script> -->
    </body>
    
</html>
