<div class="overlay" data-bind="click: controller.closeOverlay.bind(controller), style: { visibility: currentImage() ? 'visible' : 'hidden', opacity: currentImage() ? '1' : '0'}"></div>
<div class="picture-popup" data-bind="style: { visibility: currentImage() ? 'visible' : 'hidden', opacity: currentImage() ? '1' : '0'}">
    <div class="btn-close" data-bind="click: controller.closeOverlay.bind(controller)"></div>
    <div class="image-container">
        <!-- ko if: currentImage --><img src="{{$data.currentImage}}" alt=""><!-- /ko -->
    </div>
    <a class="left-button" data-bind="click: controller.showPreviousImage.bind(controller)"><img src="inc/image/image-popup/left-arrow.png" alt="" class="left"></a>
    <a class="right-button" data-bind="click: controller.showNextImage.bind(controller)"><img src="inc/image/image-popup/right-arrow.png" alt="" class="right"></a>
</div>
<div class="outer-site-frame">
    <div class="page-content-block center-text">
        <h1 class="heading-01">Pictures!<br><span
            class="color-secondary">Or it didn't happen</span></h1>
        <div class="albums">
            <ul class="album">

            </ul>
        </div>
        <div class="container" data-columns>
            <div class="block-sizer">
            </div>

                <!-- ko foreach: images -->
                <div class="block" data-bind="click: $root.controller.toggleThumbnailOnClick.bind($root.controller, $index())">
                    <img class="lazy" data-bind="attr.src:$data.thumb">
                </div>
                <!-- /ko -->

        </div>
        <button data-bind="click: controller.moreImages.bind(controller)">MORE PICCAAASSS</button>
    </div>
</div>