{% set svgUrl= svgUrl|default('.') %}
{% set searchResult = searchResult|default([{
      "heading": "Plumbing and drainage",
      "copy": "17 different materials contain asbestos",
      "date": {
        "machine":"2019-03-30",
        "human":" 3 March 2020"
      },
      "linkUrl":"http://result.com"
    },{
      "heading": "Plumbing",
      "copy": "7 different materials contain asbestos",
      "date": {
        "machine":"2019-03-22",
        "human":" 22 March 2020"
      },
      "linkUrl":"http://result.com"
    },{
      "heading": "Drainage",
      "copy": "27 different materials contain asbestos",
      "date": {
        "machine":"2019-03-30",
        "human":" 3 March 2020"
      },
      "linkUrl":"http://result.com"
    }]) 
%}

{% set category= category|default([
          {
            "text": "Home"
          },
          {
            "text": "Search"
          }
      ]) %}

<div class="">
    {% include '@asbestos/components/header/header.twig' %}
    {% include '@asbestos/components/navigation/nav-main.twig' %}
    {% include '@asbestos/components/navigation/breadcrumbs.twig' with {
      breadcrumb : [
          {
            "text": "Home",
            "url": "#"
          },
          {
            "text": "Search",
            "url": "#"
          }
      ]
      
    } %}
  <main>
      
    <div class="nsw-wysiwyg-content nsw-container p-0 mt-4">
        <h1 class="col-12"> Search </h1>
    </div>
    <div class="nsw-wysiwyg-content nsw-container p-0 mt-4">
        <div class="row mx-0">
          <div class="col-12">
              <form role="search" class="hero-search__form">
                <div class="nsw-form-search justify-content-center">
                  <label for="hero-search-input" class="sr-only">Search</label>
                  <input autocomplete="off" class="nsw-form-search__input p-4" id="hero-search-input" name="hero-search" type="text">
                  <button class="nsw-form-search__submit bg-white" type="submit">
                    <img src="{{svgUrl}}/images/search.svg">
                    <span class="sr-only">Search</span>
                  </button>
                </div>
              </form>
              <h2> Search results for ‘asbestos’ </h2>
              <p>Showing results 1 - 10 of 1260 results</p>
          </div>
      </div>
    </div>
    <div class="nsw-wysiwyg-content nsw-container mt-4 p-0">
      <div class="row mx-0">
        <div class="category col-12 col-md-4">
          <span class="category__heading category__accordian" data-toggle="collapse" data-target="#select-category" aria-expanded="false" aria-controls="select-category">
            <span class="category__title">Select category</span>
            <img src="{{svgUrl}}/images/chevron-blue.svg">
          </span>
          <nav role="navigation" class="category__navigation">
            <ul class="category__list collapse list-style-none pl-0"  aria-labelledby="select-category" id="select-category">
              {% for catg in category %}
                <li class="category__item  d-flex justify-content-between align-items-center mt-2">
                  {% include '@asbestos/components/form/checkbox.twig' with {
                  "checkboxData": {
                        "name":catg.text,
                        "id":catg.text,
                        "label":catg.text 
                   }
                  } %}
                </li>
              {% endfor %}
            </ul>
          </nav>
        </div>
        <div class="col-12  col-md-8 search-container">
          {% for item in searchResult %}
              {% include '@asbestos/components/teasers/teaser-search.twig' with {
                  "data": item
                  } %}
          {% endfor %}
        </div>
      </div>
    </div>
  </main>
  <div class="mt-3">
    {% include '@asbestos/components/navigation/pagination.twig' %} 
  </div>
  <div class="">
    {% include '@asbestos/components/footer/footer.twig' %}
  </div>
</div>