<div class="row">
    <div class="col-lg-7">
        <div class="panel">
            <div class="panel-heading">
                <i class="icon-edit-sign"></i> {l s="Designs" mod="myswissstyle"}
            </div>
            {foreach $preview as $product_preview}
                {foreach $product_preview as $PreviewEntity}
                    <div class="builder_designs_image_comtainer">
                        <div class="preview" style="background: url({$PreviewEntity->images[Preview::IMAGE_SMALL]['src']}) no-repeat">
                        </div>
                        <div class="full_size_preview"  style="background: url({$PreviewEntity->images[Preview::IMAGE_BIG]['src']}) no-repeat">
                            <div class="close_button"></div>
                        </div>
                    </div>
                {/foreach}
            {/foreach}
            <div class="preview_title"><a href="{$pdf_download_url}?type=pdf&order_id={$order_id}">{l s="Download" mod="myswissstyle"}</a></div>
        </div>
    </div>
</div>

<style>
    .builder_designs_image_comtainer {
        display: inline-block;
        position: relative;
    }

    .builder_designs_image_comtainer .full_size_preview {
        border: 1px solid #ccc;
        border-radius: 40px;
        display: none;
        position: absolute;
        width: 600px;
        height: 600px;
        background-size: cover;
        top: -115px;
        left:-40px;
        z-index: 999;
    }

    .builder_check_input_container * {
        padding: 0;
        margin: 0;
    }
    .builder_designs_image_comtainer .preview {
        display: block;
        position: relative;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
        width: 50px;
        height: 50px;
        background-size: cover;
        cursor: pointer;
    }
    .builder_designs_image_comtainer .preview:hover {
        border: 1px solid #cccccc;
    }

    .builder_designs_image_comtainer .preview_title {
        display: block;
        position: relative;
        width: 50px;
    }

    .builder_designs_image_comtainer .full_size_preview .close_button {
        display: block;
        position: absolute;
        top: -17px;
        right: -13px;
        width: 40px;
        height: 40px;
        background-image: url(/modules/myswissstyle/images/popup-close.png);
        cursor: pointer;
    }
</style>
<script type="application/javascript">
    $(document).ready(function() {

        $(document).on('click', '.builder_designs_image_comtainer .preview', function(){
            $(".full_size_preview").hide();
            $(this).next('.full_size_preview').show();
        });

        $(document).on('click','.builder_designs_image_comtainer .full_size_preview .close_button', function(){
            $(this).parents('.full_size_preview').hide();
        });
    });
</script>