@extends('layouts.app')

@section('content')
<div id="article">

    <div class="jumbotron jumbotron-fluid bg-cover p-0">
        <div class="gradient-overlay"></div>
        <div class="container-fluid">
            <div class="container">
                <div class="p-0 pb-6">
                    <h1 class="pl-2 pr-5">{{$article->title}}</h1><br/>
                    <h3 class="pl-2 pb-1">{{$article->subtitle}} @if(!empty($article->author))<small><br/> por {{$article->author->name}} {{$article->author->surname}}</small>@endif</h3>
                </div>
                <div class="bottom-position"  style="z-index: 1 !important">
                    <div  style="z-index: 1">
                        <p class="pl-2 lead info mb-5">¿Quiénes fueron los maestros de Beethoven? ¿Quiénes sus amigos? ¿Quiénes sus discípulos? ¿Cómo encontró su propia voz en la fuga, en la armonía, en el contrapunto y en la composición? Descubra esto y más a través este artículo.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pb-6">
      <div class="container p-0 d-flex flex-row">
        <div class="w-70 pr-10">
            {!! $article->content !!}
        </div>
        <div class="w-30 info-article">
            <div class="px-2 py-4 pl-4">
                <h4 class="orange" style="font-weight: 400 !important">
                    25 de junio <br>
                    14hrs. GMT
                </h4><br>
                <h3 style="font-size:2rem !important; font-weight: bold !important">
                    MXTeatro
                </h3><br>
                <h3>
                    <a href="" class="live-broadcast"> Transmisión en vivo </a>
                </h3>

            </div>
            <div class="bg-light px-2 py-4 pl-4">
            <h3> <small>Comparte</small>  </h3>
            <div class="d-flex flex-row px-2">
                <a href=""><img src="{{ asset('/icons/ac_twitter.png') }}" alt=""></a>
                <a><img src="{{ asset('/icons/ac_facebook.png') }}" alt=""></a>
                <a><img src="{{ asset('/icons/ac_instagram.png') }}" alt=""></a>
            </div>
            </div> <br>
            <div class="bg-light px-2 py-4 pl-4 pr-4">
                <h3> <small>En colaboración</small>  </h3>

                <div class="text-left">
                    <img src="{{ asset('/img/article/logo_cultura.png') }}" alt="" class="w-75">
                    <img src="{{ asset('/img/article/INAH.png') }}" alt="" class="w-100">
                </div>
                </div><br>
            <div class="px-2 py-4 pl-4 pr-4">
                <h3>Claves</h3>
                <p class="bg-light">#Beethoven</p>
                <p class="bg-light">#Grandes maestros</p>
                <p class="bg-light">#Alemania</p>
            </div>
            <div class="bg-light px-2 py-4 pl-4">
                <h3>
                    <small>Sobre el autor</small><br>
                    Fernando Alvarez del Castillo
                </h3>
                <img class="pb-4" src="https://www.imer.mx/opus/wp-content/uploads/sites/13/2013/08/Fernando-%C3%81lvarez-del-Castillo.jpg" alt="">
                <br>
                <span class="info">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quas in assumenda non odio dicta, praesentium voluptatem repellendus reprehenderit quasi velit, ipsa laudantium eius optio neque? Distinctio sapiente tempore vero!
            </span><br>
            <button class="web-btn outline small my-4">
                <span>Más del autor</span>
            </button>
            </div>

         </div>

      </div>

   </div>
   
</div>

    <!-- Site map Start here -->
    <!-- Site map End-->

@endsection