@extends('main')
@section('styles')
@endsection
@section('page-title')
	<section class="navigation">
		<div class="breadcrumbs-wrap">
			<div class="container clearfix">
				<div class="row">
					<div class="col-md-12">
						<h2>
							{{ __('About us') }}
						</h2>
						<ul class="breadcrumbs ul--inline ul--no-style">
							<li>
								<a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
							</li>
							<span>/</span>
							<li class="active">
								{{ __('About us') }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection
@section('content')

	<section class="we-are">
		<div class="container">

			<div class="row">
				<div class="col-md-3 col-sm-3 col-xs-12 ">
					<div class="about-tab">

						<ul class="nav nav-tabs " id="pro-tab" role="">
							@foreach ($abouts as $k => $about)

								<li class="">
									<a class="nav-link @if ($loop->first) active 	@endif" id="home-tab-{{ $k }}" data-toggle="tab" href="#description-{{ $k }}" role="tab" aria-controls="all" aria-expanded="true">{{ $about->title }}</a>
								</li>
							@endforeach

						</ul>
					</div>
				</div>
				<div class="col-md-9 col-sm-9 col-xs-12">

					<div class="tab-content" id="pro-content">
						@foreach ($abouts as $k => $about)

							<div class="tab-pane active" id="description-{{ $k }}" role="tabpanel" aria-labelledby="home-tab-{{ $k }}">
								<div class="row">
								@if ($about->photo)
									<div class="col-md-8 col-sm-8 col-xs-12">
										<div class="section-title text-center">
											<h2 class="title-border">{{ $about->title }}</h2>
											{!! $about->content !!}
										</div>
									</div>
									<div class="image col-md-4 col-sm-4 col-xs-12 ">
										<img src="{{ asset($about->photo) }}"  alt="{{ $about->title }}" />
									</div>
								@else
									<div class="col-md-12">
										{!! $about->content !!}
									</div>
								@endif
							</div>
							</div>
						@endforeach

					</div>
					<!-- End Tab Content   -->

				</div>
			</div>


		</div>
	</section>
@endsection
@section('scripts')
@endsection