@extends('layouts.site')

@section('meta_title')
    {{ __('site.industries_title') }} — {{ brand_name() }}
@endsection

@section('title', __('site.industries_title'))

@section('content')
    <div class="site-container space-y-8 pb-10 px-2 pt-6" data-reveal="page">
        <header class="px-2" data-reveal="soft">
            <h1 class="text-2xl font-bold">{{ __('site.industries_title') }}</h1>
            <p class="mt-2 max-w-2xl text-sm text-brand-muted">{{ __('site.industries_subtitle') }}</p>
        </header>

        @if ($industries->isEmpty())
            <p class="rounded-lg border border-dashed border-brand-border px-6 py-12 text-center text-brand-muted">{{ __('site.industries_empty') }}</p>
        @else
            <ul class="site-industry-activities site-industry-activities--index">
                @foreach ($industries as $industry)
                    <li>
                        <a href="{{ site_industry_url($industry, app()->getLocale()) }}" class="site-industry-activities__card">
                            @if ($industry->image)
                                <img
                                    src="{{ site_media_url($industry->image) }}"
                                    alt=""
                                    class="site-industry-activities__image"
                                    loading="lazy"
                                    decoding="async"
                                />
                            @endif
                            <div class="site-industry-activities__content">
                                <h2>{{ locale_category_name($industry) }}</h2>
                                @php($description = locale_field($industry, 'description'))
                                @if ($description)
                                    <p>{{ \Illuminate\Support\Str::limit($description, 140) }}</p>
                                @endif
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
@endsection