@extends('layouts.app')
@section('style')
<style>
    h3 {
        font-family: 'Poppins', sans-serif;
    }

    .social-box .box {
        background: #FFF;
        border-radius: 10px;
        padding: 40px 10px;
        margin: 20px 0px;
        cursor: pointer;
        transition: all 0.5s ease-out;
    }

    .social-box .box:hover {
        box-shadow: 0 0 6px #4183D7;
    }

    .social-box .box .box-text {
        margin: 20px 0px;
        font-size: 15px;
        line-height: 30px;
    }

    .social-box .box .box-btn a {
        text-decoration: none;
        color: #4183D7;
        font-size: 16px;
    }

    .fa {
        color: #4183D7;
    }

</style>
@endsection
@section('content')
<div class="social-box">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-xs-12 text-center">
                <a href="/projects/create" class="text-decoration-none text-dark">
                <div class="box bg-light h-75">
                    <i class="fa fa-behance fa-3x" aria-hidden="true"></i>
                    <div class="box-title">
                        <svg width="50px" height="50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                            <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                            <path
                                d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" />
                        </svg>
                    </div>
                    <div class="box-text">
                        <h3>Add New Project</h3>
                    </div>
                </div>
                </a>
            </div>
            @foreach($projects as $project)
                    <div class="col-lg-4 col-xs-12 text-center">
                        <a href="/dashboard?projectId={{ $project->id }}" class="text-decoration-none text-dark">
                        <div class="box bg-light h-75">
                            <i class="fa fa-behance fa-3x" aria-hidden="true"></i>
                            <div class="box-title">
                                
                            </div>
                            <div class="box-text">
                                <h3>{{ $project->name }}</h3>
                            </div>
                        </div>
                        </a>    
                    </div>
            @endforeach
        </div>
    </div>
</div>
@endsection