@extends('frontend.layouts.app')

@section('content')
    {{--    Top row: user info, icons of lab groups--}}
    <div class="d-flex">
        <div class="mr-auto p-2">
            <div class="row">
                {{--        Profile picture--}}
                <div class="col-sm-3" style="margin-right: 10px">
                    <img src="{{ $user->getPicture(80) }}"
                         alt="Profile Picture"
                         style="border-radius: 10px 0px 10px 10px; height: 80px">
                </div>
                {{--        User info--}}
                <div class="col-sm-8"><p
                        class="g_et_al_header2">   {{ $user->name }}</p>
                    <p class="g_et_al_paragraph2">byline</p></div>
            </div>
        </div>


    </div>
    <div class="row" style="margin-top: 10px; min-height: 200px; margin-bottom: 10px">
        <div class="col" style="">
            <div class="col"
                 style="background-color: whitesmoke; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px;  margin-left: 5px; margin-right: 10px">      {{--                <div class="g_et_al_header2" style="border-bottom: 2px solid grey; margin-bottom: 5px">Personal details--}}
                {{--                </div>--}}
                <div class="row" style="border-bottom: 1px solid grey; margin-bottom: 5px; ">

                    <div class="g_et_al_header2 col-sm-6" style="">Personal details</div>

                </div>
                <table class="table table-striped table-hover table-bordered">
                    <tr>
                        <th>@lang('labels.frontend.user.profile.name')</th>
                        <td>{{ $user->prefix?$user->prefix->text.' ':''}}{{$user->name }}</td>
                    </tr>
                    {{--                    <tr>--}}
                    {{--                        <th>Phone</th>--}}
                    {{--                        <td>{{$logged_in_user->phone}}</td>--}}
                    {{--                    </tr>--}}
                    <tr>
                        <th>Organisation</th>
                        <td>{{$user->institution?$user->institution->text:'(not set)'}}</td>
                    </tr>
                    <tr>
                        <th>Position</th>
                        <td>{{$user->position?$user->position->text:'(not set)'}}</td>
                    </tr>

                    <tr>
                        <th>Research focus</th>

                        <td>@foreach(explode(',',$user->research_focus_lookup_ids) as $research_focus_lookup_id)
                                {{\App\Models\Lookups\Research_focus_lookup::find($research_focus_lookup_id)?\App\Models\Lookups\Research_focus_lookup::find($research_focus_lookup_id)->text:''}}@if(!$loop->last)
                                    ,@endif
                            @endforeach
                        </td>
                    </tr>


                </table>

            </div>

        </div>


    </div>
    <div class="row" style="margin-top: 10px; min-height: 100px">
        <div class="col"
             style="margin-left:20px; background-color: whitesmoke; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px; margin-right: 5px">
            {{--            <div class="g_et_al_header2" style="border-bottom: 2px solid grey">Board explorer--}}
            {{--            </div>--}}
            <div class="d-flex bd-highlight" style="border-bottom: 1px solid grey; margin-bottom: 5px; ">
                <div class=" p-2 flex-grow-1 bd-highlight">
                    <span class="g_et_al_header2"> Public boards</span>

                </div>


                {{--            <button class="btn">New</button>--}}
            </div>
            <div class="row">
                @foreach($boards as $board)
                    <a class="col-md-2" href="{{URL::to('board/'.$board->id)}}"
                       style="border:1px solid grey; width:100px;">{{$board->name}}
                        <img src="{{$board->thumb}}" style="border:1px solid grey; height: 100px"> </a>
                @endforeach

            </div>
        </div>
    </div>
@endsection