@extends('layouts.frontend')
@section('content')
<div class="section pattern-bg inner-section wf-section">
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="ttitle">{{ $project->title }}</div>
        <div>{{ $project->show->title ?? '' }}</div>
        <div>{{ $project->location->title ?? '' }}</div>
        <div>{{ $project->industry->title ?? '' }}</div>
    </div>
    @if($image = $project->getMedia('top_image'))
    <div class="container container-full w-container" data-ix="fade-from-bottom">
        <div class="content-b"><img src="{{ $image->path }}" alt="" class="img-full"></div>
    </div>
    @endif
    <div class="container w-container">
        <div class="max-width-1000">
            @if(($awards = $project->getMedia('awards', true)) && $awards->count())
            <div class="content-b" data-ix="fade-from-bottom">
                <div><strong>@__('Awards')</strong></div>
                @foreach($project->getMedia('awards', true) as $award)
                <div class="content-b-20">
                    <img src="{{ $award->getResizedImage(600) }}" alt="" class="max-width-600">
                </div>
                @endforeach
            </div>
            @endif
            @foreach($project->getMedia('images', true) as $image)
                <div class="content-b-20" data-ix="fade-from-bottom">
                    <img src="{{ $image->getResizedImage(2000) }}" alt="">
                </div>
            @endforeach
            <div class="content-b" data-ix="fade-from-bottom">
                <a href="{{ $page->getDetailUrl() }}" class="grey-back-btn w-inline-block" data-ix="grey-back-btn">
                    <div class="btn-text">@__('BACK')</div>
                    <div class="grey-back-btn-arrow-b">
                        <div class="grey-back-btn-arrow">
                            <img src="{{ asset_frontend('images/grey-back-arrow.svg') }}" loading="lazy" alt="" class="btn-arrow-img">
                        </div>
                        <div class="grey-back-btn-arrow-hover" data-ix="opacity-0">
                            <img src="{{ asset_frontend('images/icon-arrow-white-left.svg') }}" loading="lazy" alt="" class="btn-arrow-img">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
@if($other_projects->count())
<div class="section grey-bg inner-section wf-section">
    <div class="container w-container">
        <div class="ttitle">@__('Other Projects')</div>
        <div class="grey-text">{{ $page->sub_title }}</div>
        <div class="content-b">
            <div class="portfolio-other-projects-row">
                @foreach($other_projects as $other_project)
                <div class="portfolio-other-projects-col">
                    <a href="{{ $other_project->getDetailUrl() }}" aria-current="page" class="portfolio-link-b w-inline-block w--current" data-ix="portfolio-link-b">
                        <div class="portfolio-img-b">
                            @if($project_type = $other_project->project_type)
                            <div class="portfolio-type" style="background-color: {{ color($project_type->color)  }};">
                                <div>{{ $project_type->title }}</div>
                            </div>
                            @endif
                            @if($image = $other_project->getMedia('top_image'))
                                <img src="{{ $image->getResizedImage(786, 580) }}" alt="" class="portfolio-img desktop">
                                <img src="{{ $image->getResizedImage(786, 580) }}" loading="lazy" alt="" class="portfolio-img mobile">
                            @endif
                        </div>
                        <div class="content-b-10">
                            <div><strong>{{ $other_project->title }}</strong></div>
                            <div>{{ $other_project->show->title ?? '' }}</div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif
@endsection