<div id="{{ $sliderId }}-wrapper" class="slider-wrapper">
    <div class="nav-wrap">
        <a class="nav-btn" href="#"></a>
    </div>
    <div id="{{ $sliderId }}" class="slider-main">
        @foreach($slides as $slide)
        <div class="slide blue-scheme">
            <div class="slide__wrap">
                <div class="slide__img" style="background-image: url({{ getMediaUrl($slide->image->filename, '1920x768') }});"></div>
                <div class="slider-overlay"></div>
                <div class="slider-control-overlay"></div>
                <div class="slide-contents">
                    <div class="slide-content-wrap">
                        <div class="content-box">
                            <div class="subtitle">
                                {{ $slide->topic }}
                            </div>
                            <h1 class="project-title">
                                {{ $slide->title }}
                            </h1>
                            <div class="project-extrainfo">
                                <h2>
                                    {{ $slide->subtitle }}
                                </h2>
                                @if($slide->slide_type == 'testimonial' && !empty($slide->testimonial))

                                <div class="testimonial">
                                    {!! $slide->testimonial->quote !!}
                                    <div class="person-detail-block">
                                    @if($slide->testimonial->photo)
                                    <div class="face-image">
                                        {!! getMediaImg($slide->testimonial->photo, '200x200', htmlspecialchars($slide->testimonial->title)) !!}
                                    </div>
                                    @endif
                                    <div class="person-details">
                                        <b>{{ $slide->testimonial->title }}</b>
                                        <br>
                                        <i>
                                            {{ $slide->testimonial->role }}
                                            {{ $slide->testimonial->role && $slide->testimonial->company ? trans('frontend.at') : '' }}
                                        </i>
                                        <b>{{ $slide->testimonial->company }}</b>
                                    </div>
                                    </div>
                                </div>
                                @endif
                                <div class="whity">
                                    {!! $slide->content !!}
                                </div>
                            </div>
                            {!! generateLink($slide->call_to_action, 'std-button ' . 'blue-button') !!}
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @if(sizeof($slides) > 1 && !empty($showToolbar))
    <div class="slides-label-row">
        <div class="col-lg-24 col-md-24 col-sm-24 col-xl-12 slide-label-holder ">
            @foreach ($slides as $key => $slide)
            <div class="slide-label blue-scheme col-xs-{{ 24 / sizeof($slides) }} {{ $key == 0 ? 'active' : '' }}" id="label-{{ $key + 1 }}">
                <div class="label-slide-content">
                    <div class="inactive-title">
                        {{ $slide->title }}
                    </div>
                    <div class="active-title">
                        {{ $slide->title }}
                    </div>

                </div>
            </div>
            @endforeach
            <div class="active-bar col-xs-{{ 24 / sizeof($slides) }}">
                <span></span>
            </div>
        </div>
    </div>
    @endif
</div>

<script>
    $(function(){
        var slider = new Eae.View.NewSlider({
            el: $("#{{ $sliderId }}-wrapper")
        });
    })
</script>
