@extends('layouts.app')

@section('title', 'Out Team') 

@section('content')

<section class="pt-5 pb-5">
    <div class="container">
        <div class="row">
            <h1>Our Team</h1>
            <div class="mb-4">
            <button class="btn btn-light filter-button" data-filter="all">All</button>
            <button class="btn btn-light filter-button" data-filter="Administration">Administration</button>
            <button class="btn btn-light filter-button" data-filter="Co-ordinators">Co-ordinators</button>
            <button class="btn btn-light filter-button" data-filter="Faculties">Faculties</button>
            <button class="btn btn-light filter-button" data-filter="ECA-CCA">ECA-CCA</button>
        </div>
            
            @if($teams)
                @foreach($teams as $team)
                
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter {{ $team->teamtype }}">
                    <div class="card shadow-sm mb-5 bg-light border-0" style="max-width: 320px; margin: 0 auto">
                        <div class="card-body p-2">
                            <figure class="text-center pt-3" > 
                                @if($team->feature_image)                           
                                <img class="rounded border border-success" style="width: 138px; height: 177px; margin: 0 auto; padding: 2px;" src="/upload/image/{{ $team->feature_image }}"  />
                                @endif
                            </figure>
                            <h5 class="text-center text-danger pb-2 p-0">{{ $team->name }}</h5>
                            <h6 class="text-center mb-2">{{ $team->department }}</h6>
                            <p class="text-center mb-2">{{ $team->email }}</p>
                            <address class="team-address" style="font-size: 12px;">
                            </address>
                        </div>
                    </div>
                </div>
              
            @endforeach
            @endif
        </div>
    </div>
</section>
@endsection