@extends('layout.main')

@section('title', __('El Tema'))

<!-- ======================================================= -->
@section('content')

    <section id="article">


        {{-- <div class="main-photo" style="background-image: url('{{ asset('img/ficg_prensa.jpg') }}')">
            <img src="{{ asset('img/ficg_patrocinios.jpg') }}" alt="" style="max-height: 600px;">
        </div> --}}
        <div class="main-title">
            <h1>{{ __('El Tema') }}</h1>
            <h2>{{ __('La Corriente del Golfo') }}</h2>
        </div>
        <div class="main-content two-content">
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/_5VcPnXcbwE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/_5VcPnXcbwE">El Tema - Episodio 1: Agua</a></li>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/FDu1klqrplo">El Tema - Episodio 2: Aire</a></li>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/k8fTOgeWFvQ">El Tema - Episodio 3: Carbón</a></li>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/V50anej7W8o">El Tema - Episodio 4: Energía</a></li>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/Et-fc5gPTMs">El Tema - Episodio 5: Océanos</a></li>
                    <li><a href="#!" data-src="https://www.youtube.com/embed/cI-b4FfRvoY">El Tema - Episodio 6: Alimento</a></li>
                </ul>
            </div>
        </div>

    </section>

@endsection


<!-- ======================================================* -->

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/article.min.css') }}">
    <style>
        .two-content {
            display: flex;
        }
        .video {
            width: 80%;
        }
        .list {
            width: 20%
        }
        .list ul {
            list-style: none;
        }
        .list li {
            display: block;
        }
        li {
            padding: 10px 5px;
            margin-bottom: 2px;
        }
        .list a {
            font-size: 15px;
            text-decoration: none;
            color: #000;
        }
        .list a:hover {
            color: #575756;
        }
        @media screen and ( max-width: 768px ) {
            .two-content {
                flex-wrap: wrap;
            }
            .video, .list {
                width: 100%;
            }
            .list ul {
                padding-left: 0;
            }
        }

    </style>
@endpush

@push('scripts')
    <script>
        $( document ).ready( function() {
            console.log("Sfdsfsd");

            $(".list a").on('click', function() {
                var source = $(this).attr('data-src');
                console.log(source);

                $('.video iframe').attr('src', source);
                //var iFrame = $('#borderlessFrame');
                //iFrame.load('http://theurltoload.com')
            });
        });
    </script>
@endpush