@extends('layouts.base')

@section('meta')
    <title>{{$data->meta_title}}</title>
    <meta name="description" content="{{$data->meta_description}}">
@endsection

@section('content')
    @include('layouts.partials.header')
    @include('layouts.partials.breadcrumb')

    @include('layouts.partials.mobileNavigation')


    <div class="feature-content">
        <div class="background">
        </div>
        <div class="content-container inner">
            <div class="feature-nav">
                <div class="header">
                    <h4>{{$data->translation->nav_name}}</h4>
                </div>
                <ul>
                    {{--<li><a href="/{{$data->links->features->route}}">@lang('translations.introduction')</a></li>--}}
                    @foreach($projects as $project)
                        <li @if($project->id == $data->id) class="active" @endif><a
                                    href="/{{$project->translation->route->route}}">{{$project->translation->title}}</a>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="feature-detail">
                <div class="intro">
                    <div class="text">
                        <h1>{{$data->translation->title}}</h1>
                        <h2>{{$data->translation->sub_title}}</h2>
                    </div>
                    {{--<div class="animation-placeholder">--}}
                        {{--<div class="cloud-image animation">--}}
                            {{--<span class="cloud"></span>--}}
                            {{--<span class="arrow"></span>--}}
                            {{--<span class="computer"></span>--}}
                            {{--<span class="tablet"></span>--}}
                            {{--<span class="mobile"></span>--}}
                        {{--</div>--}}
                        {{--<p class="cloud-text">@lang('translations.cloudDevices')</p>--}}
                    {{--</div>--}}
                </div>

                @if(isset($data->translation->description))
                    @include('layouts.partials.dynamic.dynamicBlocks', ['dynamicDescription' => $data->translation->description])
                @endif

                <div class="other-features">
                    <p>
                        @lang('translations.lookOtherFeatures'):
                    </p>

                    <div class="placeholder">
                        @foreach($data->otherFeatures as $otherFeature)
                            <div class="feature-block">
                                <a href="/{{$otherFeature->translation->route->route}}">
                                    {{--@include('layouts.styling.window')--}}

                                    <div class="content">
                                        <h5>{{$otherFeature->translation->title}}</h5>
                                        <p>{{$otherFeature->translation->sub_title}}</p>
                                        <span>@lang('translations.readMore')</span>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>


    @include('layouts.partials.projects.overviewFeatures', ['extraClass' => 'detail-page'])

    @include('layouts.partials.orangeRow')

    @include('layouts.partials.dataSecurityRow')

    @include('layouts.partials.footer')
@endsection

@section('extra-js')
    <script type="text/javascript" src="/js/projectDetail.js?v=2"></script>
@endsection