{% set accordionitems = accordionitems|default([
    {
      "title": "Cement sheeting",
      "content": "<div class='nsw-wysiwyg-content'><p>Asbestos cement sheeting was widely used from the 1950s to the late 1980s, so is frequently found when renovating older buildings. Flat-sheet fibro is the most common asbestos cement sheeting. It was simply nailed to a wooden-framed structure, making construction quick and cheap, and could be painted.</div>"
    },
    {
      "title": "Cement",
      "content": "<div class='nsw-wysiwyg-content'><p>Asbestos cement sheeting was widely used from the 1950s to the late 1980s, so is frequently found when renovating older buildings. Flat-sheet fibro is the most common asbestos cement sheeting. It was simply nailed to a wooden-framed structure, making construction quick and cheap, and could be painted.</div>"
    },
    {
      "title": "Kitchen",
      "content": "<div class='nsw-wysiwyg-content'><p>Asbestos cement sheeting was widely used from the 1950s to the late 1980s, so is frequently found when renovating older buildings. Flat-sheet fibro is the most common asbestos cement sheeting. It was simply nailed to a wooden-framed structure, making construction quick and cheap, and could be painted.</div>"
    }
  ]) 
%}

<div class="">
    {% for item in  accordionitems %}
    <div class="nsw-accordion js-accordion">
      <h2 class="nsw-accordion__title">{{item.title}}</h2>
      <div class="nsw-accordion__content">
        {{item.content}}
      </div>
     </div>
    {% endfor %}
</div>

{% set data = data|default({
  "theme": "dark",
  "heading": "How to identify asbestos",
  "copy": "Find out what products might contain asbestos and where they are commonly located.",
  "imgAlt":"image alt",
  "img": {
    "original": "https://picsum.photos/id/421/2000/1250",
    "small": "https://picsum.photos/id/421/768/480",
    "medium": "https://picsum.photos/id/421/300/200",
    "large": "https://picsum.photos/id/421/2000/1250"
  },
  "linkUrl":"",
  "svgUrl":"."
}) %}
<div class="nsw-hero-banner nsw-hero-banner--{{data.theme}}">
  <div class="nsw-container">
    <div class="nsw-hero-banner__image-area">
      <img src="{{data.img.original}}" class="nsw-hero-banner__image" alt="{{data.imgAlt}}">
    </div>
    <div class="nsw-hero-banner__content-area">
      <div class="nsw-hero-banner__content">
        <h2 class="nsw-hero-banner__title">
          <a href="{{data.linkUrl}}" class="nsw-hero-banner__link">{{data.heading}}</a>
        </h2>
        <p>{{data.copy}}</p>
        <div class="nsw-icon nsw-hero-banner__icon"> 
          {% if data.theme == 'dark' %}
            <img src="{{data.svgUrl}}/images/arrow-white.svg" class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          {% else %}
              <img src="{{data.svgUrl}}/images/arrow-blue.svg" class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          {% endif %}
        </div>
        
      </div>
    </div>
  </div>
</div>

{% set data = data|default({
    "label":"Asbestos",
    "content":"It is strongly recommended that you use a licenced asbestos removalist to remove asbestos to ensure the safety of you and others. Removalists know what to do and how to keep you and others safe from the health risks involved. Tips on choosing a good removalist are here",
    "modifier_class": "title"
}) %}

<div class="nsw-block {{data.modifier_class}}">
  {% if data.label %}
    <h2 class="text-left">{{ data.label }}</h2>
  {% endif %}
  {% if data.headingContent %}
    <h3 class="text-left">{{ data.headingContent }}</h3>
  {% endif %}
  {% block content %}
  <div class="{{data.content_modifier_class}}">
      <p class="nsw-block__content">{{ data.content }} </p>
  </div>
  {% endblock %}
</div>

