@extends('layouts.web')

@section('title', webText('menu.articles.title'))
@section('class', 'page--news')

@section('content')

    <section class="teaser teaser--small" style="background-image: url({{ asset('images/teaser-co-je-noveho.jpg') }});">

        <div class="container d-flex align-items-center justify-content-center justify-content-lg-between">
            <h1 class="teaser__title">{{ webText('menu.articles.title') }}</h1>
        </div>

    </section>

    @include('layouts.includes.nav')

    <section class="section space-p-t-80 space-p-b-0">

        <!-- Circle -->
    	<img data-src="{{ asset('images/circle.svg') }}" alt="" class="circle lazy">

        <div class="container">
            <div class="news d-flex align-item-stretch justify-content-center space-m-b-100">
                @foreach($articlesStart as $article)
                    @include('web.includes.news.articleBox', ['article' => $article])
                @endforeach

                @if($articlesMore->count())
                <div id="articles-expanded" style="display:none">

                    @foreach($articlesMore as $article)
                        @include('web.includes.news.articleBox', ['article' => $article])
                    @endforeach

                </div>
                @endif
            </div>

            @if($articlesMore->count())
            <div class="text-center">
                <a href="javascript:expandArticles()" class="btn" id="btn-expand-articles">{{ webText('menu.articles.older') }}</a>
            </div>
            <script>
                var expandArticles = function() {
                    $('#btn-expand-articles').parent().hide();
                    var otherArticles = $('#articles-expanded').html();
                    $('#articles-expanded').parent().append(otherArticles);
                };
            </script>
            @endif
        </div>
    </section>

    <!-- Logos -->
    @include('web.includes.logos')

@endsection