{{--
  Template Name: Frontpage Template
--}}

@extends('layouts.app', ['no_sidebar' => true])

@section('content')
<div class="hero-section has-pdy-xl">
  <div class="container">
    {{-- <div class="columnss is-multiline is-vcentered"> --}}
      <div id="content" class="column is-10-tablet is-offset-1-tablet is-6-widescreen is-offset-3-widescreen">
        <div class="logo">
          {!! $site_logo !!}
        </div>
        <div id="searchBox">
          @include('partials.block-searchbox', [
          // 'action' => '',
            'placeholder' => __('enter keywords...', 'sage'),
            'container_class' => 'has-mgt-xs',
          ])
        </div>
        @include('partials.block-btn-browseall', [
          'p_class' => 'is-size-5 has-pdt-xs has-text-right-desktop has-text-centered has-text-warning is-stroke-light',
          'a_class' => 'has-text-warning'
        ])
      </div>
      <div class="column is-12 is-10-widescreen is-offset-1-widescreen">
        <div id="tags">
          @foreach($top_merchants as $merchant)
            @php $tooltip = sprintf( __('View by category: %s', 'sage'), $merchant->name ) @endphp
            <div class="column post category-{{ $merchant->slug }}">
              <a class="box is-size-6-mobile" href="{{ $merchant->url ?: get_category_link($merchant->term_id) }}" title="{{ $tooltip }}">
                <figure class="image is-48x48 is-rounded is-flex" data-content="{{ substr($merchant->name, 0, 1) }}">
                  @if($merchant->image_id)
                    {!! wp_get_attachment_image( $merchant->image_id, 'detail', false, ['class' => ''] ) !!}
                  @endif
                </figure>
                <h3><strong>{{ $merchant->name }}</strong></h3>
              </a>
            </div>
          @endforeach
        </div>
      </div>
    {{-- </div> --}}
  </div>
</div>