{% set data = data|default({
  "heading": "We strongly recommend you use a licensed asbestos accessor or removalist",
  "copy": "This Asbestos Finder contains general information and your building might contain asbestos not described here.",
  "svgUrl":"."
}) 
%}

<div class="nsw-callout {{data.modifier_class}}">
  {% if data.icon %}
  <img src="{{data.svgUrl}}/images/{{data.icon}}.svg" class="nsw-icon nsw-callout__icon blue-icon-contrast" focusable="false" aria-hidden="true">
    {% endif %}
  <div class="nsw-callout__content">
    {% if data.heading %}
      <h4 class="nsw-callout__title">{{data.heading}}</h4>
    {% endif %}
    {% if data.copy %}
      <p>{{data.copy}}</p>
    {% endif %}
    {% if data.link %}<a href="{{data.link.href}}" class="nsw-text-link">{{data.link.text}}</a>{% endif %}
  </div>
</div>

{% set data = data|default({
  "svgUrl":"."
}) 
%}
<div class="nsw-container">
  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text ">
      Back <span class="sr-only">of page</span>
    </span>
      <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-180">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text ">
      Bottom <span class="sr-only">of page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-90">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text">
      Top <span class="sr-only">of page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-270">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text">
      Next <span class="sr-only">page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon">
  </a>
</div>

{% set data = data|default({
  "svgUrl":"."
}) 
%}
<div  class="feedback-container mt-5">
  <div class="thumbs">
  <div class="thumbs-container  nsw-container">
    <div class="thumbs-block">
        <p class="thumbs__description font-weight-bold mr-4 mb-0">Was the page helpful?</p>
        <div>
            <button title="Thumbs Up" class="rounded mr-2" role="button">
            <img src="{{data.svgUrl}}/images/thumb_up.svg" class="nsw-icon">
            </button>
            <button title="Thumbs Down" class="rounded ml-2" role="button">
                <img src="{{data.svgUrl}}/images/thumb_down.svg" class="nsw-icon">
            </button>
        </div>
    </div>
  </div>
</div>
</div>

{% set data = data|default({
  "title": "On this page",
  "pageSections": [
    {
      "text": "Section 1",
      "anchor": "#id1"
    },
    {
      "text": "Section 2",
      "anchor": "#id2"
    },
    {
      "text": "Section 3",
      "anchor": "#id3"
    },
    {
      "text": "Section 4",
      "anchor": "#id4"
    }
  ]
}) %}

<nav class="nsw-page-nav" aria-labelledby="in-page-nav">
  <h5 id="in-page-nav" class="nsw-page-nav__title">{{data.title}}</h5>
  <ul class="nsw-page-nav__list">
    {% for item in data.pageSections %}
      <li class="nsw-page-nav__list-item">
        <a href="{{item.anchor}}" class="nsw-page-nav__link">{{item.text}}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

{% set item = item|default({
      "text": "How to safely manage",
      "url": "#",
      "svgUrl":"."
    }) %}

<li class="nsw-link-list__item mt-0" >
    {% if item.moreDetail %}
        <span class="nsw-link-list__link">
          <span class="information-text">{{item.text}} </span>
          <span class="nsw-link-list__information">{{item.moreDetail}}</span>
        </span>
    {% else %}
        <a class="nsw-link-list__link" href="{{item.url}}">{{item.text}}
          <img src="{{item.svgUrl}}/images/arrow-blue.svg" class="nsw-icon nsw-card__icon">
        </a>
    {% endif %}
</li>

{% set data = data|default({
      "heading": "Find your nearest disposal location",
      "copy": "Understand what you can and can't take before you visit the disposal facility"
    }) 
%}

