<!-- Footer Section -->
<footer role="contentinfo">
    <div id="newsletter-container">
        
        <form id="newsletter-form">
            <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
            <input
                type="email"
                id="email-input"
                
                placeholder="Subscribe@BloomValleyNursery.com"
            />
            <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
                Subscribe Now!
            </button>
        </form>
    </div>

    <nav id="footer-nav">
        <ul>
            <li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
            <li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
            <li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
            <li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
        </ul>
    </nav>
    
    <div id="social-media">
        <h3>Check us out on social media!</h3>
        <ul class="social-icons">
            <li id="pinterest">
            <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
            <li id="facebook">
            <a href="#" aria-label="Follow us on Facebook"
            ><i class="fa-brands fa-facebook fa-lg"></i
            ></a>
            </li>
            <li id="instagram">
                <a href="#" aria-label="Follow us on Instagram"
                ><i class="fa-brands fa-instagram fa-lg"></i
                ></a>
            </li>
            <li id="twitter">
                <a href="#" aria-label="Follow us on X (Twitter)"
                ><i class="fa-brands fa-square-x-twitter fa-lg"></i
                ></a>
            </li>
            <li id="youtube">
                <a href="#" aria-label="View our Youtube channel"
                ><i class="fa-brands fa-youtube fa-lg"></i
                ></a>
            </li>
        </ul>
    </div>
    
    <div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
</footer>
<!-- Custom Newsletter Modal -->
<div id="custom-alert" class="modal hidden">
    <div class="modal-content">
        <span class="close-modal" id="alert-close-btn">&times;</span>
        <p id="alert-message"></p>
        <button id="alert-ok-button">OK</button>
    </div>
</div>  

<!-- Modal for Shopping Cart -->
<div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>Your Shopping Cart</h2>
        <ul id="cart-items"></ul> <!-- Dynamically populated -->
        <p id="cart-total"></p> <!-- Sub-total will appear here -->
        <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
        </div>
    </div>
</div>

<!-- Modal for Item Added -->
<div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal" id="item-added-close">&times;</span>
        <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal" id="confirmation-close-btn">&times;</span>
        <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
        <button id="confirmation-confirm-btn">Confirm</button>
        <button id="confirmation-close-btn">Close</button>
    </div>
</div>

<!-- Final Confirmation Modal -->
<div id="final-confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
    <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
    <p id="final-confirmation-message"></p> <!-- Message after successful action -->
    <button id="final-confirmation-close-btn">Close</button>
</div>
</div>
