{# Template : Overlay #}

{% extends 'chop/layouts.twig' %}

{% block content %}

    <div class="wrapper">
        {% set small_image = 'http://placehold.it/350x150.png' %}
        {% set large_image = 'http://placehold.it/1024x600.png' %}
        {% set video_1 = 'https://www.youtube.com/watch?v=-hIugp7p5O0' %}
        {% set video_2 = 'https://vimeo.com/116046838' %}

        {% set short_popup = 'layouts/plugins/overlay/plugin_includes/short_popup.twig' %}
        {% set long_popup = 'layouts/plugins/overlay/plugin_includes/long_popup.twig' %}
        {% set mixed_popup = 'layouts/plugins/overlay/plugin_includes/mixed_popup.twig' %}

        <h1>Overlay examples</h1>
        <div class="section">
            <div class="sectionItemLarge nogap">
                <h3>Single Image</h3>

                <div class="sectionItemLarge">
                    <a class="js_imagePopup" href="{{ large_image }}"><img src="{{ small_image }}"></a>
                </div>
                <div class="sectionItemLarge">
                    <a class="js_imagePopup" href="{{ large_image }}" data-title="Title goes here"><img src="{{ small_image }}"></a>
                </div>
            </div>
            <div class="sectionItemLarge nogap">
                <h3>Single Video</h3>
                <div class="sectionItemLarge">
                    <a class="js_videoPopup" href="{{ video_1 }}"><img src="{{ small_image }}"></a>
                </div>
                <div class="sectionItemLarge">
                    <a class="js_videoPopup" href="{{ video_1 }}" data-title="Title goes here"><img src="{{ small_image }}"></a>
                </div>
            </div>
        </div>

        <h3>Image Gallery</h3>
        <div class="section">
            {% for i in 0..3 %}
                <div class="sectionItemSmall">
                    <a class="js_gallery" href="{{ large_image }}" rel="gal"><img src="{{ small_image }}"></a>
                </div>
            {% endfor %}
        </div>

        <h3>Image Gallery with link</h3>
        <div class="section">
            {% for i in 0..3 %}
                <div class="sectionItemSmall">
                    <a class="js_galleryWithLink" href="{{ large_image }}" data-url="/url-here{{ loop.index }}" rel="galWithLink"><img src="{{ small_image }}"></a>
                </div>
            {% endfor %}
        </div>

        <h3>Mixed Gallery</h3>
        <div class="section">
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ large_image }}" rel="gal2"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ video_2 }}" data-video="true" rel="gal2"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="/core/css/{{ mixed_popup}}" data-ajax="true" rel="gal2"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ video_1 }}" rel="gal2" data-video="true"><img src="{{ small_image }}"></a>
            </div>
             <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="#popup2" data-no-ajax="true" rel="gal2"><img src="{{ small_image }}"></a>
            </div>
        </div>

        <h3>Mixed Gallery with titles</h3>
        <div class="section">
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ large_image }}" rel="gal3" data-title="Title 1"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ video_2 }}" data-title="Title 2" data-video="true" rel="gal3"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="/core/css/{{ mixed_popup}}" data-ajax="true" rel="gal3"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="{{ video_1 }}" rel="gal3" data-video="true"><img src="{{ small_image }}"></a>
            </div>
        </div>

        <h3>Ajax content</h3>
        <div class="section">
            <div class="sectionItemSmall">
                <h5>Short text</h5>
                <a class="js_overlay" href="/core/css/{{ short_popup}}"><i class="fa fa-play"></i> Open</a>
            </div>
            <div class="sectionItemSmall">
                <h5>Long text</h5>
                <a class="js_overlay" href="/core/css/{{ long_popup}}"><i class="fa fa-play"></i> Open</a>
            </div>
            <div class="sectionItemSmall">
                <h5>Text + image</h5>
                <a class="js_overlay" href="/core/css/{{ mixed_popup}}"><i class="fa fa-play"></i> Open</a>
            </div>
        </div>

        <h3>Show block from same page</h3>
        <div class="section">
            <div class="sectionItemSmall">
                <h5>Short text</h5>
                <a class="js_overlay" data-no-ajax="true" href="#popup1"><i class="fa fa-play"></i> Open</a>
            </div>
            <div class="sectionItemSmall">
                <h5>Long text</h5>
                <a class="js_overlay" data-no-ajax="true" href="#popup2"><i class="fa fa-play"></i> Open</a>
            </div>
            <div class="sectionItemSmall">
                <h5>Text + image</h5>
                <a class="js_overlay" data-no-ajax="true" href="#popup3"><i class="fa fa-play"></i> Open</a>
            </div>
            <div class="sectionItemSmall">
                <h5>Form field</h5>
                <a class="js_overlay" data-no-ajax="true" href="#popup4"><i class="fa fa-play"></i> Open</a>
            </div>
        </div>

        <h3>HTML Gallery</h3>
        <div class="section">
             <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="/core/css/{{ short_popup}}" data-ajax="true" rel="gal4"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="/core/css/{{ long_popup}}" data-ajax="true" rel="gal4"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="/core/css/{{ mixed_popup}}" data-ajax="true" rel="gal4"><img src="{{ small_image }}"></a>
            </div>
        </div>

        <h3>HTML Gallery from hidden block</h3>
        <div class="section">
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="#popup1" data-no-ajax="true" rel="gal5"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="#popup2" data-no-ajax="true" rel="gal5"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="#popup3" data-no-ajax="true" rel="gal5"><img src="{{ small_image }}"></a>
            </div>
            <div class="sectionItemSmall">
                <a class="js_mixedGallery" href="#popup4" data-no-ajax="true" rel="gal5"><img src="{{ small_image }}"></a>
            </div>
        </div>


        <div id="popup1" class="hideme">
            {% include  short_popup %}
        </div>
        <div id="popup2" class="hideme">
            {% include long_popup %}
        </div>
        <div id="popup3" class="hideme">
            {% include mixed_popup %}
        </div>

        <div id="popup4" class="hideme">
            <div class="row">
                <label for="testtext">Test field that will save value when overlay is reopened</label>
                <div class="inputWrap">
                    <input class="text" type="text" id="testtext" name="testtext"/>
                </div>
            </div>
        </div>

    </div>

{% endblock %}