<div class="block-wrapper life-experiences" data-share-element="historias_vida" data-anchor="#historias_vida">
    <a id="historias_vida"></a>
    <div class="block-container">
        <div class="header-info">
            <div class="icon icon-talk-bubble">
            </div>
            
            @if ($templateData->experiencia_vida_titulo)
            <h3>
                {{ $templateData->experiencia_vida_titulo }}
            </h3>
            @endif
            
            @if ($templateData->experiencia_vida_subtitulo)
            <h4>
                {{ $templateData->experiencia_vida_subtitulo }}
            </h4>
            @endif
            @include('frontend.partials.reusables.social')
        </div>
        <div class="content">
            <div class="desktop-content">
                <div class="person-information">
                    <div class="js-desktop-id identification">
                        <!-- populado por js-->
                    </div>
                    <div class="js-desktop-bio bio">
                        <!-- populado por js-->
                    </div>
                </div>
            </div>
            <div class="navigation-panel">
                <div class="picker">
                    <ul class="js-pick-person">
                        @foreach ( $templateData->life_experiences as $content )
                        <li>
                            <div class="picker-header">
                                <div class="picker-header-content">
                                    <div class="image">
                                        <img alt="" src="{{ getMediaUrl($content->foto->filename) }}">
                                        </img>
                                    </div>
                                    <div class="js-mobile-id mobile-identification">
                                        <h4>
                                            {{ $content->title }}
                                        </h4>
                                        <p>
                                            {{ $content->subtitle }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="picker-body">
                                <div class="js-mobile-bio mobile-bio">
                                    @if(isset($content->document) && !empty($content->document))
                                    <div class="image-with-icon">
                                        <a href="{{ getMediaUrl($content->document->filename) }}" target="_blank">
                                            <img alt="teacher thumbnail" class="icon" src="{{ Config::get('path.frontend.img') }}/icons/download-pdf.svg">
                                            </img>
                                        </a>
                                        <img alt="" src="{{ getMediaUrl($content->placeholder_video->filename) }}">
                                        </img>
                                    </div>
                                    @else
                                    <div class="js-video video" data-video-src="{{ $content->link }}">
                                        <div class="js-placeholder-image placeholder-image person-one" style="background-image: url({{ getMediaUrl($content->placeholder_video->filename) }})">
                                        </div>
                                        <img alt="play big" class="play-button" src="{{ Config::get('path.frontend.img') }}/icons/play-big.svg">
                                        </img>
                                    </div>
                                    @endif
                                    <div class="url-container">
                                        <a href="{{$content->linkExterno}}" target="_blank">
                                            <div class="icon-play-rounded"></div>
                                            <p>Reportagem SIC</p>
                                        </a>
                                    </div>
                                </div>
                            </div>                            
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div class="url-container">
                    <a class="js-le-external-url" href="#" target="_blank">
                        <div class="icon-play-rounded"></div>
                        <p>Reportagem SIC</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>