{{#extend "base" pageClass="page_empty-basket" title="No product found" hideBreadcrumbs=true hideBanner="true" globalSearchV2="true" pageBasket=true}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
<link type="text/css" rel="stylesheet" href="./css/pages/page_empty-basket.css">
<link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
<link type="text/css" rel="stylesheet" href="./css/pages/checkout.css">
{{/content}}
{{#content "body"}}
<main class="empty-basket add-list-id">
  <div class="container add-list-id__body pb-0">
    <div class="page-header">
      <h1 class="page-header__title">Your Shopping Basket Is Empty</h1>
      <div class="page-header__intro">
        <p>You can browse our products by selecting a category above</p>
        <p>OR enter a project ID and click 'add to basket' to add all project list items to your basket</p>
      </div>
      <form action="#" class="add-list-id__form">
        {{> form-row
            required=true
            clearInput=true
            id="project-id"
            placeholder="Enter a valid project list ID"
        }}
        <button class="btn btn-primary btn--add-to-basket" type="submit">Add to basket</button>
      </form>
    </div>
  </div>
</main>
{{/content}}
{{#content "foot" mode="append"}}
{{> checkout-voucher-remove-modal
    shopping-cart-v2.checkout.voucher-remove-popup
    id="voucher-remove-popup"
}}
<script defer src="./js/global-search.min.js"></script>
<script defer src="./js/page/basket.js"></script>
<script defer src="./js/add-project-list-id.min.js"></script>
{{> click-and-collect-modal }}
{{/content}}
{{/extend}}