{% require_css %}
<!-- Gallery CSS -->
<style>
    
    {# Make Gallery Three Wide and add padding arround it. #}
    .gallery { 
        padding: 2em;
        columns: 3;
        width: 100%;
    } 
    
    .gallery__image {
        display: block;
        max-width: 100%;
        margin-bottom: 1em;
    }
    {# Make sure the gallery overlay takes up the entire screen and sites on top of evenrything. #}
    .gallery__overlay {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100000;
    }
    {# Close Button #}
    .gallery__overlay .close {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: transparent;
        color: #fff;
        font-size: 2rem;
    }
    {# Center the image and text in one fell swoop. We use translate to ensure the image is always centered. #}
    .gallery__image--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
    
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 1000px;
    
        color: #fff; 
    
    }
</style>
{% end_require_css %}

<!-- Gallery Markup -->

<div class="gallery">
    {# Pull the gallery hubdb from hubspot and set it as a variable called  gallery. #}
    {% set gallery = hubdb_table_rows('677222') %}
    {# loop over the info and create a linked image with the image url and  #}
    {% for scimg in gallery %}
        <a class="gallery__image" href="{{ scimg.image.url }}" title="{{ scimg.image_description }}">
            <img src="{{ scimg.image.url }}" width="550" alt="{{ scimg.image_description }}">
        </a>
    {% endfor %}
    
</div>
    
    
{% require_js %}
{# reqquire_js is to ensure the javascript gets added to the footer #}
<!-- Gallery JS -->
<script>
    $(function(){
        // If you click the gallery image
        $('.gallery__image').on('click', function(e){
            // dont let the link go anywhere
            e.preventDefault();
            // grab the url of the link clicked as well as the title
            var url = $(this).attr('href'),
                title = $(this).attr('title');
            // create and append a image popup with the url and title that we grabed.
            $('body').append('<div class="gallery__overlay"><button class="close">close</button><siv class="gallery__image--wrapper"><img src="' + url + '" alt=""><p>' + title + '</p></div></div>');
        });
        // When you click the close button
        $('body').on('click', 'button.close', function(e){
            // dont let the close button link anywhere
            e.preventDefault();
            // Hide the overlay and then remove it from the DOM.
            $('.gallery__overlay').hide('400', function(){
               $(this).remove(); 
            });  
        });
    });
</script>
{% end_require_js %}