{{#extend "base" hybrisClass="hybris-class" pageClass="page_kitchen-claims" title="Kitchen Claims"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_kitchen-claims.css">
{{/content}}
{{#content "body"}}
<main class="container">
  <div class="page-header">
    <h1>Showroom Kitchen and Bathroom Product Guarantee Claims</h1>
  </div>
  <div class="page-content">
    <form action="#" class="form-claim">
      <div class="form-claim__descr">
        <div class="form-claim__header-info">
          <p>To make a guarantee claim for a Showroom product, please complete and submit this form.</p>
          <p>Your claim will be assessed and our Customer Services team will respond to you.</p>
          <p>Any information provided on this form will only be used in conjunction with your claim.</p>
        </div>
        <h3>Here's the really important bit</h3>
        <p>If you have a gas leak, an electrical safety concern or a water leak, then please take immediate
          action and contact;</p>
        <p>For a suspected <strong>gas</strong> leak, contact National Grid on
          <a href="tel:0800-111-999" class="form-claim__descr__tel">
            0800 111 999</a>, do this as soon as you can, their emergency line is available 24 hrs a day.</p>
        <p>If you have any concerns about the safety of your <strong>electrics</strong> please contact a
          local electrician.</p>
        <p>If you have any immediate concerns arising from a <strong>water</strong> leak, please contact a local
          plumber.</p>
      </div>
      <div class="form-claim__info-client">
        <div class="form-claim__descr">
          <h3>About you</h3>
          <div class="warning-required">Required fields</div>
        </div>
        {{> form-row id="first-name"
        label="First name"
        required="true"}}
        {{> form-row id="surname"
        label="Last name"
        required="true"}}
        {{> form-row id="postcode"
        label="Delivery address postcode"
        required="true"}}
        {{> form-row id="tel"
        label="Telephone number"
        required="true"}}
        {{> form-row id="email"
        label="Email"
        required="true"}}
      </div>
      <div class="form-claim__info-claim">
        <div class="form-claim__descr">
          <h3>About your claim</h3>
        </div>
        {{> form-row id="order"
        label="Order number"
        required="true"
        placeholder="E.g.: 123456-8000-V"
        row-mod="form-claim__order-num"}}
        <div class="form-row" role="radiogroup" data-row-required>
          <label class="form-row__label form-row__label_required">This claim relates to which type of order?</label>
          <div class="form-row__field">
            {{> radiobutton label="Kitchen"
            name="radio-order"
            id="radio-kitchen"
            checked=false
            value="card"}}

            {{> radiobutton label="Bathroom"
            name="radio-order"
            id="radio-bathroom"
            checked=false
            value="card"}}
          </div>
        </div>
        <div class="form-row" role="radiogroup" data-row-required>
          <label class="form-row__label form-row__label_required">Did Wickes install your kitchen or bathroom?</label>
          <div class="form-row__field">
            {{> radiobutton label="Yes"
            name="radio-choice"
            id="radio-yes"
            checked=false
            value="card"}}

            {{> radiobutton label="No"
            name="radio-choice"
            id="radio-no"
            checked=false
            value="card"}}
          </div>
        </div>
        <div class="form-row" role="radiogroup" data-row-required>
          <label class="form-row__label form-row__label_required">What is the product problem?</label>
          <div class="form-row__field">
            {{> radiobutton label="Faulty product"
            name="radio-problem"
            id="radio-faulty"
            checked=false
            value="card"}}

            {{> radiobutton label="Damaged product"
            name="radio-problem"
            id="radio-damage"
            checked=false
            value="card"}}
          </div>
        </div>
        {{> form-row textarea="true"
        id="select-address-top"
        label="Please include faulty or damaged product name and if you have it, the product reference number"
        required="true"
        textareaRows="4"}}

        {{> form-row textarea="true"
        id="select-address-top"
        label="Please explain how the fault or damage occured"
        required="true"
        textareaRows="4"}}

        {{> form-row textarea="true"
        id="select-address-top"
        label="When did it occur or when did you first notice this issue?"
        required="true"
        textareaRows="4"}}

        <div class="form-row">
          <label class="form-row__label form-row__label_required">Photographic evidence</label>
          <div class="form-row__field">
            <p>To support your claim, please attach photos that clearly show the fault or damage</p>
            <p>Please include the product reference usually found on the packing or on the product if kitchen appliances
              or worktops</p>
            <p>These images will be used to help us deal with your claim, therefore it is important to include
              at least one close up and one from a wider view.</p>
            <div class="form-claim__photo-wrapper">
              <img src="https://st2.depositphotos.com/1970689/5892/i/450/depositphotos_58921065-stock-photo-leak-and-ruin-valve.jpg"
                   alt="small-pic"
                   class="form-claim__photo">
              <span class="form-claim__photo-link">
                      <a href="#" data-toggle="modal" data-target="#modal-img">Photo_of_faulty_product.jpeg</a>
                    </span>
              <span class="icon form-claim__photo-close">
                      <i class="far fa-times"></i>
                    </span>
            </div>
            <p class="form-claim__photo-add">
              <i class="fas fa-plus"></i>
              <input type="file">
              <span class="form-claim__photo-upload-link">Add photo</span>
            </p>
          </div>
        </div>
      </div>
      <div class="form-row form-row__action form-row__action_custom">
        <div class="form-row__field error-field">
          {{> notifications notification-page.error}}
        </div>
        <div class="form-row__field">
          <div class="form-row__col-btn">
            <button class="btn btn-primary btn_full">
              <span class="btn__text">Submit</span>
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</main>
{{/content}}
{{/extend}}
{{> img-modal}}