{% set data = data|default({
  "content": "<p>Due to recent outbreak of COVID19, lockdowns have been in place in some areas.</p>"
}) %}

<div class="nsw-sitewide-message nsw-sitewide-message--{{data.type}} js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      {{data.content}}
    </div>
  </div>
</div>

{% set data = data|default({
  "svgUrl":"."
}) 
%}
<div class="nsw-infobar">
  <div class="nsw-container d-flex justify-content-end align-items-center">
      <p class="rounded bg-white">
        <select id="changeLanguage" class="nsw-form-select py-2"  aria-describedby="changeLanguage-helper-text changeLanguage-error-text">
          <option value="">English</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
      </p>
  </div>
</div>
<header class="nsw-header">
  <div class="nsw-header__container pl-md-0">
    <div class="nsw-header__wrapper d-flex justify-content-between align-items-center">
      <div class="nsw-header__left d-block d-md-none">
        <button type="button" class="nsw-header-btn nsw-header-btn--menu js-open-navigation" aria-expanded="false" aria-controls="main-navigation">
          <img src="{{data.svgUrl}}/images/menu.svg" class="nsw-icon nsw-header-btn__icon">
          <span class="nsw-header-btn__sub"><span class="sr-only">Open</span> Menu</span>
        </button>
      </div>
      <div class="d-flex justify-content-center align-items-center py-5 px-2">
        <a href="" class="nsw-header__logo-link">
          <img src="{{data.svgUrl}}/images/nsw_gov_logo.svg" class="nsw-header__logo">
          <span class="sr-only">Asbestos NSW Logo</span>
          <span class="nsw-header-button ml-3 mx-md-3">Asbestos in NSW</span>
        </a>
      </div>
      <div class="d-flex justify-content-center align-items-center">
        <button type="button" class="nsw-header-btn nsw-header-btn--search js-open-search" aria-expanded="false"
          aria-controls="header-search">
          <img src="{{data.svgUrl}}/images/search.svg" class="nsw-header-btn__icon">
          <span class="nsw-header-btn__sub"><span class="sr-only">Show</span> Search</span>
        </button>
      </div>
    </div>
    <div class="nsw-search">
      <div id="header-search" class="nsw-search__area js-search-area" hidden>
        <form role="search">
          <label for="nsw-search__input" class="sr-only">Search site for:</label>
          <input autocomplete="off" class="nsw-search__input js-search-input" id="nsw-search__input"
            name="input-autocomplete" type="text">
        </form>
        <span></span>
        <button class="nsw-search__close-btn js-close-search" aria-expanded="true" aria-controls="header-search">
          <img src="{{data.svgUrl}}/images/close.svg" class="nsw-search__close-icon">
          <span class="sr-only">Close search</span>
        </button>
      </div>
    </div>
    </div>
</header>

{% set breadcrumb = breadcrumb|default([
    {
      "text": "Home",
      "url": "#"
    },
    {
      "text": "Asbestos Finder",
      "url": "#"
    },
    {
      "text": "Cement Sheeting",
      "url": "#"
    }
]) %}
<nav class="nsw-breadcrumb nsw-container {{ modifier_class }}" aria-label="Breadcrumb">
    <ol class="nsw-breadcrumb__list">
      {% for item in breadcrumb %}
        {% if item.url %}
          <li class="nsw-breadcrumb__item">
            <a href="{{ item.url }}" class="nsw-breadcrumb__link">{{ item.text }}</a>
          </li>
        {% else %}
          <li class="nsw-breadcrumb__item" aria-current="page">{{ item.text }}</li>
        {% endif %}
      {% endfor %}
    </ol>
</nav>

{% set navitems = navitems|default([
    {
      "text": "Identify asbestos",
      "url": "#",
      "svgUrl":".",
      "description": "Filium morte multavit si sine causa? quae fuerit causa, nollem.",
      "subnav": [
        {
          "text": "How to maintain asbestos?",
          "url": "#",
          "id": "1138",
          "subnav": [
            {
              "text": "Level 3",
              "url": "#"
            },
            {
              "text": "Level 3",
              "url": "#"
            },
            {
              "text": "Level 3",
              "url": "#"
            }
          ]
        },
        {
          "text": "Find asbestos products",
          "url": "#"
        },
        {
          "text": "What is asbestos ?",
          "url": "#"
        },
        {
          "text": "How do I know if its asbestos?",
          "url": "#"
        },
        {
          "text": "How do I manage asbestos?",
          "url": "#"
        },
        {
          "text": "Level 2",
          "url": "#"
        },
        {
          "text": "Level 2",
          "url": "#"
        },
        {
          "text": "Level 2",
          "url": "#"
        },
        {
          "text": "Level 2",
          "url": "#"
        }
      ]
    },
    {
      "text": "Removal and Disposal",
      "url": "#"
    },
    {
      "text": "Safety",
      "url": "#"
    },
    {
      "text": "Health risks",
      "url": "#"
    },
    {
      "text": "Who to contact",
      "url": "#"
    }
  ]) %}
  
  {% set svgUrl= svgUrl|default('.') %}
<nav id="main-navigation" class="nsw-navigation  js-mega-menu" aria-label="Main menu">
  <div class="nsw-navigation__header">
    <h2 id="nsw-navigation">Menu</h2>
    <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
      <img src="{{svgUrl}}/images/close.svg" class="nsw-icon icon">
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
    {% for item in navitems %}
      <li class="nsw-navigation__list-item">
        <a href="{{item.url}}" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="subnav-{{item.text}}">
          <span class="nsw-navigation__link-text">{{item.text}}</span>
          {% if item.subnav %}
            <img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-navigation__link-icon">
          {% endif %}
        </a>
        {% if item.subnav %}
          <div class="nsw-subnavigation" id="subnav-{{item.text}}" role="region" aria-label="{{item.text}} Submenu">
            
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-{{item.id}}" aria-expanded="true">
                <img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-icon nsw-icon--rotate-180">
                <span class="mt-2">Back<span class="sr-only"> to previous menu</span></span>
              </button>
            
              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <img src="{{item.svgUrl}}/images/close.svg" class="nsw-icon icon">
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <h2 class="nsw-subnavigation__title">
              <a href="{{item.url}}" class="nsw-subnavigation__title-link">
                {{item.text}}
              </a>
            </h2>
            <p class="nsw-subnavigation__description">{{item.description}}</p>
            <ul class="nsw-subnavigation__list mt-0">
              {% for items in item.subnav %}
                <li class="nsw-subnavigation__list-item">
                  <a href="{{items.url}}" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">{{items.text}}</span>
                    {% if items.subnav %}
                      <img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-navigation__link-icon">
                    {% endif %}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
        
      </li>
    {% endfor %}
    <li class="nsw-navigation__list-item d-block d-md-none">
      <a href="{{item.url}}" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="subnav-{{item.text}}">
          <span class="nsw-navigation__link-text">For councils</span>
        </a>
    </li>
    <li class="nsw-navigation__list-item d-block d-md-none">
        <select id="changeLanguage" class="nsw-form-select"  aria-describedby="changeLanguage-helper-text changeLanguage-error-text">
          <option class="nsw-navigation__link-text" value="">Change Language</option>
          <option class="nsw-navigation__link-text" value="1">Option 1</option>
          <option class="nsw-navigation__link-text" value="2">Option 2</option>
          <option class="nsw-navigation__link-text" value="3">Option 3</option>
        </select>
    </li>
  </ul>
</nav>

{% set data = breadcrumb|default({
  "shareUrl": "https://www.service.nsw.gov.au",
  "svgUrl":"."
}) %}

