@extends('layouts.head')

@section('page-title', 'Profils & Portraits')


@section('content')

<main class="main_breath d-flex flex-column justify-content-between">
    <div class="floating_section profiles_selection">
        <section>
            <div class="d-flex align-items-center flex-column" >
                <h1 class="display-3">
                    La segmentation FINESIS 
                </h1>
                <div class=" align-self-start profiles_tabs">
                    <div class="d-flex">
                        <h2 class="tab-selection tab_selection-first {{ !$displayPortraits  ? 'active' : ''}}">
                            Nos profils
                        </h2>
                        <h2 class="tab-selection tab_selection-second {{ $displayPortraits  ? 'active' : ''}}">
                            Nos portraits
                        </h2>
                    </div>
                    <div class="tab-underline {{ $displayPortraits  ? 'tab_second' : ''}}"></div>
                </div>

                <div class="profiles_criteria align-self-end d-flex align-items-center">
                    <p>Triez selon le critère :</p>
                    <div>
                        @for ($i = 0; $i < 5; $i++)
                        <button class="btn btn-outline-secondary btn-chip">Critère</button>
                        @endfor
                </div>
            </div> 
        </section>
        <section class="tab_content-first selection_profiles-profils {{ !$displayPortraits  ? 'active' : ''}} flex-wrap justify-content-center align-items-center">
            @foreach ($profiles as $profile)
            <div class="profile-container {{$profile['class']}}">
                <a href="{{$profile['url']}}" >
                    <div class="h-100 w-100 p-img_container">
                        <img class="w-100 h-100 p-img" src="{{asset($profile['picture'])}}" alt="photo du Profil {{$profile['profile']}}">
                        <div class="p_overlay p_bg w-100 h-100"></div>
                    </div>
                    <div class="d-flex flex-column justify-content-between h-100">
                        <div class="profile-content d-flex flex-column align-items-center">
                            <p class="profile-letter display-2">{{$profile['profile']}}</p>
                            <p class="profile-name">{{$profile['name']}}</p>
                        </div>
                        
                        <div class="profile-link_container ">
                            <p class="profile-link d-flex justify-content-between align-items-center">Découvrir les </p>
                        </div>
                    
                    </div>
                </a>
            </div>
                        @endforeach
            
           
        </section>
        <section class="tab_content-second selection_profiles-portraits {{ $displayPortraits  ? 'active' : ''}} flex-wrap justify-content-center align-items-center">
            @foreach ($portraits as $portrait)
            <div class="profile-container {{$portrait['class']}}">
                <a href="{{$portrait['url']}}" >
                    <div class="h-100 w-100 p-img_container">
                        <img class="w-100 h-100 p-img" src="{{asset($portrait['picture'])}}" alt="photo du Portrait {{$portrait['profile']}}">
                        <div class="p_overlay p_bg w-100 h-100"></div>
                    </div>
                    <div class="d-flex flex-column justify-content-between h-100">
                        <div class="profile-content d-flex flex-column align-items-center">
                            <p class="profile-letter display-2">{{$portrait['profile']}}</p>
                            <p class="profile-name">{{$portrait['name']}}</p>
                        </div>
                        
                        <div class="profile-link_container ">
                            <p class="profile-link d-flex justify-content-between align-items-center">Découvrir les </p>
                        </div>
                    
                    </div>
                </a>
            </div>
                        @endforeach
        </section>
    </div>                
</main>


@include('layouts.components.footer')

@endsection