<div class="container mb-3">
    <a class="btn btn-secondary btn-back-to-project-list" href="/page_my-project-list-multiple.html">
        <i class="fas fa-arrow-left"></i>
        <span>
            Back to Project Lists hub
        </span>
    </a>
</div>
<div class="globalMessages container component pt-0 pb-0">
  <div class="row">
    <div class="col-12">
    </div>
  </div>
</div>
<div class="shopping-list {{#if note}}shopping-list-note{{/if}}">
  <div class="container component pb-0 pt-0">
    <div class="page-header {{#ifCond copy-id '||' generate-id}}page-header--small-indent{{/ifCond}}">
      <h1 class="page-header__title">My Project List</h1>
    </div>
  </div>
  {{#if copy-id}}
    {{> copy-project-id }}
  {{/if}}
  {{#if generate-id}}
    {{> generate-project-id }}
  {{/if}}
 {{#unless note}}
  <div class="container component pt-0 header-line-break">
    <div class="row">
      <div class="col-12">
        <hr>
      </div>
    </div>
  </div>
 {{/unless}}
  {{#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 m-0">
          {{#if note}}
            <div class="actions">
              <button class="btn btn_full btn-secondary share-call share-call__desktop" data-toggle="modal" data-target="#share-list-modal">
                <i class="fas fa-share-alt icon"></i>
                <span>Share</span>
              </button>
              <button href="#" class="btn btn_full btn-secondary download-pdf {{#if hideDownload}}d-none{{/if}}">
                <i class="fas fa-file-download icon"></i>
                <span>Download</span>
              </button>
            </div>
            {{> project-list-note}}
          {{/if}}
          <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>
            {{#unless note}}
            <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>
            {{/unless}}
            {{#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">
              {{#with page_merge-basket.loggedInBasket.[2]}}
                {{>order-line-shop-list promo="Buy 2 and get 2 for the price of 23 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
              {{#with page_merge-basket.loggedInBasket.[0]}}
                {{>order-line-shop-list promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
              {{#with page_merge-basket.loggedInBasket.[0]}}
                {{>order-line-shop-list noClickAndCollect=true  promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
              {{#with page_merge-basket.loggedInBasket.[0]}}
                {{>order-line-shop-list outOfStock=true discount=true promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
              {{#with page_merge-basket.loggedInBasket.[0]}}
                {{>order-line-shop-list outOfStock=true notifyMe=true promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
              {{#with page_merge-basket.loggedInBasket.[0]}}
                {{>order-line-shop-list storeOnly=true discount=true promo="Buy 2 and get 2 for the price of 2 lorem ipsum dolor sit amet nunc consequitur"}}
              {{/with}}
            </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>
