@extends('layout')
@section('content')
@section('title', 'Projets')
@section('description', 'Voici la liste des projets effectués avec différentes technologies comme Laravel, Ruby on Rails, Vue.js React. Tous les sites sont créés sur mesure')

<section class="project_container">
    <h3 class="portfolio_title tous_projet">Tous les projets</h3>
    <h3 class="portfolio_title">Page n°{{$projects->currentPage()}}</h3>
    
    @foreach ($projects as $project)
    @php $name = json_decode($project->name,true); @endphp
        <div class="each_project_container">
            <div class="info_container">
                <p style="--i:.25s" class="project_title">{{$project['title']}}</p>
                <p style="--i:.5s" class="project_description">{{$project['description']}}</p>
                <p style="--i:.75s" class="project_technology">{{$project['technology']}}</p>
                @if($project['link'] != '#')
                    <a style="--i:1.5s" target="_blank" href="{{$project['link']}}">Visiter le site</a>
                @endif
            </div>
            <div class="fake_container_img">
                <div  class="fake_container">
                    <div style="--color: {{$project['color']}}" class="faked"></div>
                </div>
                <div class="img_container">
                    @foreach ($name as $img)
                        <img loading="lazy" class="project_img" src="uploads/{{$img}}" alt="">
                    @endforeach
                </div>
                <div class="progress_bar_container">
                    <div style="background-color: {{$project['color']}};" class="progress_bar"></div>
                </div>
            </div>
        </div>
    @endforeach
    <div class="links_pagination">
        {{ $projects->links("pagination::bootstrap-4") }}

    </div>

</section>

<script src="/js/viewport.js"></script>
<script src="/js/scroll.js"></script>
<script src="/js/slider.js"></script>
<script src="/js/menuContentAppear.js"></script>
@endsection