{{#extend "modal" id="share-list-modal" classIconTitle="fas fa-share-alt" title='Share "My Project List"' fullWidth=true wide=true}}
    {{#content "sections"}}

        {{#extend "modal-body-section" customSectionClass="share-list share-list__link"}}
            {{#content "body"}}
            <div class="share-list__link-label">
                <h5>Project list link</h5>
                <span id="copy-link">
                    <a href="#"><i class="fas fa-copy icon"></i><span class="link-title">Copy link</span></a>
                </span>
            </div>
            {{> form-row id="shopping-list-link"}}
            {{/content}}
        {{/extend}}

        {{#extend "modal-body-section" customSectionClass="share-list share-list__email"}}
            {{#content "body"}}

            <form class="share-list__form" action="#" id="share-list-form">

                {{> form-row type="email" id="share-via-email" label="Share via email" info="Enter email addresses separated by space:"}}

                <div class="share-via-email-box">
                    {{> form-row type="email"}}
                </div>

                <span id="add-btn" class="add-email-btn">
                    <a href="#"><i class="fas fa-plus-square icon"></i><span class="link-title">Add email</span></a>
                </span>

                <div class="email-notification">{{> notifications notification-page.success_email-sent withCloseBtn="true"}}</div>

                <div class="btn-share-confirmation">
                    <button class="btn btn-primary">
                        <span class="btn__text">Share</span>
                    </button>
                    <button class="btn btn-secondary share-list__cancel">
                        <span class="btn__text">Cancel</span>
                    </button>
                </div>
            </form>
            {{/content}}
        {{/extend}}

        {{#extend "modal-body-section" customSectionClass="share-list share-list__social-media"}}
            {{#content "body"}}
            <h5>Share on social media & apps</h5>
            <div class="socials">
                <ul class="socials__list">
                    <li class="socials__item">
                        <a href="https://www.facebook.com/Wickes.co.uk" target="_blank">
                        <img class="socials__img" src="./img/socials_facebook_white_blue_color.svg" alt="facebook">
                        </a>
                    </li>
                    <li class="socials__item">
                        <a href="http://www.twitter.com/Wickes" target="_blank">
                        <img class="socials__img" src="./img/socials_twitter_color.svg" alt="twitter">
                        </a>
                    </li>
                    <li class="socials__item">
                        <a href="#" target="_blank">
                            <img class="socials__img" src="./img/socials_whatsapp_color.svg" alt="whatsapp">
                        </a>
                    </li>
                </ul>
            </div>
            {{/content}}
        {{/extend}}
    {{/content}}
{{/extend}}


<script>
    let count = 0;
    $('.share-via-email-box').hide();
    $('#add-btn').click(function(){
        $('.share-via-email-box').show();

        if (count >= 1 && count < 3) {
            $(this).prev('.share-via-email-box').clone().insertBefore(this);
        }

        if (count === 3) {
            $(this).prev('.share-via-email-box').clone().insertBefore(this);
            $('#add-btn').hide();
        }

        count++;
    })

    $(".share-list__cancel").bind("click", function() {
        $("input[type=email]").val("");
    });
</script>