<div class="shopping-list">
    <div class="container component pt-0 pb-0">
        <div class="row">
            <div class="col-12">
                <div class="primary-text mb-3">{{> notifications notification-page.success-product-removed-from-shop-list withCloseBtn="true"}}</div>
                <div class="primary-text mb-3 {{#if
                  emptyShopList}}d-none{{/if}}">{{> notifications notification-page.warning-note-merge-lists withCloseBtn="true"}}</div>
                <div class="primary-text mb-3">{{> notifications notification-page.warning-note-removed-product withCloseBtn="true"}}</div>
                {{#if isUserRegister}}
                {{else}}
                    <div class="mb-4">{{> not-logged-in-message notification_message=notification-page.warning-note-not-logged}}</div>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="container component pb-0 pt-0">
        <div class="page-header">
            <h1 class="page-header__title">My Project List</h1>
        </div>
    </div>
    <div class="container component pt-0 header-line-break">
        <div class="row">
            <div class="col-12">
                <hr>
            </div>
        </div>
    </div>
    {{#if emptyShopList}}
        <div class="empty-shopping-list">
            <div class="container component pt-0">
                <div class="row">
                    <div class="col-12 primary-text">
                        <h3 class="heading-3">Your project list is empty.</h3>
                        <p>Save products in a project list so that you can review and buy them later. It's the best way to keep
                            yourself organised.</p>
                        <p>To get started please visit a product page and select the link:</p>
                        <span class="save-to-shopping-list">
                            <button class="btn btn-outline-primary">
                                <span class="btn__text">
                                    <i class="far fa-clipboard fa-lg"></i>
                                </span>
                            </button>
                            <span class="heading-5">Save to project list</span>
                         </span>
                    </div>
                </div>
            </div>
        </div>
    {{else}}
        <div class="my-shopping-list">
            <div class="container">
                <div class="row">
                    <div class="content shop-list-info d-flex">
                        <div class="shop-list-info_item heading-4">
                            <span class="shop-list-info_count">5</span> item<span class="shop-list-info_one-item">s</span> (<span
                          class="shop-list-info_left">95</span> left)
                        </div>
                        <div class="shop-list-info_call-action {{#if isUserRegister}}user-reg{{/if}} primary-text">
                            {{#if isUserRegister}}
                                <a href="#" class="share-call share-call__desktop" data-toggle="modal"
                                   data-target="#share-list-modal"><i class="fas fa-share-alt icon"></i><span>Share list</span></a>
                                <div class="share-call__mobile share-email-via">
                                    <a href="#" class="share-call" data-toggle="modal" data-target="#share-list-modal"><i
                                      class="fas fa-share-alt icon"></i><span>Share via email</span></a>
                                    <div class="share-via">
                                        <span>Share via</span>
                                        <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_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>
                                    </div>
                                </div>

                            {{else}}
                                <span class="share-call_not-register">To share project list please login</span>
                            {{/if}}
                            <a href="#" class="download-pdf"><i class="fas fa-file-download icon"></i><span>Download list</span></a>
                        </div>
                        {{#if ref-value}}
                            <div class="shop-list-info__ref">
                                Project reference -
                                <span class="shop-list-info__ref_value">
                    Project reference value
                </span>
                            </div>
                        {{/if}}
                    </div>
                </div>
                {{#if ref}}
                    <div class="row">
                        <div class="content shop-list__ref ref">
                            <div class="ref__add">
                                {{> info-icon
                                  title="Project reference will be displayed on the project list when downloaded or shared via email."
                                  data-placement="right"
                                }}
                                <span class="ref__add-text">add project reference</span>
                                <label for="ref-add" class="chb ref__add-label">
                                    <input type="checkbox" value="value" id="ref-add" name="ref-add">
                                    <ins><i class="fas fa-check"></i></ins>
                                </label>
                            </div>
                            <div class="ref__field ref__info ref__info_hide ">
                                <div class="ref__count">
                                    <span class="ref__count-val"></span>
                                    <span class="ref__count-text">characters left</span>
                                </div>
                                <label class="ref__label">
                                    <input type="text" class="tbx tbx_small ref__input" maxlength="50">
                                </label>
                                <p class="ref__error">
                                    Please enter a valid text
                                </p>
                            </div>
                            <div class="ref__action ref__info ref__info_hide">
                                <a href="#" class="ref__link">save</a>
                                <a href="#" class="ref__remove ref__remove_hide">
                                    <span class="remove-icon">
                                        <i class="fas fa-trash"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                {{/if}}
            </div>
            <div class="component pt-0 pb-0">
                <div class="container">
                    <div class="row">
                        <div class="content">
                            {{#each page_merge-basket.loggedInBasket}}
                                {{>order-line-shop-list promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur" showEnergyEfficiency=true}}
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{#content "foot" mode="append"}}
            {{> click-and-collect-modal}}
            {{> share-list-modal}}
        {{/content}}
    {{/if}}
    {{#if pagination}}
        <div class="component pb-0">
            <div class="container">
                <div class="row">
                    <div class="content">
                        {{> pagination pagination4="true"}}
                    </div>
                </div>
            </div>
        </div>
    {{/if}}
</div>
