@extends('frontend.layouts.main', array('body_class' => 'blog-page'))

@section('content')
<div
    class="blog"
    data-controller="components/blog"
    data-pages="{{ $page }}"
    data-cats="{{ json_encode($cats) }}"
    data-search="{{ $searchString }}">

    <div class="blog__content">
        <div class="blog__intro">
            <div class="blog__intro-content">
                <a href="{{ lang_url('/blog') }}">
                    <h2 class="blog__intro-title">
                        <span data-text-search></span>
                        @foreach($categories as $category)
                            {{ in_array($category->id, $cats) ? $category->title : '' }}
                        @endforeach
                    </h2>
                </a>
                <span class="blog__intro-count" data-text-total></span>
            </div>

            <div class="blog__search">
                <span class="blog__icon-search">
                    @include('frontend.svg.search')
                </span>
                <input type="text" name="blog-search" class="blog__search-input" value="{{{ $searchString }}}" placeholder="@lang('frontend.search_in_the_blog')"/>
            </div>
        </div>
    </div>

    <div class="blog__filter-holder" data-role="filter-holder" style="display: none;">
        <div class="blog__filter" data-role="filter">
            <div class="blog__filter-bar">
                <div class="blog__filter-control">
                    <div class="blog__filter-toggle">
                        <a href="#" data-action="toggle-filter">
                            <span class="blog__filter-label">@lang('frontend.filter_by_category')</span>
                            <span class="blog__filter-label--mobile">@lang('frontend.filters')</span>
                        </a>
                    </div>
                    {{-- <div class="blog__search" data-role="search">
                        <input type="text" name="blog-search" value="{{{ $searchString }}}" placeholder="@lang('frontend.search_in_the_blog')"/>
                        <a href="#" class="blog__clear-search" data-action="clear-search"></a>
                    </div> --}}
                </div>
                <div class="blog__filter-items-wrapper">
                    <div class="blog__filter-items" data-role="filter-items">
                        <div class="blog__filter-item {{ empty($cats) ? 'js-active' : '' }}" data-role="filter-item">
                            <input type="checkbox" name="all-cats" value="all" id="category_all" {{ empty($cats) ? 'checked' : '' }}/>
                            <label for="category_all">
                                All
                            </label>
                        </div>
                        @foreach($categories as $category)
                        <div class="blog__filter-item {{ in_array($category->id, $cats) ? 'js-active' : '' }} blog__filter-item-{{ $category->id }}" data-role="filter-item">
                            <input type="checkbox" name="cats" value="{{{ $category->id }}}" id="cats_{{{ $category->id }}}" {{ in_array($category->id, $cats) ? 'checked' : '' }}/>
                            <label for="cats_{{{ $category->id }}}">
                                {{ $category->title }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="blog__list-container">
        <div class="blog__list">
            <div class="blog__posts-list" data-role="postsList">
                @for($i = 1; $i < $page; $i++)
                    <div class="blog__page" data-page="{{ $i }}" data-loaded="0"></div>
                @endfor

                @include('frontend.templates.components.blog_list', array('page' => $page))
            </div>
        </div>
        <div class="loading" data-role="loading">
            <span class="fa fa-cog fa-spin"></span>
        </div>
        <div class="blog__nav">
            <a href="?page=2" class="std-button" data-action="load-more">Load more</a>
        </div>
    </div>

    @include('frontend.templates.blocks.newsletter-v2')
</div>
@stop