@if (@$cases)
<section id="slider-cases" class="c-case">
    <div class="c-case__items js-slider-outer">
        @foreach($cases as $case)
            @php $image = isset($case->image) ? url('storage/caseHome/'.$case->image) : asset('assets/img/content/header-template-003.jpg'); @endphp
            <div class="c-case__item" style="background-image: url({{$image}});">
                <div class="container c-case__wrap">
                    <div class="c-case__meta">
                        <p>{{$case->blogPost->blogcategory->name}}</p>
                    </div>
                    <div class="c-case__info">
                        <h2 class="c-case__info__title">{{$case->titulo}}</h2>
                        {!!$case->description!!}
                        @if ($case->btncta)
                        <a class="c-button"
                            href="{{$case->btnlinkcta}}"
                            style="background-color: {{ ($case->bt_color != '') ? $case->bt_color : '#C5D105' }}; color: #fff; border-color: transparent;"
                            onMouseOver="this.style.backgroundColor='#FFF'; this.style.color='{{ ($case->bt_color != '') ? $case->bt_color : '#C5D105' }}'; this.style.borderColor='{{ ($case->bt_color != '') ? $case->bt_color : '#C5D105' }}'"
                            onMouseOut="this.style.backgroundColor='{{ ($case->bt_color != '') ? $case->bt_color : '#C5D105' }}'; this.style.color='#fff';  this.style.borderColor='{{ ($case->bt_color != '') ? $case->bt_color : '#C5D105' }}'">{{$case->btncta}}</a>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="c-case__nav container js-slider-nav">
        @foreach($cases as $key => $case)
            <button>{{$key+1}}</button>
        @endforeach
    </div>
    <div class="c-case__controls container js-slider-controls">
        <button aria-label="Anterior"><i class="icon icon-arrow-left"></i></button>
        <button aria-label="Próximo"><i class="icon icon-arrow-right"></i></button>
    </div>
</section>
@endif
