@extends('frontend.layouts.main', array('scripts' => array(
    path_asset('path.frontend.js_path') . '/view/slider.js',
    path_asset('path.frontend.js_path') . '/view/slider_mobile.js',
    path_asset('path.frontend.js_path') . '/view/filter.js',
    path_asset('path.frontend.js_path') . '/view/case-studies.js')))
@section('content')
<div id="case-study-maincontainer" class="case-study-template">
    <h3 class="title-page">
        @lang('frontend.title_clients')
    </h3>
    <div class="sectors-hero">
        @foreach ($sectors as $key => $sector)
            @if ($key==3)
                @break;
            @endif
            @if (!empty($sector->highlight) && $sector->highlight === 'true')
                <div class="sector-tile">
                    <div class="tile-bg" style="background-image:url({{ getMediaUrl($sector->highlight_image->filename, '1440x768') }});background-position: center {{ $sector->highlight_image_pos ? $sector->highlight_image_pos : 'center' }} -120px;"></div>
                    <div class="tile-content">
                        <h3>{{ $sector->title }}</h3>
                        <p>{{ $sector->highlight_text }}</p>
                        <a href="{{ lang_url($sector->lang_uri) }}" class="submit roundcorner white">{{ $sector->highlight_cta }}</a>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
    <div class="case-studies-filters closed content-filter" id="case-studies-filters">
        <div class="filter-bar max-content-width container-fluid">
            <div class="row">
                <div class="col-sm-22 col-sm-offset-1">
                    <div class="title">@lang('frontend.filters') <span class="fa fa-filter"></span></div>
                    <div class="sector-filter">
                        @foreach ($sectors as $sector)
                        <div class="filter-sector filter-item" data-filter_type="sector" data-filter_value="{{ $sector->id }}">
                            <a href="#"><span class="fa fa-circle-o"></span><span class="fa  fa-circle"></span>{{ $sector->title }}</a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="row filter-separator"></div>
    </div>
    <div class="row page-contents-holder main-content-holder no-gutter">
        <div class="col-sm-22 col-sm-offset-1">
            <div class="container-fluid">
                <div class="row case-studies-wrapper"></div>
                <div class="loading">
                    <span class="fa fa-cog fa-spin"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        var caseStudies = new Eae.View.CaseStudies({
            el: $("#case-study-maincontainer")
        });
    })
</script>
@stop