## INIT

#set( $sitevisionUtils = $request.getAttribute('sitevision.utils') )
#set( $portletContextUtil = $sitevisionUtils.portletContextUtil )

#set( $svjq = '$svjq' )
#set( $buttonId = $portletContextUtil.getPortletNamespace('button') )
#set( $modalId = $portletContextUtil.getPortletNamespace('modal') )
#set( $headingId = $portletContextUtil.getPortletNamespace('heading') )
#set( $bodyId = $portletContextUtil.getPortletNamespace('body') )

## MAIN

#if( $context.hasEmbed )
  <a class="lp-youtube-modal__button" id="$!buttonId" href="$!context.youtubeUrl">$!context.buttonText</a>

  <div
    id="$!modalId"
    class="lp-youtube-modal__modal env-modal-dialog"
    role="dialog"
    aria-modal="true"
    aria-labelledby="$!headingId"
    aria-hidden="true"
    tabindex="-1"
    data-modal-dialog-placement-body
  >
    <div class="env-modal-dialog__dialog env-modal-dialog__dialog--large">
        <section class="env-modal-dialog__content">
          <header class="lp-youtube-modal__modal__header env-modal-dialog__header">
              <h2 class="env-text env-modal-dialog__header__title lp-user-hidden" id="$!headingId">$!context.modalHeading</h2>

              <button type="button" data-modal-dialog-dismiss class="lp-youtube-modal__modal__close-button env-button env-button--primary env-button--icon">
                $!context.closeButtonText
                <svg class="env-icon" aria-hidden="true">
                    <use xlink:href="/sitevision/envision-icons.svg#icon-delete"></use>
                </svg>
              </button>
          </header><!--! .lp-youtube-modal__modal__header -->

          <div class="lp-youtube-modal__modal__body env-modal-dialog__body" id="$!bodyId">
            <a class="normal" href="$context.youtubeUrl">$!context.buttonText</a>
          </div><!--! .lp-youtube-modal__modal__body -->
        </section>
    </div>
  </div><!--! .lp-youtube-modal__modal -->

  <script>
    svDocReady(function () {
      $!svjq('#$!buttonId').replaceWith($!svjq('<button>', {
        id: '$!buttonId',
        'data-modal-dialog': true,
        'data-target': '#$!modalId',
        type: 'button',
        class: 'lp-youtube-modal__button',
        text: '$!context.buttonText'
      }));

      $!svjq('#$!modalId')
        .on('show.env-modal-dialog', function () {
          $!svjq('#$!bodyId').html($!svjq('<div>', {
            class: 'lp-youtube-modal__iframe-wrapper',
            html: [
              $!svjq('<iframe>', {
                class: 'lp-youtube-modal__iframe',
                width: 560,
                height: 315,
                src: '$!context.embedUrl',
                title: '$!context.iframeTitle',
                frameborder: 0,
                allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
                allowfullscreen: true
              })
            ]
          }));
        })
        .on('hidden.env-modal-dialog', function () {
          $!svjq('#$!bodyId').html($!svjq('<a>', {
            class: 'normal',
            href: '$context.youtubeUrl',
            text: 'YouTube'
          }));
        });
    });
  </script>
#end