@extends('layouts.website')
@section('title','About Us')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pb-0" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">
                <div class="main-box-white mt-4 mb-2">
                    <div class="cms-content text-color ">
                        <div class="row mb-5">
                            <div class="col-12 mb-5">
                                <div class="title">
                                    <h3>Leadership</h3>
                                </div>
                            </div>
                            <div class="col-12">
                                
                                @foreach($leaders as $leader)
                                <div class="leader-row mb-5 d-flex flex-wrap align-items-center">
                                    <div class="leader-img">
                                        <img src="{{(getImage($leader->image)) ?? asset('assets/media/users/no-profile-image.png')}}" alt="{{$leader->name}}" />
                                        <span>{{$leader->name}}, {{$leader->role}}</span>
                                    </div>
                                    <div class="leader-content">
                                        <p>{{$leader->description}}</p>
                                    </div>
                                </div>
                                @endforeach
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main-box-white mt-2 mb-4">
                    <div class="cms-content text-color ">
                        <div class="row mb-5">
                            <div class="col-12">
                                <div class="title">
                                    <h3>LabPair Team</h3>
                                </div>
                            </div>
                        </div>
                        <div class="row labPair_team">
                            
                            @foreach($teams as $team)
                            <div class="col-lg-4">
                                <div class="leader-row mb-5 d-flex flex-wrap align-items-center">
                                    <div class="leader-img">
                                        <img src="{{(getImage($team->image) ?? asset('assets/media/users/no-profile-image.png'))}}" alt="{{$team->name}}" />
                                        <span>{{$team->name}}, <br>{{$team->role}}</span>
                                    </div>
                                    <div class="leader-content">
                                        <p>{{$team->description}}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>

@endsection

@push('page_level_script')
@endpush

@push('footerscript')

@endpush