@extends('layouts.app')

@section('title', __('navigation.portfolio'))

@section('content')
<!-- Portfolio Start -->
<div class="portfolio mt-100">
    <div class="container">
        <div class="section-header">
            <h2>{{ __('navigation.portfolio_title') }}</h2>
            <p>{{ __('navigation.portfolio_subtitle') }}</p>
        </div>

        <div class="row portfolio-container">
            @foreach($portfolios as $portfolio)
            <div class="col-lg-4 col-md-6 portfolio-item">
                <div class="portfolio-img">
                    <img src="{{ asset('storage/' . $portfolio->image) }}" class="img-fluid" alt="Portfolio">
                    <a href="{{ asset('storage/' . $portfolio->image) }}" data-lightbox="portfolio" data-title="{{ $portfolio->{'title_' . app()->getLocale()} }}" class="link-preview" title="Preview"><i class="ion-md-eye"></i></a>
                    <a href="{{ route('portfolio.show', ['locale' => app()->getLocale(), 'slug' => $portfolio->slug]) }}" class="link-details" title="More Details"><i class="ion-md-open"></i></a>
                </div>

                <div class="portfolio-info">
                    <h3>{{ $portfolio->{'title_' . app()->getLocale()} }}</h3>
                    <p>{{ $portfolio->{'category_' . app()->getLocale()} ?? 'Category' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Portfolio End -->
@endsection