@if ($latest_news && count($latest_news) >= 5)
<div class="news-section has-background-dark has-pdy-sm">
  <div class="container">
  {{-- <div class="columns is-multiline">
    @foreach ($latest_news as $news)
      <div class="column is-12">
        <h2>{{ $news->post_title }}</h2>
        <p>{!! wp_trim_words( $news->post_excerpt, 35 ) !!}</p>
      </div>
    @endforeach
  </div> --}}
    @if ($menu_primary)
    <div class="page-header">
      <a class="tile is-parent" href="{{ $menu_primary->url }}" title="{{ $menu_primary->name }}">
        <h1 class="title has-text-light">
          <span class="icon">
            <i class="fa fa-comments" aria-hidden="true"></i>
          </span>
        {{ $menu_primary->name }}</h1>
      </a>
    </div>
    @endif
    <div id="news" class="tile is-flex-direction-row-reverse">
      <div class="tile is-parent">
        <article class="tile is-child box is-size-6-mobile has-post-thumbnail news-0">
          <a href="{{ $latest_news[0]->url }}" title="{{ $latest_news[0]->title }}">
            <figure class="image is-2by1">
              {!! $latest_news[0]->image !!}
            </figure>
            <div class="content">
              @if ($latest_news[0]->category)
              <div class="control">
                <div class="tags has-addons">
                  <span class="tag is-danger"><i class="fa fa-tag"></i></span>
                  <span class="tag is-light is-danger">{{ $latest_news[0]->category->name }}</span>
                </div>
              </div>
              @endif
              <h3 class="is-size-4">{!! $latest_news[0]->title !!}</h3>
              @if ($latest_news[0]->content)
              <p class="has-text-dark is-size-5">{!! $latest_news[0]->content !!}</p>
              @endif
            </div>
          </a>
        </article>
      </div>
      <div class="tile is-vertical is-9">
        <div class="tile">
          <div class="tile is-8 is-parent">
            <article class="tile is-child box is-size-6-mobile is-paddingless featured-content">
              {!! $hero_carousel !!}
              {{-- @php the_content() @endphp --}}
              {{-- @php dynamic_sidebar('sidebar-front-page') @endphp --}}
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child box is-size-6-mobile has-post-thumbnail news-1">
              <a class="is-flex-mobile" href="{{ $latest_news[1]->url }}" title="{{ $latest_news[1]->title }}">
                <figure class="image is-2by1">
                  {!! $latest_news[1]->image !!}
                </figure>
                <div class="content">
                  @if ($latest_news[1]->category)
                  <div class="control">
                    <div class="tags has-addons">
                      <span class="tag is-success"><i class="fa fa-tag"></i></span>
                      <span class="tag is-light is-success">{{ $latest_news[1]->category->name }}</span>
                    </div>
                  </div>
                  @endif
                  <h3 class="is-size-4">{!! $latest_news[1]->title !!}</h3>
                  @if ($latest_news[1]->content)
                  <p class="is-hidden-tablet">{!! $latest_news[1]->content !!}</p>
                  @endif
                </div>
              </a>
            </article>
          </div>
        </div>
        <div class="tile">
          <div class="tile is-parent">
            <article class="tile is-child box is-size-6-mobile has-post-thumbnail news-2">
              <a class="is-flex-mobile" href="{{ $latest_news[2]->url }}" title="{{ $latest_news[2]->title }}">
                <figure class="image is-2by1 is-hidden-tablet">
                  {!! $latest_news[2]->image !!}
                </figure>
                <div class="content">
                  @if ($latest_news[2]->category)
                  <div class="control">
                    <div class="tags has-addons">
                      <span class="tag is-link"><i class="fa fa-tag"></i></span>
                      <span class="tag is-light is-link">{{ $latest_news[2]->category->name }}</span>
                    </div>
                  </div>
                  @endif
                  <h3 class="is-size-4">{!! $latest_news[2]->title !!}</h3>
                  @if ($latest_news[2]->content)
                  <p class="is-hidden-tablet">{!! $latest_news[2]->content !!}</p>
                  @endif
                </div>
              </a>
            </article>
          </div>
          <div class="tile is-8 is-vertical">
            <div class="tile">
              <div class="tile is-parent">
                <article class="tile is-child box is-size-6-mobile has-post-thumbnail news-3">
                  <a class="is-flex-mobile" href="{{ $latest_news[3]->url }}" title="{{ $latest_news[3]->title }}">
                    <figure class="image is-2by1 is-hidden-tablet">
                      {!! $latest_news[3]->image !!}
                    </figure>
                    <div class="content">
                      @if ($latest_news[3]->category)
                      <div class="control">
                        <div class="tags has-addons">
                          <span class="tag is-link"><i class="fa fa-tag"></i></span>
                          <span class="tag is-light is-link">{{ $latest_news[3]->category->name }}</span>
                        </div>
                      </div>
                      @endif
                      <h3 class="is-size-4">{!! $latest_news[3]->title !!}</h3>
                      @if ($latest_news[3]->content)
                      <p class="is-hidden-tablet">{!! $latest_news[3]->content !!}</p>
                      @endif
                    </div>
                  </a>
                </article>
              </div>
              <div class="tile is-parent">
                <article class="tile is-child box is-size-6-mobile has-post-thumbnail news-4">
                  <a class="is-flex-mobile" href="{{ $latest_news[4]->url }}" title="{{ $latest_news[4]->title }}">
                    <figure class="image is-2by1 is-hidden-tablet">
                      {!! $latest_news[4]->image !!}
                    </figure>
                    <div class="content">
                      @if ($latest_news[4]->category)
                      <div class="control">
                        <div class="tags has-addons">
                          <span class="tag is-link"><i class="fa fa-tag"></i></span>
                          <span class="tag is-light is-link">{{ $latest_news[4]->category->name }}</span>
                        </div>
                      </div>
                      @endif
                      <h3 class="is-size-4">{!! $latest_news[4]->title !!}</h3>
                      @if ($latest_news[4]->content)
                      <p class="is-hidden-tablet">{!! $latest_news[4]->content !!}</p>
                      @endif
                    </div>
                  </a>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endif
@endsection