@extends('layouts.default')

@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;}


    .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">
    <div class="level">
        <div class="level-left">
            <h2 class="title logis-red is-capitalized">{{ trans('labels.members') }}</h2>
        </div>
        <div class="level-right">
            <a href="persons/create"
            class="button is-primary"
         >
             <span>{!! trans('labels.add') !!}</span>
             <span class="icon">
                 <i class="fas fa-calendar-plus"></i>
             </span>
         </a>
        </div>
    </div>
<hr/>

<ul class="memb-ul">

    @foreach ($persons as $person)

        <li>
            <a href="/persons/{{ $person->id }}">
                    {!! $person->person_surname . ' ' . $person->person_name !!}
            </a>
        </li>
    @endforeach
</ul>
</div>
</section>

@endsection