{% set data = data|default({
  "title": "Search asbestos products",
  "svgUrl":".",
  "copy": "<p>Use the keyword search or dropdowns to search for products that may contain asbestos.</p>",
  "searchLabel": "Search site for:",
  "suggestSearches": [
    {
      "text": "Cement",
      "url": "#"
    },
    {
      "text": "Kitchen",
      "url": "#"
    },
    {
      "text": "Cement sheeting",
      "url": "#"
    },
    {
      "text": "Fibro",
      "url": "#"
    },
    {
      "text": "Roofs",
      "url": "#"
    }
  ]
}) %}
<div class="hero-search">
  <div class="hero-search__content nsw-body-content">
      <h1 class="hero-search__title">{{data.title}}</h1>
      {{data.copy}}
      <form role="search" class="hero-search__form">
        <div class="nsw-form-search justify-content-center">
          <label for="hero-search-input" class="sr-only">{{data.searchLabel}}</label>
          <input autocomplete="off" class="nsw-form-search__input col-md-6" id="hero-search-input" name="hero-search" type="text">
          <button class="nsw-form-search__submit" type="submit">
            <img src="{{data.svgUrl}}/images/search.svg">
            <span class="sr-only">Search</span>
          </button>
        </div>
      </form>
      <div class="hero-search__suggested">
        <p class="m-0">Most popular searches</p>
        <ul>
          {% for item in data.suggestSearches %}
            <li><a href="{{item.url}}">{{item.text}}</a></li>
          {% endfor %}
        </ul>
      </div>
  </div>
</div>