{{--

    A single case on the cases overview page.
    A case-row is a flexable-layout that will stretch across the full viewport.
    Inside we have two flex-items; the info-container and the image.

--}}

<a class="case-layout" id="{{ $slug }}" data-name="case" data-navigation-color="{{ $navigationColor }}" href="/cases/{{ $slug }}">

    {{-- The case info container --}}
    <div class="case-info-container" style="background-color: {!! $color !!}">

        {{-- Contain the left content within the size of our main grid --}}
        <div class="contained-layout">

            {{-- Case info --}}
            <div class="info">
                <h2>{!! $title !!}</h2>

                @include('site.partials.cases.caseTags',['tags'=>$tags])
                @if(Session::get('ab.case') == 'b')
                <span class="cta">Bekijk case</span>
                @endif
                <span class="arrow"></span>
            </div>

        </div>

    </div>

    {{-- The image --}}
    <div class="case-image">
        <div class="image" style="background-image: url({!! $image !!})"></div>
    </div>

</a>