@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
    <link rel="stylesheet" href="/css/blog.css">
@endsection
@section('content')
    <div  id="mobile-menu" class="mobile-menu">
        <button @click="animateMenu"  id="mobile-menu-button" class="mobile-menu__button"><i class="fas fa-bars"></i></button>
    </div>
    <header class="internal-header">
        <div class="container">
            @include('front.partials.sticky')
              <ul id="main-nav" class="main-nav main-nav--subarticle" role="navigation">
                 @include('front.partials.menu')
              </ul>
        </div>
    </header>
    <div class="hero subarticle-hero--blog">
        <div class="container blog-hero-container blog-hero-container">
            <div class="content-hero-blog">
                <a href="blog/post/{{ $featuredPosts[0]->id }}" class="hero-blog-item1" style="background-image:url({{ $featuredPosts[0]->image }})">
                    <div class="background-gradient">
                        <span class="">Blog</span>
                        <div class="text-news">
                            <h2 class="brand">The chef blog</h2>
                            <h1 class="title-first-item">{{ $featuredPosts[0]->title }}</h1>
                            <p>{{ $featuredPosts[0]->overview }}</p>
                        </div>
                    </div>
                </a>
                <div class="hero-blog-item2">
                    <a href="blog/post/{{ $featuredPosts[1]->id }}" class="item2-news" style="background-image: url({{ $featuredPosts[1]->image }})" >
                        <div class="background-gradient">
                            <div class="text-news" >
                                <h1 class="tittle-second-item">{{ $featuredPosts[1]->title }}</h1>
                                <p>{{ $featuredPosts[1]->overview }}</p>
                            </div>
                        </div>
                    </a>
                    <a href="blog/post/{{ $featuredPosts[2]->id }}" class="item2-news" style="background-image:url({{ $featuredPosts[2]->image }})">
                        <div class="background-gradient">
                            <div class="text-news" >
                                <h1 class="tittle-second-item">{{ $featuredPosts[2]->title }}</h1>
                                <p>{{ $featuredPosts[2]->overview }}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container ribbon__container">
        <nav class="ribbon">
            <div class="ribbon-item ribbon-item--nosotros">
                <div class="ribbon-item__copy ribbon-item__copy--title">
                    <h1 class="ribbon-item__heading">Blog</h1>
                </div>
            </div>
        </nav>
    </div>

    <section class="section section--subarticle">
        <div class="container">
            <div class="container-article-blog">
                @foreach ($posts as $post)
                    <a href="blog/post/{{ $post->id }}" class="article-blog-item">
                        <div class="item item__img" style="background-image: url({{ $post->image }})">

                        </div>
                        <div class="item item__text">
                            <div class="item-text-ribbon">
                                <h1>{{$post->title}}</h1>
                                <p>{{$post->overview}}...</p>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection