@extends('layouts.app')

@section('title', __('partners.page_title'))
@section('meta_description', __('partners.meta_description'))

@section('content')
<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('partners.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}">{{ __('partners.breadcrumb_home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('partners.breadcrumb_partners') }}</li>
            </ul>
        </div>
    </div>
</div>

<section class="section-gap-equal">
    <div class="container">
        <div class="section-title section-center mb--50" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <span class="pre-title">{{ __('navigation.partners') }}</span>
            <h2 class="title">{{ __('partners.page_title') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
            <p>{{ __('partners.intro') }}</p>
        </div>

        @if($partners->isEmpty())
        <div class="alert alert-info text-center mb-0" role="status">
            {{ __('partners.empty') }}
        </div>
        @else
        <div class="row row--30">
            @foreach($partners as $partner)
            <div class="col-lg-4 col-md-6 col-12 mb-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                <div class="edu-blog blog-style-4 h-100 partner-page-card">
                    <div class="inner h-100 d-flex flex-column">
                        <div class="thumbnail partner-page-thumb mb-0 border-0">
                            @if($partner->link)
                            <a href="{{ $partner->link }}" target="_blank" rel="noopener noreferrer" class="partner-page-thumb-link">
                                @if($partner->image_url)
                                <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="partner-page-thumb-img" loading="lazy">
                                @else
                                <span class="partner-page-thumb-fallback">{{ $partner->name }}</span>
                                @endif
                            </a>
                            @else
                            <span class="partner-page-thumb-link is-static">
                                @if($partner->image_url)
                                <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="partner-page-thumb-img" loading="lazy">
                                @else
                                <span class="partner-page-thumb-fallback">{{ $partner->name }}</span>
                                @endif
                            </span>
                            @endif
                        </div>
                        <div class="content flex-grow-1 d-flex flex-column">
                            <h5 class="title mb-2">
                                @if($partner->link)
                                <a href="{{ $partner->link }}" target="_blank" rel="noopener noreferrer">{{ $partner->name }}</a>
                                @else
                                {{ $partner->name }}
                                @endif
                            </h5>
                            @if($partner->description)
                            <p class="mb-3">{{ $partner->description }}</p>
                            @endif
                            @if($partner->content)
                            <div class="partner-page-content small text-muted flex-grow-1 mb-3">
                                @sanitized($partner->content)
                            </div>
                            @endif
                            @if($partner->link)
                            <div class="read-more-btn mt-auto">
                                <a class="edu-btn btn-border btn-medium" href="{{ $partner->link }}" target="_blank" rel="noopener noreferrer">
                                    {{ __('partners.visit_website') }} <i class="icon-4"></i>
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endsection

@push('styles')
<style>
.partner-page-card .partner-page-thumb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1.25rem;
    background: var(--color-lighten01, #f8f9fa);
    border-radius: 10px 10px 0 0;
}
.partner-page-card .partner-page-thumb-img {
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.partner-page-card .partner-page-thumb-fallback {
    font-weight: 600;
    color: var(--color-heading, #1a1a1a);
    text-align: center;
}
.partner-page-content :last-child {
    margin-bottom: 0;
}
</style>
@endpush