<div id="piwik-promo">
    <div id="piwik-promo-video">
        <div id="piwik-promo-thumbnail">
            <img src="plugins/Morpheus/images/video_play.png"/>
        </div>

        <div id="piwik-promo-embed" style="display:none;">
        </div>
    </div>

    <a id="piwik-promo-videos-link" href="https://matomo.org/blog/2012/12/piwik-how-to-videos/" rel="noreferrer noopener" target="_blank">
        {{ 'CoreHome_ViewAllPiwikVideoTutorials'|translate }}
    </a>

    <div id="piwik-promo-share">
        <span>{{ 'CoreHome_ShareThis'|translate }}:</span>

        {# facebook #}
        <a href="https://www.facebook.com/sharer.php?u={{ promoVideoUrl|url_encode }}" rel="noreferrer noopener" target="_blank">
            <img src="plugins/Morpheus/icons/dist/socials/facebook.com.png" width="16px" height="16px" />
        </a>

        {# twitter #}
        <a href="https://twitter.com/share?text={{ shareText|url_encode }}&url={{ promoVideoUrl|url_encode }}" rel="noreferrer noopener" target="_blank">
            <img src="plugins/Morpheus/icons/dist/socials/twitter.com.png" width="16px" height="16px" />
        </a>

        {# email #}
        <a href="mailto:?body={{ shareTextLong|url_encode(true) }}&subject={{ shareText|url_encode(true) }}" target="_blank">
            <img src="plugins/Morpheus/images/email.png" />
        </a>
    </div>

    <div style="clear:both;"></div>

    <div id="piwik-widget-footer" style="color:#666;">{{ 'CoreHome_CloseWidgetDirections'|translate }}</div>
</div>

<script type="application/javascript">
    $(function () {
        $('#piwik-promo-thumbnail').click(function () {
            var promoEmbed = $('#piwik-promo-embed'),
                    widgetWidth = $(this).closest('.widgetContent').width(),
                    height = (266 * widgetWidth) / 421,
                    embedHtml = '<iframe width="100%" height="' + height + '" src="https://www.youtube-nocookie.com/embed/OslfF_EH81g?autoplay=1&vq=hd720&wmode=transparent" frameborder="0" wmode="Opaque"></iframe>';

            $(this).hide();
            promoEmbed.height(height).html(embedHtml);
            promoEmbed.show();
        });
    });
</script>