<div class="location-search-container">
  <div class="nsw-container p-0">
  <div class=" location-search row">
    <div class="location-search__content  col-12 col-md-6">
        <h2 class="location-search__title">
          <a href="#" class="location-search__link">{{data.heading}}</a>
        </h2>
        {% if data.copy %}<p class="location-search__copy">{{data.copy}}</p>{% endif %}
    </div>
    <div class="location-search__form col-12 col-md-6">
          {% include '@asbestos/components/form/input.twig'  with { 
            "inputData" : {
                    label: "Postcode",
                    id:  "postcode",
                    modifier_class:  "w-50 mr-2"
                }
        } %}
          {% include '@asbestos/components/buttons/primary-button.twig'  with { 
                  label: "Search",
                  modifier_class:  "w-50 ml-2"
        } %}
    </div>
</div>
</div>
</div>

{% set item = item|default({
  "parentText": "Asbestos",
  "parentUrl": "#",
  "parentId": "id",
  "navitems": [
    {
      "text": "Level 2",
      "url": "#",
      "currentPage": false
    },
    {
      "text": "Level 2",
      "url": "#",
      "currentPage": false
    },
    {
      "text": "Level 2",
      "url": "#",
      "currentPage": false,
      "navitems": [
        {
          "text": "Level 3",
          "url": "#",
          "currentPage": true
        },
        {
          "text": "Level 3",
          "url": "#",
          "currentPage": false
        },
        {
          "text": "Level 3",
          "url": "#",
          "currentPage": false
        }
      ]
    },
    {
      "text": "Level 2",
      "url": "#",
      "currentPage": false
    },
    {
      "text": "Level 2",
      "url": "#",
      "currentPage": false
    }
  ]
}
) %}

<nav class="nsw-sidenav" aria-labelledby="{{item.parentId}} side navigation">
  <div class="nsw-sidenav__header">
    <h2 id="{{item.parentId}}" class="nsw-sidenav__heading">
      <a href="{{item.parentUrl}}" class="nsw-sidenav__heading-link">{{item.parentText}}</a></h2>
  </div>
  <ul class="nsw-sidenav__list nsw-sidenav__list--level-1 m-0 p-0">
    {% for data in item.navitems %}
      <li class="nsw-sidenav__list-item mt-0 {% if data.navitems %} has-active-children {% endif %}">
        <a href="{{data.url}}" class="nsw-sidenav__link {% if data.currentPage %} is-current {% endif %}">
          {{data.text}}
        </a>
        {% if data.navitems %}
        <ul class="nsw-sidenav__list nsw-sidenav__list--level-2 m-0 p-0">
          {% for children in data.navitems %}
            <li class="nsw-sidenav__list-item mt-0 {% if children.navitems %} has-active-children {% endif %}">
              <a href="{{children.url}}" class="nsw-sidenav__link {% if children.currentPage %} is-current {% endif %}">
                {{children.text}}
              </a>
              {% if children.navitems %}
              <ul class="nsw-sidenav__list nsw-sidenav__list--level-3 m-0 p-0">
                {% for innerChildren in children.navitems %}
                  <li class="nsw-sidenav__list-item mt-0 {% if innerChildren.navitems %} has-active-children {% endif %}">
                    <a href="{{innerChildren.url}}" class="nsw-sidenav__link {% if innerChildren.currentPage %} is-current {% endif %}">
                      {{innerChildren.text}}
                    </a>
                  </li>
                {% endfor %}
              </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

