@php

$exception = $exception ?? false;
$desktop = $desktop ?? true;
$graph_chart = $graph_chart ?? false;
$desktopNoScroll = $desktopNoScroll ?? false;
$increaseMarginAtIndex = $increaseMarginAtIndex ?? false;
$increaseMarginLeft = $increaseMarginLeft ?? false;
$mobileMarginTop = $mobileMarginTop ?? false;

$noDesk = "no-desk";
$adjustPadding = "impactreport2022-graph-carousel-padding-top";

if ($graph_chart) {
    $noDesk = "no-desk-768";
}

@endphp
<div role="region" class="impactreport2022-cards-container @if(!$exception) key-numbers-container @endif @if(!$desktop) {{ $noDesk }} @endif @if($graph_chart) {{ $adjustPadding }} @endif @if($desktopNoScroll) impactreport2022-carousel-no-scroll-desk @endif">
    <div class="impactreport2022-cards @if($graph_chart) impactreport-2022-card-chart @endif @if($mobileMarginTop) impactreport-2022-margin-bottom-chart @endif">
    @foreach ($data as $item)
        @if (!$exception and !$graph_chart)
            <div class="impactreport2022-card key-numbers @if($increaseMarginLeft) impactreport-2022-more-margin-left @endif @if($item->moreMarginRight) impactreport-2022-more-margin-right @endif">
                <div class="impactreport2022-card-firstline">
                    <img src="{{ $item->icon }}" alt="">
                    <div class="impactreport2022-card-title no-margin-bottom">
                        {!! $item->title !!}
                    </div>
                </div>
                <div class="impactreport2022-card-subtitle">{!! $item->subtitle !!}</div>
            </div>
        @elseif ($graph_chart)
            <div class="rect-graphs">
            @foreach ($item as $chart)
            <div class="rect-graph fadeInElement" aria-label="{{ $chart->ariaLabel }}" role="text">
                <div class="bars" aria-hidden="true">
                  <div class="bottom-bar border-bottom {{ $chart->classGraph }}">
                    <div><p>{{ $chart->firstData }}</p></div>
                  </div>
                  <div class="top-bar {{ $chart->classGraph }}">
                    <div><p>{{ $chart->secondData }}</p></div>
                  </div>
                </div>
                <div class="description description-chart-align-center" aria-hidden="true">
                  {!! $chart->title !!}
                </div>
              </div>
              @endforeach
            </div>
        @else
            <div class="impactreport2022-card impactreport2022-exception-carousel-home">
            <div class="impactreport2022-year"><span>{{ $item->year }}</span></div>
                {!! $item->description !!}
            </div>
        @endif
    @endforeach
    </div>
</div>
<div class="impactreport2022-arrows @if(!$exception) key-numbers-arrows @endif @if(!$desktop) {{ $noDesk }} @endif @if($graph_chart) impactreport2022-planet-chart-arrows @endif @if($desktopNoScroll) impactreport2022-carousel-no-scroll-desk-arrows @endif">
    <a href="javascript:;" class="impactreport2022-left-arrow-button" aria-disabled="true">
        <img class="impactreport2022-left-arrow" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/carousel-arrow.svg" alt="previous">
    </a>
    <a href="javascript:;" class="impactreport2022-right-arrow-button" aria-disabled="false">
        <img class="impactreport2022-right-arrow" src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/carousel-arrow.svg" alt="next">
    </a>
</div>

<script src="/wp-content/themes/equilibrium/resources/views/impactreport-2022/index.js"></script>