@extends('master', ['menuLayout' => true])

@section('title', !empty($page->translation->meta_title) ? $page->translation->meta_title : config('site.company.name'))
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-menu" id="trainingApp" data-language-id="{{ app()->getLanguage()->id }}">

        <filter-bar v-on:load-trainings="loadTrainings" v-bind:class="{ 'is-menu-bar-active': isFiltersActive}">
            <template slot="breadcrumb">
                @include('components.breadcrumb', [ 'breadcrumbNameOverrule' => [ 2 => $page->translation->name] ] )
            </template>
            <template slot="pin-icon">
                @include('components.icons.pin')
            </template>
        </filter-bar>


        <div class="l-menu__content">
            <div class="u-spacing-mb5">
                @if(isset($components) && $components->has('main'))
                    @include('organisms.intro', [
                        'introDescription' => $components->get('main')->text,
                    ])
                @endif

                <div class="l-menu__filter-button">
                    <open-filters-bar-button>
                        <template slot="pin-icon">
                            @include('components.icons.pin')
                        </template>
                    </open-filters-bar-button>
                </div>
            </div>

            <div class="u-spacing-pb6" v-if="!isLoading">

                <h3 v-if="upcomingTrainings.length > 1" class="u-spacing-mt5  u-spacing-mb3  u-fs-base  u-fw-extraBold">Startdatum</h3>
                <div v-if="upcomingTrainings.length === 0" class="u-spacing-mt3  u-spacing-pb6">
                    <h2  class="u-message  u-message--block  u-fs-base  u-fw-extraBold">@lang('site/trainings.no_trainings_found', ['contactLink' => $links->contact->route, 'productsLink' => $links->products->route ] )</h2>
                </div>

                    <training-card
                            v-for="upcomingTraining in upcomingTrainings"
                            :key="upcomingTraining.c4_id"
                            :training-card="upcomingTraining"
                            :resource-path="'{{ $links->trainings->route }}'"
                    >
                        <template slot="pin-icon">
                            @include('components.icons.pin')
                        </template>
                        <template slot="arrowheadRight-icon">
                            @include('components.icons.arrowheadRight')
                        </template>
                    </training-card>
            </div>
            <div v-if="hasMorePages && !isLoading" class="u-text-align-center" @click="loadMoreTrainings">
                @include('components.button', [
                    'buttonText' => __('site/trainings.more_trainings'),
                    'isButton' => true,
                ])
            </div>
        </div>
    </div>

    <script>
        window._translations = @json(__('vueTranslations'))
    </script>

@endsection