{% set data = data|default({
      "theme": "",
      "heading": "For councils",
      "copy": "Here you will find specific information including forms, procedures and asbestos campaign materials",
      "date": {
        "machine":"2019-03-30",
        "human":" 3 March 2020"
      },
      "modifier_class":"col-12 col-md-6 px-0",
      "img": {
        "left":"./images/hompage-50-2.png"
      },
      "linkUrl":"",
      "rowModifierClass":"",
      "svgUrl":"."
    }) 
%}
<div class="small-teaser {{data.modifier_class}}">
  <div class="row m-0 h-100 {{data.rowModifierClass}}">
   {% if data.img.left %}
        <div class="small-teaser__image-area col-12 col-md-6 px-0">
            <img src="{{data.img.left}}" alt="{{data.imgAlt}}" class="small-teaser__image">
          </div>
        {% endif %}
    <div class="small-teaser__content col-md-6 col-12">
        <h2 class="small-teaser__title">
          <a href="{{data.linkUrl}}" class="small-teaser__link">{{data.heading}}</a>
        </h2>
        {% if data.tag %}
        <p class="small-teaser__tag">{{data.tag}}</p>
        {% endif %}
        {% if data.date %}
        <p class="small-teaser__date">
          <time datetime="{{data.date.machine}}">{{data.date.human}}</time>
        </p>
        {% endif %}
        {% if data.copy %}<div class="small-teaser__copy">{{data.copy}}</div>{% endif %}
        <img src="{{data.svgUrl}}/images/arrow-blue.svg" class="nsw-card__copy nsw-icon nsw-card__icon">
    </div>
  </div>
</div>

{% set data = data|default({
      "theme": "",
      "heading": "Plumbing and drainage",
      "copy": "17 different materials contain asbestos",
      "date": {
        "machine":"2019-03-30",
        "human":" 3 March 2020"
      },
      "linkUrl":"",
      "svgUrl":"."
    }) 
%}
<div class="nsw-card nsw-card--{{data.theme}}">
    <div class="nsw-card__content">
        <h2 class="nsw-card__title">
          <a href="{{data.linkUrl}}" class="nsw-card__link {{data.titleModifierClass}}">{{data.heading}}</a>
        </h2>
        {% if data.tag %}
        <p class="nsw-card__tag">{{data.tag}}</p>
        {% endif %}
        {% if data.date %}
        <p class="nsw-card__date">
          <time datetime="{{data.date.machine}}">{{data.date.human}}</time>
        </p>
        {% endif %}
        {% if data.copy %}<div class="nsw-card__copy">{{data.copy}}</div>{% endif %}
        <img src="{{data.svgUrl}}/images/arrow-blue.svg" alt="" class="nsw-card__copy nsw-icon nsw-card__icon">
    </div>
    {% if data.img %}
    <div class="nsw-card__image-area">
        <img src="{{data.img}}" alt="{{data.imgAlt}}" class="nsw-card__image">
    </div>
    {% endif %}
</div>

{% set item = item|default({
      "caption": "Step 1: Planning",
      "isCompleted": false,
      "isActive":false
    }) %}
<a class="text-decoration-none steppers  {{item.isCompleted ? 'completed' : 'incomplete' }} " href="{{item.url}}">
  <div>
    <span class="step-caption d-none d-md-block">{{ item.caption }}</span>
    <div class="step mt-2"></div>
  </div>
</a>

{% set data = data|default({
  "striped": true,
  "caption": "Table caption for responsive scroll version",
  "svgUrl":"."
}) 
%}
<div class="nsw-table-responsive" role="region" aria-labelledby="caption1" tabindex="0">
  <table class="nsw-table {% if data.captionTop %} nsw-table--caption-top {% endif %} {% if data.striped %} nsw-table--striped {% endif %} {% if data.bordered %} nsw-table--bordered {% endif %}">
    <caption id="caption1">{{data.caption}}</caption>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th >Three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Donec velit neque, auctor sit amet aliquam</td>
        <td>Vestibulum ante ipsum primis</td>
        <td>Praesent sapien massa</td>
      </tr>
      <tr>
        <td>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</td>
        <td>convallis a pellentesque nec</td>
        <td>egestas non nisi</td>
      </tr>
      <tr>
        <td>Quisque velit nisi, pretium ut lacinia</td>
        <td>elementum id enim</td>
        <td>Donec velit neque, auctor sit amet aliquam</td>
      </tr>
      <tr>
        <td>Vestibulum ante ipsum primis</td>
        <td>Praesent sapien massa</td>
        <td>Vestibulum ante ipsum primis</td>
      </tr>
    </tbody>
  </table>
</div>

