@extends('web.layouts.layout')

@section('content')
<!-- --------------------- start news ---------------------- -->
<section class="news-det section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="info">
                    <div class="row">
                        <div class="col-lg-9">
                            <!-- Swiper -->
                            <div class="swiper-container gallery-top">
                                <div class="swiper-wrapper">
                                    @foreach( $photos as $photo )
                                    <div class="swiper-slide">
                                        <img src="{{ $photo }}" alt="{{ $article->currentDescription->title }}" />
                                    </div>
                                    @endforeach
                                </div>
                                <!-- Add Arrows -->
                                <div class="swiper-button-next swiper-button-white"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="swiper-container gallery-thumbs">
                                <div class="swiper-wrapper">
                                    @foreach( $photos as $photo )
                                    <div class="swiper-slide">
                                        <img src="{{ $photo }}" alt="{{ $article->currentDescription->title }}" />
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="mt-4"> {{ $article->currentDescription->title }} </h4>
                    {!! $article->currentDescription->description !!}
                </div>
            </div>
        </div>
    </div>
</section>

@if($article->video)
<!-- ---------- news-video -------------- -->
<div class="news-video section-padding bg-gray">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="vid">
                    @if($article->video_type == 2)
                        <video width="100%" height="400" src="{{ asset($article->video) }}" type="video/mp4" controls></video>
                    @else
                        <iframe width="100%" height="400" src="{{ $article->video }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection