@extends('front.layouts.demo')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
    <link rel="stylesheet" href="/css/blog.css">
@endsection
@section('share_image'){{$post->image}}@endsection
@section('share_title'){{$post->title}}@endsection
@section('content')

    <div class="hero subarticle-hero--blog__detalle">

    </div>

    <section class="container blog-hero-container__detalle">
        <div class="content-hero-blog__detalle mt-5">
            <div class="hero-img-detalle" style="background-image:url({{ $post->image }});">
                <a href="/blog" class="btn-volver bodoni"> <  {{ trans('site.title_back') }}</a>
            </div>
            <div class="container-lap-detalle">
                <div class="container-text">
                    <h1 class="bodoni">{{ $post->title }}</h1>
                    <span id="published-date">{{ $post->publish_date }}</span>
                    {!! $post->article !!}
                    {{-- Share buttons --}}
                    <div class="row">
                        <div class="fb-share-button" data-href="{{ url()->full() }}" data-layout="button" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartir</a></div>
                        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-lang="es" data-show-count="false">Tweet</a>
                    </div>
                </div>
                <section id="send-msj-mobile" class="section section--subarticle container">
                        <div class="polo-contact">
                            <h1 class="polo-contact__headline">{{ trans('site.write_comment') }}</h1>
                            <form class="polo-contact__form" id="salto-lessons-form" @submit.prevent="sendContact('Lecciones de Salto',false,'reservaciones@lapatronapoloclub.com')">
                                <div class="polo-contact__upper">
                                    <div class="form-control polo-contact__control">
                                        <label class="polo-contact__label" for="">{{ trans('site.contact_name') }}</label>
                                        <input v-model="contact.name" class="polo-contact__input" type="text" name="" value="" placeholder="{{ trans('site.contact_name') }}" required>
                                    </div>
                                </div>
                                 <div class="polo-contact__lower">
                                    <div class="form-control polo-contact__control polo-contact__control--tall">
                                        <label class="polo-contact__label" for="">{{ trans('site.contact_comment') }}</label>
                                        <textarea v-model="contact.body" class="polo-contact__input polo-contact__input--textarea" name="name"></textarea>
                                    </div>
                                 </div>
                            </form>
                            <div class="polo-contact__submit">
                                <p class="polo-contact__legal">
                                    {{ trans('site.text_privacy') }}
                                    <a @click.prevent="privacidad = true">
                                        {{ trans('site.link_privacy') }}
                                    </a>
                                </p>
                                <button form="salto-lessons-form" class="button button--submit polo-contact__button" type="submit" name="button">{{ trans('site.btn_send') }}</button>
                            </div>
                        </div>
                </section>
                <aside class="aside-news">
                    <div class="container-article-blog container-article-blog__detalle">
                        @foreach ($latestPosts as $lpost)
                            <a href="{{ $lpost->id }}" class="article-blog-item article-blog-item__detalle">
                                <div class="item item__img" style="background-image: url({{ $lpost->image }})">
                                </div>
                                <div class="item item__text">
                                    <div class="item-text-ribbon item-text-ribbon__detalle">
                                        <h1>{{ $lpost->title }}</h1>
                                        <p>{{ $lpost->overview }}...</p>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <div class="container">
        @foreach ($post->comments as $comment)
            <comment :comment="{{$comment}}"></comment>
        @endforeach
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
    <script type="text/javascript">
        var publishedDate = document.getElementById('published-date');
        console.log(publishedDate);
        var formatteddate = document.createTextNode(new Date(publishedDate.innerText).toLocaleDateString('es-MX', { weekday: 'long', month: 'long', day: 'numeric' }));
        publishedDate.replaceChild(formatteddate, publishedDate.childNodes[0]);
    </script>
@endsection