{% set label = label|default("Checbox tag") %}
{% set id = id|default("#tag") %}
<div class="nsw-tag nsw-tag--checkbox">
  <input type="checkbox" id="{{id}}" name="{{label}}">
  <label for="{{id}}">{{label}}</label>
</div>

{% set label = label|default("Link Tag") %}
{% set url = url|default("#") %}
<a href="{{url}}" class="nsw-tag">{{label}}</a>

{% set label = label|default("Text Tag") %}
<span class="nsw-tag">{{label}}</span>

{% set data = data|default({
      "copy": "Before starting any work involving asbestos materials, make sure you prepare a plan.  Once you start work you risk contamination.",
      "src": "./images/health-risk-1.png",
      "buttonLabel": "What to prepare",
      "isVideo":false
    }) 
%}
<div class="video-teaser" id="{{data.id}}">
  {% if data.heading %}
      <h3 class="mb-3 font-weight-bold text-center text-md-left">{{data.heading}}</h3>
  {% endif %}
  <div class="row m-md-0">
      <div class="col-md-4 col-12 px-0 pr-md-4 pb-3">
          {% if data.isVideo %}
                <div class="embed-responsive embed-responsive-4by3">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oenxVnRznwU" allowfullscreen></iframe>
                </div>             
            {% else %}
                <img src="{{data.src}}" alt="{{data.imgAlt}}" class="video-teaser__image">
            {% endif %}
        </div>
      <div class="video-teaser__content mt-2 mt-md-0 col-md-8 col-12">
            {% if data.copy %}<div class="video-teaser__copy">{{data.copy}}</div>{% endif %}
            {% include '@asbestos/components/buttons/outline-button.twig'  with { 
                  label: data.buttonLabel,
                  modifier_class:  data.buttonModifierClass
              } %}
        </div>
  </div>
</div>

{% set data = data|default({
      "heading": "Plumbing and drainage",
      "copy": "17 different materials contain asbestos",
      "date": {
        "machine":"2019-03-30",
        "human":" 3 March 2020"
      },
      "linkUrl":"",
      "modifier_class":""
    }) 
%}
<div class="search-teaser {{data.modifier_class}}">
    <div class="search-teaser__content">
        <h3 class="search-teaser__title">
          <a href="{{data.linkUrl}}" class="search-teaser__link {{data.titleModifierClass}}">{{data.heading}}</a>
        </h3>
        {% if data.linkUrl %}
        <p class="search-teaser__linkUrl">{{data.linkUrl}}</p>
        {% endif %}
        {% if data.date %}
        <p class="search-teaser__date">
          <time datetime="{{data.date.machine}}">{{data.date.human}}</time>
        </p>
        {% endif %}
        {% if data.copy %}<div class="search-teaser__copy">{{data.copy}}</div>{% endif %}
    </div>
</div>

{% set data = data|default({
      "copy": "Before starting any work involving asbestos materials, make sure you prepare a plan.  Once you start work you risk contamination.",
      "src": "https://www.youtube.com/embed/oenxVnRznwU",
      "modifier_class":"",
      "isVideo":true,
      "moreDetailUrl":"#"
    }) 
%}
<div class="video-teaser {{data.modifier_class}}" id="{{data.id}}">
  {% if data.heading %}
      <h2 class="mb-3 font-weight-bold text-center text-md-left">{{data.heading}}</h2>
  {% endif %}
  <div class="row m-md-0">
      <div class="col-md-4 col-12 px-0 pr-md-4 pb-3">
          {% if data.isVideo %}
                <div class="embed-responsive embed-responsive-4by3">
                  <iframe class="embed-responsive-item" src="{{data.src}}" allowfullscreen></iframe>
                </div>             
            {% else %}
                <img src="{{data.src}}" alt="{{data.imgAlt}}" class="video-teaser__image">
            {% endif %}
        </div>
      <div class="video-teaser__content mt-2 mt-md-0 col-md-8 col-12">
            {% if data.copy %}<div class="video-teaser__copy">{{data.copy}}</div>{% endif %}
            {% if data.buttonLabel %}
                {% include '@asbestos/components/buttons/outline-button.twig'  with { 
                      label: data.buttonLabel,
                      modifier_class:  data.buttonModifierClass,
                      url: data.moreDetailUrl
                  } %}
          {% endif %}
        </div>
  </div>