<section aria-label="Page tools">
  <ul class="nsw-socials">
    <li class="nsw-socials__item">
      <a class="nsw-socials__link js-share-this" href="https://facebook.com/sharer/sharer.php?u={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/facebook.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">Facebook</span>
      </a>
    </li>
    <li class="nsw-socials__item">
      <a class="nsw-socials__link js-share-this" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/linkedin.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">LinkedIn</span>
      </a>
    </li>
    <li class="nsw-socials__item">
      <a class="nsw-socials__link js-share-this" href="https://twitter.com/intent/tweet/?url={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/twitter.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">Twitter</span>
      </a>
    </li>
    <li class="nsw-socials__item">
      <a class="nsw-socials__link " href="mailto:?body={{data.ShareUrl}}" target="_self" rel="noopener">
      <img src="{{data.svgUrl}}/images/email.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">Email</span>
      </a>
    </li>
  </ul>
</section>

{% 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>

{% set data = data|default({
  "svgUrl":"."
}) 
%}
<div class="nsw-container p-0">
  <nav aria-label="Pagination">
    <ul class="nsw-pagination">
      <li class="nsw-pagination__item nsw-pagination__item--prev-page">

        <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>

      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>1
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>2
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--is-active">
        <a class="nsw-pagination__link is-current" href="#" aria-current="page">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>3
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>4
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            &hellip;
            <span class="sr-only">Page 5</span>
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item">
        <a class="nsw-pagination__link" href="#">
          <span class="nsw-pagination__text">
            <span class="sr-only">Page </span>12
          </span>
        </a>
      </li>
      <li class="nsw-pagination__item nsw-pagination__item--next-page">
        <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>
      </li>
    </ul>
  </nav>
</div>

{% set data = data|default({
	"respectText": "We pay respect to the Traditional Custodians and First Peoples of NSW, and acknowledge their continued connection to their country and culture.",
  "copyright": "Copyright © 2019",
  "svgUrl":".",
  "sectionLinks": [
    {
      "title": "Section Link",
      "url": "#",
      "links": [
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        }
      ]
    },
    {
      "title": "Section Link",
      "url": "#",
      "links": [
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        }
      ]
    },
    {
      "title": "Section Link",
      "url": "#",
      "links": [
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        }
      ]
    },
    {
      "title": "Section Link",
      "url": "#",
      "links": [
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        },
        {
          "text": "Highlight link",
          "url": "#"
        }
      ]
    }
  ],
	"footerLinks": [
    {
      "text": "Tertiary",
      "url": "#"
    },
    {
      "text": "Tertiary",
      "url": "#"
    },
    {
      "text": "Tertiary",
      "url": "#"
    },
    {
      "text": "Tertiary",
      "url": "#"
    }
  ]
}) %}

<footer class="nsw-footer {{modifier_class}}">
  <div class="nsw-footer__upper">
    <div class="nsw-container section-links">
      {% for item in data.sectionLinks %}
        <div class="section-links__group">
          <h3 class="section-links__heading  d-sm-block d-none"><a href="{{item.url}}">{{item.title}}</a></h3>
          <h3 class="section-links__heading d-sm-none section-links__accordian" data-toggle="collapse" data-target="#footer-{{ loop.index0 }}" aria-expanded="false" aria-controls="footer-{{ loop.index0 }}">
            <span>{{item.title}}</span>
            <img src="{{data.svgUrl}}/images/chevron-blue.svg">
            </h3>
            <nav role="navigation" class="section-links__navigation">
              <ul class="section-links__list collapse"  aria-labelledby="footer-{{ loop.index0 }}" id="footer-{{ loop.index0 }}">
                {% for link in item.links %}
                  <li class="section-links__item"><a href="{{link.url}}">{{link.text}}</a></li>
                {% endfor %}
              </ul>
            </nav>
        </div>
      {% endfor %}
    </div>
  </div>
  <div class="nsw-footer__lower">
    <div class="nsw-container">
      <p>{{data.respectText}}</p>
      <hr>
      <ul class="nsw-footer-links">
        {% for link in data.footerLinks %}
          <li class="nsw-footer-links__item">
            <a href="{{link.url}}" class="nsw-footer-links__link">{{link.text}}</a>
          </li>
        {% endfor %}
      </ul>
      <div class="nsw-footer__info">
        <p class="nsw-footer__copyright">{{data.copyright}}</p>
      </div>
    </div>
  </div>
</footer>