@component('open._layouts.app', [
    'title' => $expert->name,
    'meta' => $expert->meta(),
])
    <section class="expert-detail">
        {{ Breadcrumbs::render('expert', $expert) }}
        <section class="container expert-detail-container">
            <div class="row">
                <div class="col col-3 sidebar no-margin clear-both">
                    <div class="round-thumbnail">
                        <h4 style="text-align: center; font-size: 30px; margin: 0 0 5px;">{{ $expert->name }}</h4>
                        <p style="text-align: center; color: #ab8d00; margin: 0 0 20px;">{{ $expert->title }}</p>
                        <figure>
                            <span></span>
                            @if($image = $expert->getFirstMedia('featured'))
                            <img src="{{ $image->getUrl('small') }}" alt="{{ $image->name }}">
                            @else
                            <img src="https://via.placeholder.com/300x300">
                            @endif
                        </figure>
                    </div>
                    <div class="expert-presentation-card">
                        <p>
                            {{ $expert->description }}
                        </p>
                        <p class="align-center all-link">
                            <a href="{{ route('articles.index') }}" class="chevron">
                                @lang('layout.articles.all')
                            </a>
                        </p>
                    </div>
                </div>
                <div class="col col-1 placeholder"></div>
                <div class="col col-8 content">
                    @foreach($articles as $article)
                        @if(!empty($article->name)) {{-- todo:hack to check if name is null --}}
                            @include('open.articles._partials.articleElement')
                        @endif
                    @endforeach

                    {{ $articles->links('open._layouts._partials.pagination') }}
                </div>
            </div>
        </section>
    </section>
@endcomponent