@extends('front.layouts.app')
@section('metatags')
    <link rel="alternate" hreflang="en" href="https://www.nestan.ge/en/about" />

        <title>{{$about->translated_title}}</title>
    <meta name="title" content=" {{ $about->translated_description }}">
    <meta name="description" content=" {{ $about->translated_description }}"> 

<meta property="og:locale" content="{{ currentLocale() }}"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.nestan.ge/{{ currentLocale() }}" />
<meta property="og:image" content="{{asset('/assets/images/cover.PNG')}}" />
<meta property="og:description" content=" {{ $about->translated_description }}" />
<meta property="og:site_name" content="Batumiview.com" />
<meta itemprop="name" content="{{$about->translated_title}}">
<meta itemprop="description" content=" {{ $about->translated_description }}">
<meta itemprop="image" content="{{asset('/assets/images/cover.PNG')}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{$about->translated_title}}">
<meta name="twitter:description" content="{{ $about->translated_description }}">
<meta name="twitter:image:src" content="{{asset('/assets/images/cover.PNG')}}">
<meta itemprop="name" content="{{$about->translated_title}}"/>
<meta itemprop="description" content="{{ $about->translated_description }}"/>
<meta itemprop="image" content="{{asset('/assets/images/cover.PNG')}}"/>

@endsection
@section('content')
<style>
.carousel-item img {
    height:700px;
    object-fit: cover;
}
</style>   
<div class="container-fluid" style=" margin-top:120px;   padding-left: 80px;">

    <div class="row">
    
        <div class="col-md-12">
            <nav class="my-2 my-md-0 mr-md-3 home-menu">
                <a class="p-2 text-dark" href="{{ url(currentLocale().'/about') }}">About </a>
           
                @foreach ($citys as $city)
                <a class="p-2 text-dark" href="{{ url(currentLocale().'/item/'.$city->id.'/'.$city->slug) }}">{{$city->title_en}} </a>
                
                 @endforeach
         
            </nav>
        </div>
    
    
    
    </div>

</div>
<hr style="margin-top: 40px;margin-bottom: 0px;" />


<div class="container">
<br />
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
     


        @foreach($about['images'] as $key => $image)
        @if($image)

        <li data-target="#carouselExampleIndicators" data-slide-to="{{$key}}"  @if ($key == 0) class="active"  @endif></li>

        
        @endif
    @endforeach

    </ol>

    <div class="carousel-inner">
        

        @foreach($about['images'] as $key => $image)
        @if($image)

        <div class="carousel-item @if ($key == 0) active  @endif ">
            <img class="d-block w-100" src="/images/{{ $image->url }}" data-color="lightblue" alt="">
            
        </div>

        @endif
    @endforeach


       
    </div>

    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div>


<br /><br />
<div class="container">
<div class="row">
<div class="col-md-12">
  

    {!! $about->description_en !!}

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