<div class="overlay-container__share-board js-share-board {{#if shareMyBoardOverlay}} share-my-board {{/if}}" {{#if shareBoardApi}}data-share-api="{{shareBoardApi}}"{{/if}} data-input-error-text="{{shareBoardInputErrorText}}">
    <div class="overlay-share-board js-shared-board-container">
        <div class="overlay-share-board__inner">
            <div class="overlay-share-board__heading">
                <a href="#" class="overlay-share-board__close overlay-share-board__close--back js-share-board-close">
                    <svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79511 0.792893L0.867263 5.72074C0.858112 5.72989 0.849175 5.73917 0.840453 5.74859C0.824239 5.76284 0.808376 5.77771 0.792894 5.79319C0.402369 6.18371 0.402369 6.81688 0.792893 7.2074L5.79315 12.2077C6.18367 12.5982 6.81683 12.5982 7.20736 12.2077C7.59788 11.8171 7.59788 11.184 7.20736 10.7935L3.91413 7.50022L18.5003 7.50022C19.0525 7.50022 19.5003 7.0525 19.5003 6.50022C19.5003 5.94793 19.0525 5.50022 18.5003 5.50022L3.91621 5.50022L7.20932 2.20711C7.59985 1.81658 7.59985 1.18342 7.20932 0.792893C6.8188 0.402369 6.18563 0.402369 5.79511 0.792893Z" fill="white"/></svg>
                </a>
                <h2>{{ shareBoardHeading }}</h2>
                <a href="#" class="overlay-share-board__close overlay-share-board__close--close js-share-board-close">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.58929 26.2768C5.06859 25.7561 5.06859 24.9119 5.58929 24.3912L24.2554 5.72506C24.7761 5.20436 25.6203 5.20436 26.141 5.72506C26.6617 6.24576 26.6617 7.08998 26.141 7.61067L7.47491 26.2768C6.95421 26.7975 6.10999 26.7975 5.58929 26.2768Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.58844 5.72406C6.10914 5.20336 6.95336 5.20336 7.47406 5.72406L26.1402 24.3902C26.6609 24.9109 26.6609 25.7551 26.1402 26.2758C25.6195 26.7965 24.7753 26.7965 24.2546 26.2758L5.58844 7.60968C5.06774 7.08898 5.06774 6.24476 5.58844 5.72406Z" fill="white"/></svg>
                </a>
            </div>
            <div class="overlay-share-board__copy">
                <p>{{ shareBoardIntro }}</p>
            </div>
            <div class="overlay-share-board__wrap">
                <div class="overlay-share-board__image">
                    <figure
                        class="image js-image image--original-size"
                        data-module="imagelazy"
                    >
                        <picture class="image__container">
                            {{#if mobileShareImage.src}}
                                <source
                                    media="(max-width: 767px)"
                                    class="js-small-image"
                                    type="image/png"
                                    data-srcset="{{mobileShareImage.src}}"
                                />
                            {{/if}}
                            {{#if desktopShareImage.src}}
                                <source
                                    media="(min-width: 768px) and (max-width:1319px)"
                                    class="js-medium-image" type="image/png"
                                    data-srcset="{{desktopShareImage.src}}"
                                />
                                <img class="js-image-lazyload js-fallback-image"
                                    data-src="{{desktopShareImage.src}}"
                                    width=""
                                    height=""
                                    alt="{{#if desktopShareImage.altText}}{{desktopShareImage.altText}}{{/if}}"
                                >
                            {{/if}}
                        </picture>
                    </figure>
                </div>
                <div class="overlay-share-board__card js-share-board-card {{#if boardImage}}{{#ifNotEquals boardImage "no-image"}}has-background-image{{/ifNotEquals}}{{/if}}">
                    <div class="overlay-share-board__card-content js-share-card-content" {{#if boardImage}}{{#ifNotEquals boardImage "no-image"}}style="background-image: url({{boardImage}});"{{/ifNotEquals}}{{/if}}>
                        <div class="overlay-share-board__user js-share-user-container">
                            {{{userIcon}}}
                            <p class="overlay-share-board__user-name js-share-user-name">{{ shareBoardOwner }}</p>
                        </div>
                        <div class="overlay-share-board__board-name">
                            <h2 class="overlay-share-board__board-name js-share-board-name">{{ shareBoardName }}</h2>
                        </div>
                    </div>
                    <div class="overlay-share-board__url-container">
                        <div class="overlay-share-board__board-url js-board-url-input">
                            <input type="text" class="overlay-share-board__input-url js-share-board-url" value="{{shareBoardInputLoadingText}}" disabled >
                        </div>
                    </div>
                    <div class="overlay-share-board__buttons">
                        <button class="button-p2 button-p2--full-width js-share-copy-button" data-success-notif-message="{{ copyToClipboardSuccessNotif }}" data-success-notif-icon='{{{copyToClipboardSuccessNotifIcon}}}' disabled="true">{{ copyToClipboardText }}</button>
                        <button class="button-p1 button-p1--full-width js-share-board-button" disabled="true">{{ shareBoardText }}</button>
                        {{!-- Future add this here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="overlay-share-board__notification js-share-board-notification">
        <span class="overlay-share-board__notification-text js-share-board-notification-text" data-board-card-remove-text="{{notificationText}}"></span>
    </div>
</div>