@extends('layouts.blog')
@section('title')
{{ $posts[0]->user->getFullName() . " | Technoblog" }}
@endsection
@section('blog_content')

	<div class="container-fluid p-4">

		<div class="row">

			<div class="col-md-4">
					<div class="card card-profile">
						<div class="card-header" style="{{ !empty($posts[0]->user->userProfile->cover_photo_link) ? "background-image: url(/uploads/users/".$posts[0]->user->userProfile->cover_photo_link.");" : "background-color: #efefef;" }}"></div>
						<div class="card-body text-center">

						@if(!empty($posts[0]->user->userProfile->profile_photo_link))
							<img class="card-profile-img" src="/uploads/users/{{ $posts[0]->user->userProfile->profile_photo_link }}">
						@else
							<span class="card-profile-avatar avatar avatar-xxl">{{ strtoupper($posts[0]->user->name[0]) . strtoupper($posts[0]->user->surname[0]) }}</span>
						@endif

						<h3 class="mb-3">{{ $posts[0]->user->getFullName() }}</h3>
						<p class="mb-4">{{ $posts[0]->user->userProfile->short_bio }}</p>
						<ul class="social-links list-inline mb-0 mt-2">

							@if(!empty($posts[0]->user->userProfile->facebook_link))
								<li class="list-inline-item">
										<a href="https://facebook.com/{{ $posts[0]->user->userProfile->facebook_link }}" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->facebook_link }}"><i class="fa fa-facebook"></i></a>
								</li>
							@endif

							@if(!empty($posts[0]->user->userProfile->instagram_link))
								<li class="list-inline-item">
									<a href="https://instagram.com/{{ $posts[0]->user->userProfile->instagram_link }}" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->instagram_link }}"><i class="fa fa-instagram"></i></a>
								</li>
							@endif

							@if(!empty($posts[0]->user->userProfile->twitter_link))
								<li class="list-inline-item">
									<a href="https://twitter.com/{{ $posts[0]->user->userProfile->twitter_link }}" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->twitter_link }}"><i class="fa fa-twitter"></i></a>
								</li>
							@endif

							@if(!empty($posts[0]->user->userProfile->youtube_link))
								<li class="list-inline-item">
									<a href="https://youtube.com/user/{{ $posts[0]->user->userProfile->youtube_link }}" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->youtube_link }}"><i class="fa fa-youtube"></i></a>
								</li>
							@endif

							@if(!empty($posts[0]->user->userProfile->skype_link))
								<li class="list-inline-item">
									<a href="skype:{{ $posts[0]->user->userProfile->skype_link }}?userinfo" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->skype_link }}"><i class="fa fa-skype"></i></a>
								</li>
							@endif

							<li class="list-inline-item">
								<a href="mailto:{{ $posts[0]->user->userProfile->technoblog_email }}" target="_blank" class="elemWithTooltip" data-tooltip-info="top-{{ $posts[0]->user->userProfile->technoblog_email }}"><i class="fa fa-envelope"></i></a>
							</li>

						</ul>

					</div>

				</div>

			</div>

			<div class="col-md-8">
				@foreach ($posts as $post)
					<div class="card profile-card card-aside">
						<a href="#" class="card-aside-column" style="background-image: url(/uploads/{{ $post->image_link }})"></a>
						<div class="card-body d-flex flex-column">
							<h4><a href="/category/{{ strtolower($post->category->name) }}/{{ $post->slug }}">{{ $post->title }}</a></h4>
							<div class="text-muted">{!! str_limit($post->content, 150) !!}</div>
							<div class="d-flex align-items-center pt-5 mt-auto">
								<div>
									<small class="d-block text-muted">{{ $post->ago() }}</small>
								</div>
								<div class="ml-auto">
									<a href="/category/{{ strtolower($post->category->name) }}/{{ $post->slug }}" style="font-size: 15px;">Read More</a>
								</div>
							</div>
						</div>
					</div>
				@endforeach

				<div class="mt-5">
					{{ $posts->links() }}
				</div>

			</div>

		</div>

	</div>

@endsection