@extends('front.layout')
@section('header')
    <link rel="stylesheet" href="/front/assets/css/pages/contact.css" />
    <title>{{ str_contains(\Illuminate\Support\Facades\Request::url(),'director') ? trans('translate.board_members') : trans('translate.managers') }}</title>
    <style>
        .board-card{
            background-color: #F9F9F9;
            /*background-color: red;*/
            border-radius: 8px;
        }
        .board-card img{
            width: 100%;
            height: 200px;
            object-fit: contain;
        }
        .board-card a{
            background-color: #232077;
            color: white;
        }
        .board-card a:hover{
            background-color: #232077 !important;
            color: white !important;
        }
        .board-card p{
            font-weight: 700;
            font-size: 18px;
        }
        .board-card span{
            font-weight: 600;
            font-size: 12px;
            color: #888888;
        }
        @media screen and (max-width: 500px) {
            .site-btn{
                font-size: 11px !important;
            }
        }
    </style>
@endsection
@section('content')
    <div class="image-banner">
        <img  src="/front/assets/images/board-member.png" class="d-block w-100" alt="title" />
        <div>
            <h1>
                <div class="container">
                    {{ str_contains(\Illuminate\Support\Facades\Request::url(),'director') ? trans('translate.board_members') : trans('translate.managers') }}
                </div>
            </h1>
        </div>
    </div>

    <div class="container">
        <div class="row mt-5">
            @foreach($director as $item)
                <div class="col-lg-3 col-6 mt-3">
                    <div class="board-card">
                        <img src="/{{ $item->src }}" alt="" style="border-radius: 8px 8px 0 0">
                        <div class="d-grid justify-content-center">
                            <p class="d-flex justify-content-center">{{ $item->name }}</p>
                            <div class="d-flex mt-2">
                                <img src="/front/assets/images/footer-icon.svg" style="width: 24px!important;height: 24px !important;">
                                <span style="align-content: center">{{ $item->title }}</span>
                            </div>
                            <br>
                            <a href="{{ getFirstSegment() }}{{ str_contains(\Illuminate\Support\Facades\Request::url(),'director') ? 'director' : 'manager'  }}/{{ $item->slug }}" class="btn site-btn w-100 mt-4">
                                {{ trans('translate.see_more') }}
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="me-2">
                                    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18 12.75H7.81L10.82 15.76C11.11 16.05 11.11 16.53 10.82 16.82C10.67 16.97 10.48 17.04 10.29 17.04C10.1 17.04 9.91 16.97 9.76 16.82L5.47 12.53C5.33 12.39 5.25 12.2 5.25 12C5.25 11.8 5.33 11.61 5.47 11.47L9.76 7.18C10.05 6.89 10.53 6.89 10.82 7.18C11.11 7.47 11.11 7.95 10.82 8.24L7.81 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@section('footer')
    <script  src="/front/assets/js/contact.js"></script>
@endsection