@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('canonical_tag', $meta_data->canonical_tag)
@section('banner_image', "banners/".$banner->banner_image)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image}}" alt="{{$meta_data->page_name}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image_mobile}}" alt="{{$meta_data->page_name}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {!!nl2br($banner->banner_caption)!!}
                <p class="paragraph mt-4">{!!nl2br($banner->banner_description)!!}</p>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$meta_data->page_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>
    </article>
    <article class="container-fluid linkNav">
        <nav class="row custom__row text-center">
            <ul class="m-auto">
                <li><a href="{{url('/')}}/commitments">Welcome</a></li>
                <li><a href="{{url('/')}}/business-excellence">Business Excellence</a></li>
                <li><a href="{{url('/')}}/sustainability" class="active">Sustainability</a></li>
                <li><a href="{{url('/')}}/corporate-governance">Corporate Governance</a></li>
            </ul>
        </nav>
    </article>
    <article class="container-fluid sectionIntro mt-5 pb-5">
        <section class="row custom__row justify-content-center mb-5">
            <header class="col-12 col-md-10 col-lg-8 text-center">
                <h2 class="secondary-heading mb-4 black">{{$banner->introduction_title}}</h2>
                <p class="paragraph">{!!nl2br($banner->introduction_description)!!}</p>
            </header>
        </section>
        @php
        $i = 0;
        @endphp
        @foreach($sustainability_key_points as $sustainability_key_point_row)
        @if($i %2 == 0)
        <section class="row keyItems">
            <div class="col-12 col-md-6 keyItems__image left">
                <div class="keyItems__image__block">
                    <img src="{{url('/')}}/assets/images/sustainability/{{$sustainability_key_point_row->sustainability_key_point_thumbnail}}" alt="{{$sustainability_key_point_row->sustainability_key_point_title}}" class="img-fluid">
                </div>
            </div>
            <div class="col-12 col-md-6 keyItems__content right">
                <h3>{{$sustainability_key_point_row->sustainability_key_point_title}}</h3>
                <p class="paragraph">{!!nl2br($sustainability_key_point_row->sustainability_key_point_description)!!}</p>
            </div>
        </section>
        @else
        <section class="row keyItems">
            <div class="col-12 col-md-6 keyItems__content left">
                <h3>{{$sustainability_key_point_row->sustainability_key_point_title}}</h3>
                <p class="paragraph">{!!nl2br($sustainability_key_point_row->sustainability_key_point_description)!!}</p>
            </div>
            <div class="col-12 col-md-6 keyItems__image right">
                <div class="keyItems__image__block">
                    <img src="{{url('/')}}/assets/images/sustainability/{{$sustainability_key_point_row->sustainability_key_point_thumbnail}}" alt="{{$sustainability_key_point_row->sustainability_key_point_title}}" class="img-fluid">
                </div>
            </div>
        </section>
        @endif
        @php
        $i++;
        @endphp
        @endforeach
    </article>
</main>
@endsection