{% extends "base.html" %}
{% block extrahead %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/custom.f7ec4df2.min.css' | url }}">
<style>
    .content-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left-content {
        flex-grow: 1;
    }

    .right-content {
        color: #fff;
        text-align: right;
    }

    /* Style for the center banner to make it more obviously clickable */
    .center-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        text-align: center;
        transition: opacity 0.5s ease;
        /* Add smooth transition for opacity changes */
    }

    .center-container a {
        display: flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .center-container a:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Add a subtle pointer cursor indicator */
    .center-container a::after {
        content: " →";
        margin-left: 4px;
        transition: transform 0.2s ease;
    }

    .center-container a:hover::after {
        transform: translateX(3px);
    }

    .floating-button {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background-color: #000;
        color: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
        cursor: pointer;
    }

    .floating-button img {
        margin-right: 8px;
        width: 24px;
        height: 24px;
    }

    .floating-button:hover {
        background-color: #333;
    }

    /* Custom styling to hide reCAPTCHA badge */
    .grecaptcha-badge {
        visibility: hidden;
    }
</style>
{% endblock %}

{% block announce %}
<div class="content-container">
    <div class="left-content">
        <strong>Follow me</strong> on
        <a rel="me" href="https://www.linkedin.com/in/samapriya/">
            <span class="twemoji linkedin">
                {% include ".icons/fontawesome/brands/linkedin.svg" %}
            </span>
            <strong>LinkedIn</strong>
        </a>
        <a rel="me" href="https://www.github.com/samapriya/">
            <span class="twemoji github">
                {% include ".icons/fontawesome/brands/github.svg" %}
            </span>
            <strong>GitHub</strong>
        </a>
        <a href="https://datacommons.substack.com/">
            <span class="twemoji substack">
                {% include ".icons/simple/substack.svg" %}
            </span>
            <strong>Substack</strong>
        </a>
    </div>

    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" />
    <!-- Ensure we have all the specific icons we need -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=forum,camera,search_insights&display=block" />

    <div class="center-container" id="rotatingBanner">
        <!-- The content will be set by JavaScript -->
    </div>

    <div class="right-content">
        Support
        <a rel="me" href="https://github.com/sponsors/samapriya">
            <span class="twemoji sponsor">
                {% include ".icons/octicons/sponsor-tiers-24.svg" %}
            </span>
            <strong>Sponsor</strong>
        </a>
    </div>
</div>
{% endblock %}

{% block content %}
{{ super() }}

<!-- Floating Button -->
<a href="https://search.gee-community-catalog.org" class="floating-button" id="searchRedirect" target="_blank">
    <img src="https://i.imgur.com/RJian8r.png" alt="Logo">
    <span>Ask AI</span>
</a>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ 'assets/javascripts/custom.a678ee80.min.js' | url }}"></script>
<script>
    // Google colors array - only blue, red, yellow, green
    const googleColors = [
        "#4285F4", // Google Blue
        "#DB4437", // Google Red
        "#F4B400", // Google Yellow
        "#0F9D58"  // Google Green
    ];

    // Set random color on page load
    document.addEventListener("DOMContentLoaded", function () {
        // Set random banner content initially
        const rotatingBanner = document.getElementById("rotatingBanner");

        const bannerContents = [
            {
                text: "Browse the visual catalog",
                icon: "camera",
                link: "https://gee-community-catalog.org/browse"
            },
            {
                text: "Try our Advanced AI Search",
                icon: "search_insights",
                link: "https://search.gee-community-catalog.org"
            }
        ];

        let currentBannerIndex = Math.floor(Math.random() * bannerContents.length);

        // Function to update the banner content
        function updateBanner() {
            const selectedBanner = bannerContents[currentBannerIndex];
            rotatingBanner.innerHTML = `
                <strong>
                    <a href="${selectedBanner.link}" target="_blank">
                        <span class="material-symbols-outlined" style="vertical-align: middle; font-size: 24px;">
                            ${selectedBanner.icon}
                        </span>
                        ${selectedBanner.text}
                    </a>
                </strong>
            `;
        }

        // Initial banner update
        updateBanner();

        // Set interval to rotate banner every 12 seconds
        setInterval(function () {
            // Move to the next banner
            currentBannerIndex = (currentBannerIndex + 1) % bannerContents.length;

            // Update the banner with a fade effect
            rotatingBanner.style.opacity = "0";

            setTimeout(function () {
                updateBanner();
                rotatingBanner.style.opacity = "1";
            }, 500); // Half a second for fade out, then update

        }, 12000); // 12 seconds
    });
</script>
{% endblock %}