@extends('v2.layout.apps')

@section('header')
<title>Leadership Team - Salutica Berhad</title>
@endsection

@section('content')
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<div class="text-center business-people-meeting">
    <h5 class="h1 text-white text-shadow-white pt-6"><strong>Leadership Team</strong></h5>
</div>
<div class='clearfix'></div>
<div class="container mt-5 mb-5">
    <h2 class='text-royal' style=' font-family: "Open Sans", sans-serif;'>
        <strong>Board of Directors</strong>
    </h2>
    <br>
    <div class='card-deck'>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/chia_chee_hoong.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Chia Chee Hoong</strong></h5>
                <p class="card-text text-center">Chairman / Independent<br>Non-Executive Director</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/joshua_lim_phan_yih.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Joshua Lim Phan Yih</strong></h5>
                <p class="card-text text-center">Managing Director /<br>Chief Executive Officer</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/lim_chong_shyh.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Lim Chong Shyh ("James Lim")</strong></h5>
                <p class="card-text text-center">Senior Executive Director</p>
            </div>
        </div>
    </div>
    <div class='card-deck mt-1'>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/low_teng_lum.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Low Teng Lum</strong></h5>
                <p class="card-text text-center">Senior Independent Non-Executive Director</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/leow_chan_khiang.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Leow Chan Khiang</strong></h5>
                <p class="card-text text-center">Independent Non-Executive<br>Director</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/chan_shook_ling.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Chan Shook Ling ("Michelle Chan")</strong></h5>
                <p class="card-text text-center">Executive Director /<br>Chief Financial Officer</p>
            </div>
        </div>
    </div>
    <div class='card-deck mt-1'>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/leadership/joel_lim_phan_hong.png" alt="...">
            <div class="card-body">
                <h5 class="card-title text-royal text-center"><strong>Joel Lim Phan Hong</strong></h5>
                <p class="card-text text-center">Alternate Director</p>
            </div>
        </div>
        <div class="card border-0" data-toggle="" data-target="">
            
        </div>
        <div class="card border-0" data-toggle="" data-target="">
            
        </div>
    </div>
    <br>
    <h2 class='text-royal' style=' font-family: "Open Sans", sans-serif;'>
        <strong>Senior Management Team</strong>
    </h2>
    <br>
    <div class='card-deck mt-1'>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/02.jpg" alt="...">
            <div class="card-body">
                <h5 class="card-title">Who</h5>
                <p class="card-text">What Post</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/02.jpg" alt="...">
            <div class="card-body">
                <h5 class="card-title">Who</h5>
                <p class="card-text">What Post</p>
            </div>
        </div>
        <div class="card border-0 leadership-card" data-toggle="modal" data-target="#leadership-modal">
            <img src="/images/02.jpg" alt="...">
            <div class="card-body">
                <h5 class="card-title">Who</h5>
                <p class="card-text">What Post</p>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="leadership-modal" tabindex="-1" aria-labelledby="leadership-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div class='align-item-center'>
                    <img src="/images/02.jpg" class="card-img-top" alt="...">
                    <h5>Who</h5>
                </div>
                <hr>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum massa est, tincidunt iaculis nibh egestas quis. Aenean vitae blandit erat. Nunc nulla enim, semper a sem ac, suscipit pretium quam. Ut mollis purus quis purus tempor faucibus. Praesent dui purus, vulputate ac pretium a, congue non arcu. Quisque sit amet orci eros. Mauris quis quam dictum, mattis mauris a, posuere odio.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection