@extends('music.layouts.main')
@section('content')
    <section>
        <h1 class="th"><i class="fa fa-music"></i><span>Descargar {{ $keyword }} MP3 Gratis</span></h1>
        <div class="descripcion">
            <p>
                {{ $description }}
            </p>
        </div>
        @if (count($videos) > 0)
            <ul class="list yt lista_music youtube">
                @foreach ($videos as $item)
                    @if ($loop->first)
                        <li yt="{{ $item->id }}" class="playing">
                        @else
                        <li yt="{{ $item->id }}">
                    @endif
                    <figure><img src="https://img.youtube.com/vi/{{ $item->id }}/mqdefault.jpg"></figure>
                    <div>
                        <h3>{{ $item->title }}</h3>
                        @if (isset($item->duration))
                            <span><b><i class="far fa-clock"></i> {{ $item->duration }} min</b>
                                <b> <i class="fas fa-rocket"></i> 320 kbps</b>
                                <b><i class="far fa-hdd"></i> {{ $item->size }}</b></span>
                        @endif
                        <span class="btn"><a href="#" onclick="return false;" class="play"><i
                                    class="far fa-play-circle"></i>
                                <b>Escuchar</b></a><a href="#" onclick="return false;" class="descargar tbe"
                                be="{{ $item->id }}"><i class="fa fa-download"></i> Descargar</a></span>
                    </div>
                    </li>
                @endforeach
            </ul>
            <div class="video_player" style="width:1px;height:1px;padding: 0px;"><iframe id="video"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="50"
                    height="30"
                    src="https://www.youtube.com/embed/{{ $videos->first()->id }}?controls=1&amp;autoplay=0&amp;wmode=opaque&amp;showinfo=0&amp;rel=0&amp;cc_load_policy=0&amp;enablejsapi=1&amp;iv_load_policy=3"
                    frameborder="0" style="display:block;" title="{{ $videos->first()->title }}"></iframe></div>
            <style type="text/css">
                .video_player {
                    overflow: hidden;
                    width: 0px;
                    position: absolute;
                    left: 0px;
                }

                .descarga {
                    width: 100% !important;
                    padding: 10px 0px !important;
                }
            </style>
        @endif
        <div class="descripcion">
            <h3>BAJAR MUSICA DE {{ $keyword }} EN FORMATO MP3</h3>
            <p>
                {{ randomSentences($articles, 0, 4) }}
            </p>
            <p>
                {{ randomSentences($articles, 5, 8) }}
            </p>
        </div>
        <h2 class="th"><i class="fa fa-download"></i> Top Canciones Nuevas</h2>
        <ol class="list">
            @foreach (getRandomPosts(20) as $item)
                <li><a href="{{ $siteUrl }}{{ postPath($item->keyword) }}">{{ $item->keyword }}</a></li>
            @endforeach
        </ol>
    </section>
@endsection