</div>

{% set data = data|default({
      "theme": "",
      "heading": "Ut placet inquam tum dicere exorsus est laborum et inter",
      "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expexrt",
      "img": "./images/health-risk-1.png",
      "contentModifierClass": "col-12 col-md-6 align-self-center ",
      "imageModifierClass": "col-12 col-md-6",
      "rowModifierClass":"m-0",
      "linkUrl":"",
      "svgUrl":".",
      "titleModifierClass":"mb-4"
    }) 
%}

<div class="large-teaser">
  <div class="{{data.modifier_class}}">
    <div class="row {{data.rowModifierClass}}">
        <div class="large-teaser__content {{data.contentModifierClass}} order-2 order-md-first ">
            {% if data.isMoreDetail %}
              <h3 class="{{data.titleModifierClass}}">
                <a href="{{data.linkUrl}}" class="large-teaser__link">{{data.heading}}</a>
              </h3>      
            {% else %}
              <h2 class="large-teaser__title {{data.titleModifierClass}}">
                <a href="{{data.linkUrl}}" class="large-teaser__link">{{data.heading}}</a>
              </h2>
            {% endif %}
            {% if data.tag %}
            <p class="large-teaser__tag">{{data.tag}}</p>
            {% endif %}
            {% if data.copy %}<div class="large-teaser__copy">{{data.copy}}</div>{% endif %}
            {% if data.isMoreDetail %}
                {% include '@asbestos/components/buttons/outline-button.twig'  with { 
                            label: "More details",
                            modifier_class:  "col-12 col-md-4 sticky-bottom",
                            url: data.moreDetailLink
                } %}              
            {% else %}
            <div class="mt-4">
              <img src="{{data.svgUrl}}/images/arrow-blue.svg" alt="" class="large-teaser__copy nsw-icon large-teaser__icon">
            </div>
            {% endif %}
        </div>
        
          {% if data.img and not isVideo %}
            <div class="large-teaser__image-area px-0 pb-3 pb-md-0 {{data.imageModifierClass}} ">
                <img src="{{data.img}}" alt="{{data.imgAlt}}" class="large-teaser__image">
                {% if data.imgTotal %}
                  <p class="large-teaser__image__area-total mt-2 ml-3 ml-md-0"> 1 of {{data.imgTotal }} images</p>
                {% endif %}
            </div>
            {% elseif data.isVideo%}
             <div class="large-teaser__image-area p-0 {{data.imageModifierClass}} ">
              <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="{{data.src}}" allowfullscreen></iframe>
                  </div>
                  </div>
          {% endif %}
            
        </div>
</div>
</div>

{% set data = data|default({
      "theme": "",
      "heading": "For councils",
      "copy": "Here you will find specific information including forms, procedures and asbestos campaign materials",
      "modifier_class":"",
      "src": "https://www.youtube.com/embed/oenxVnRznwU",
    }) 
%}
<div class="video-teaser-caption {{data.modifier_class}}">
  <div class="row">
    <div class="col-md-6 col-12">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="{{data.src}}" allowfullscreen></iframe>
        </div>
    </div>
    <div class="video-teaser-caption__content col-md-6 col-12">
        <h2 class="video-teaser-caption__title">
          <a href="{{data.linkUrl}}" class="video-teaser-caption__link">{{data.heading}}</a>
        </h2>
        {% if data.copy %}<div class="video-teaser-caption__copy">{{data.copy}}</div>{% endif %}
    </div>
  </div>
</div>