{{#extend "base" hybrisClass="hybris-class" hideBreadcrumbs=true pageClass="page_track_your_order" title="Track your order"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_track_your_order.css">
<link type="text/css" rel="stylesheet" href="./css/pages/new-usp-bar.css">

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->

{{/content}}
{{#content "body"}}

{{> new-usp-container}}
<div class="container container--track-your-order order-tracking">
    <h2 class="heading-1">Order tracking</h2>
    <p>With our handy order tracking tool you can see:</p>
    <ul>
        <li>The date your order will be delivered</li>
        <li>Who will be delivering your order</li>
        <li>Where each part of your order will be delivered from</li>
        <li>When your Click &amp; Collect order is ready to collect from your local store</li>
    </ul>
    <p>We're unable to offer live order tracking just yet, but we will send you a text the day before your delivery with further details on when you can expect your order to arrive.</p>
    <p>If you wish to track the status of your showroom kitchen or bathroom order, please complete our <a href="/contactus">contact form.</a></p>
    <p>&nbsp;</p>
</div>
<main class="container container--track-your-order component">
  <div class="page-header">
    <h1>Track your order</h1>
    <p>Simply complete your details below to track the status of your order, with or without an account.</p>
  </div>
  <div class="page-content">
    <form action="#" class="form-track-order">
        <div class="form-row  form-claim__order-num" data-row-required="" data-message="Please enter a valid order number">
            <label class="form-row__label form-row__label_required " for="order">Order number:</label>
            <span class="icon icon-info-component icon-info" data-toggle="tooltip" data-placement="right" title="Your order number can be found on your order confirmation email and is 9 digits long">
                <i class="fas fa-info-circle"></i>
            </span>
            <div class="form-row__field">
                <input type="number" class="tbx" id="order" minlength="9" name="order">
            </div>
        </div>

        <label class="form-row__label">and either</label>

        <div class="form-row  form-claim__order-num" data-row-required="" data-message="Please enter the phone number you provided when you placed your order">
            <label class="form-row__label form-row__label_required " for="tel">Phone number:</label>
            <div class="form-row__field">
                <input type="tel" class="tbx " value="" id="tel" name="tel">
            </div>
        </div>

        <label class="form-row__label">or</label>

        <div class="form-row  form-claim__order-num" data-row-required="" data-message="Please enter the email address you provided when you placed your order">
            <label class="form-row__label form-row__label_required " for="email">Email address:</label>
            <div class="form-row__field">
                <input type="text" class="tbx " value="" id="email" name="email">
            </div>
        </div>

        <label class="form-row__label">or</label>

        <div class="form-row" data-row-required="" data-message="Please enter the billing postcode you provided when you placed your order">
            <label class="form-row__label form-row__label_required " for="postcode">Billing postcode:</label>
            <div class="form-row__field">
                <input type="text" class="tbx " value="" id="postcode" name="postcode" placeholder="">
            </div>
        </div>

        <div class="form-row form-row__action form-row__action_custom">
            <div class="form-row__field">
              <button class="btn btn-primary btn_full">
                <span class="btn__text">Track my order</span>
              </button>
            </div>
        </div>
    </form>
  </div>
</main>
{{/content}}
{{/extend}}

<script>
    $(document).ready(function() {
        $('.icon-info-component').tooltip('show');
    });
</script>
