@extends('layouts.grid')
@section('content')
<style>
    .memb-ul {
        column-count: 5;
        column-gap: 0;
    }
    @media only screen and (max-width: 1500px) {
        .memb-ul
        {
            column-count: 4;
            column-gap: 0;
        }
    }
    @media only screen and (max-width: 1200px) {
        .memb-ul
        {
            column-count: 3;
            column-gap: 0;
        }
    }
    @media only screen and (max-width: 800px) {
        .memb-ul
        {
            column-count: 2;
            column-gap: 0;
        }
    }
    .memb-li {
        display: inline-block;
        width: 300px;
        height: 40px;
        text-align: left;
        line-height: 30px;
        vertical-align: middle;
        font-size:1.3em;
    }
    a:hover { background: #ffffff;}
    .team-G, .team-G a, team-G a:visited  {color:#00ccff;}
    .team-F, .team-F a, team-F a:visited  {color:#ff3399;}
    .team-E, .team-E a, team-E a:visited  {color:#F4B400;}
    .team-D, .team-D a, team-D a:visited  {color:#0F9D58;}
    .team-C, .team-C a, team-C a:visited  {color:navy;}
    .team-B, .team-B a, team-B a:visited  {color:#CC071E;}
    .team-A, .team-A a, team-A a:visited  {color:#4285F4;}
    .team-X, .team-X a, team-X a:visited  {color:#888888;}
    .flt    {float:left; width: 100px; margin-left:10px;}
    .pers-list > div {height:2.2em; vertical-align: middle; font-size:1.3em;}
    .cont { height:2em; vertical-align: middle; font-size:1.1em; clear:both; font-weight: 400;}
</style>
<section class="section">
<div class="container is-paddingless">
    <a href="/persons/create" class="button is-primary">Add new member</a>
<hr/>
<ul class="memb-ul">
    @foreach ($persons as $person)
        <li class="memb-li team-{{ $person->team_code }} tooltip" title="{{ $person->classif_code }}">
            <a href="/persons/{{ $person->id }}">
                    {!! $person->person_name . ' ' . $person->person_surname !!}
            </a>
        </li>
    @endforeach
</ul>
<hr/>
<div class="cont">
    <div class="team-A flt">TEAM A</div>
    <div class="team-B flt">TEAM B</div>
    <div class="team-C flt">TEAM C</div>
    <div class="team-D flt">TEAM D</div>
    <div class="team-E flt">TEAM E</div>
    <div class="team-F flt">TEAM F</div>
</div>
</div>
</section>
@endsection