{% set linkList = linkList|default([
    {
      "text": "How to safely manage",
      "url": "#", "svgUrl":"."
    },
    {
      "text": "How to safely dispose",
      "url": "#", "svgUrl":"."
    },
    {
      "text": "Who to contact",
      "url": "#", "svgUrl":"."
    }
  ]) %}

<div class="">
	  <div class="nsw-link-list">
      <ul class="nsw-link-list__list p-0">
         {% for item in linkList %}
              {% include '@asbestos/components/linked-list/list.twig' with {
                "item": item
                } %}
        {% endfor %}
      </ul>
    </div>
</div>

{% set mobileCaption = mobileCaption|default('Step 2 of 4: Using PPE') %}
{% set modifier_class = modifier_class|default('col-12') %}
{% set steppersData = steppersData|default([
    {
      "caption": "Step 1: Planning",
      "isCompleted": false,
      "isActive":false
    },
    {
      "caption": "Step 2: Using PPE",
      "isCompleted": true,
      "isActive":true
    },
    {
      "caption": "Step 3: Decontamination",
      "isCompleted": false,
      "isActive":false
    },
    {
      "caption": "Step 4: Disposal",
      "isCompleted": false,
      "isActive":false
    }
]) %}
<div class="stepper-container {{modifier_class}}">
  <div class="step-mobile-caption d-block d-md-none">
      {{ mobileCaption }}
  </div>
  <div class="d-flex justify-content-center align-items-end">
  {% for item in steppersData %}
      {% include '@asbestos/components/steppers/step.twig' with {
          "item": item
          } %}
  {% endfor %}
</div>
</div>

{% set data = data|default([{
      "src": "./images/hompage-50-1.png",
      "caption":"Close up of underside of asbestos cement . Notice the golf ball dimpling - this is an indication that the material is asbestos cement sheeting."
    },{
      "src": "./images/garage.jpg",
      "caption":"Cement sheet lining on walls and ceiling with asbestos cement cover strips over the joins."
    },{
      "src": "./images/room.jpg",
      "caption":"Asbestos cement sheet cladding - exterior walls and eaves"
    },{
      "src": "./images/hompage-50-2.png",
      "caption":"Asbestos Cement Sheeting - garage exterior. Many homes in the affluent areas erected a fibro garage to house their new car in the 1950s - 1960s"
    },{
      "src": "./images/cement.jpg"
    },{
      "src": "./images/house.jpg",
      "caption":"Asbestos cement sheet cladding"
    }]) 
%}
{% set svgUrl= svgUrl|default('.') %}
{% set modifier_class = modifier_class|default("nsw-container p-0") %}
<div class="{{modifier_class}}">
  <div class="row mx-0">
    {% for img in data %}
    <div class="col-12 col-md-4 py-3">
        <div class="image-card">
            <div class="image-card__content">
                <div class="image-card__image-area">
                    <a class="border-0 w-100 p-0" aria-label="View {{img.imgAlt}} in Image Gallery " href="#imageGridExample" data-toggle="modal" data-slide-to="{{ loop.index0 }}">
                        <img src="{{img.src}}" alt="{{img.imgAlt}}" class="image-card__image rounded">
                    </a>
                </div>
            </div>
            {% if img.caption %}
                <div class="image-card__caption">{{img.caption}}</div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
</div>
 <div class="modal fade carousel slide position-fixed" id="imageGridExample" tabindex="-1" role="dialog" aria-label="Image Gallery" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <div class="carousel-inner">
            {% for img in data %}
              <div tabindex="0" class="carousel-item {{ loop.first ? 'active' }}">
                <img class="img-fluid rounded w-100" src="{{ img.src }}" alt="{{img.imgAlt}}">
                <p class="image-card__caption">{{img.caption}}</p>
              </div>
            {% endfor %}
          </div>
          <a class="carousel-control-prev"  tabindex="0"  href="#imageGridExample" aria-label="Previous Image" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" tabindex="0"  href="#imageGridExample" aria-label="Next Image" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
          <button type="button" class="close-button" data-dismiss="modal">
            <img src="{{svgUrl}}/images/close.svg" class="nsw-icon">
            <span class="sr-only">Close Gallery</span>
          </button>
        </div>
      </div>
    </div>
  </div>

<div class="row m-md-0">
  <div class="col-md-4 mb-4">{% include 'teaser-card.twig' with { 
    "data" : { heading: 'How to maintain asbestos', theme: 'media', img: "https://picsum.photos/id/421/400/200" ,
     copy: "Follow these simple steps to plan and work safely with asbestos.", "svgUrl":"."}
    
    } %}</div>
  <div class="col-md-4 mb-4">{% include 'teaser-card.twig' with { 
    "data" : { heading: 'How to safely dispose', theme: 'media', img: "https://picsum.photos/id/1047/400/200", copy: "Follow these simple steps to plan and work safely with asbestos.", "svgUrl":"." }
    } %}</div>
   <div class="col-md-4 mb-4">{% include 'teaser-card.twig' with { 
    "data" : { heading: 'Health and risks of exposure', theme: 'media', img: "https://picsum.photos/id/233/400/200" ,
     copy: "Understand the impacts of asbestos exposure.", "svgUrl":"."}
    } %}</div>
</div>