@php
    use App\Models\Banner;
    $banners = Banner::get();
@endphp

<div class="container-fluid p-0">
    
    <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">

        <div class="carousel-inner">

            @foreach($banners as $key => $banner)
                <div class="carousel-item{{ $key === 0 ? ' active' : '' }}">
                    <img class="w-100" src="{{ url("storage/{$banner->image}") }}" alt="{{ $banner->title }}">
                    <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                        <div class="p-3" style="max-width: 900px;">
                            <h5 class="text-white text-uppercase mb-3 animated slideInDown">{{ $banner->title }}</h5>
                            <h1 class="display-5 text-white mb-md-4 animated zoomIn">{{ $banner->subtitle }}</h1>
                            <a href="https://senadorempregos.selecty.com.br/login/?signup" target="_blank" class="btn btn-senador py-md-3 px-md-5 me-3 rounded-pill">Cadastre seu currículo</a>
                            <a href="{{ route('fale-conosco') }}" class="btn btn-secondary py-md-3 px-md-5 rounded-pill">Entre em contato</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

    </div>
    
</div>