@extends('website.template')
@section('title', __('labels.company_overview_meta_title'))
@section('content')

<div class="management-wrapper esg-page">
<section class="about-header-section mt-3">
    <div class="container-fluid px-3 px-lg-5">
        <div class="header-inner-box rounded-5 py-4 position-relative overflow-hidden">
            <div class="row align-items-center px-4 px-lg-5 position-relative" style="z-index: 2;">
                <div class="col-lg-8 header-text">
                    <nav class="header-breadcrumb mb-3 small" aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('home') }}" class="text-decoration-none node-color">{{ __('labels.home') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('company-overview') }}" class="text-decoration-none node-color">{{ __('labels.company_overview') }}</a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ route('sustainability') }}" class="text-decoration-none header-yallow">{{ __('labels.sustainability') }}</a>
                            </li>
                        </ol>
                    </nav>
                    <h2 class="fw-bold mb-3 text-start text-white">Environment, Social and Governance</h2>
                </div>
            </div>
                    </div>
    </div>
</section>
    <section class="esg-section py-5 px-3 px-lg-5">
        <div class="container-fluid px-3 px-lg-5">
            <div class="row align-items-start g-3 g-lg-4 esg-section__grid">
                <div class="col-12 col-lg-8">
                    <div class="mb-4">
                        <span class="btn btn-outline-primary esg-btn-outline-pill rounded-pill fw-bold px-4 py-2" role="note">{{ __('labels.esg_intro_pill') }}</span>
                    </div>
                    <p class="esg-report-text card-title-primary mb-0">
                        {{ __('labels.esg_intro_text') }}
                    </p>
                </div>

                <div class="col-12 col-lg-4 esg-downloads-col">
                    <div class="esg-downloads-panel">
                        <div class="esg-downloads-track">
                            <div class="esg-downloads-panel__title d-flex justify-content-start mb-2">
                                <span class="btn btn-outline-primary esg-btn-outline-pill esg-btn-outline-pill--heading rounded-pill fw-semibold text-start py-3 px-3 px-sm-4" role="note">{{ __('labels.esg_download_reports_pill') }}</span>
                            </div>
                            <div class="esg-downloads-scroll mt-4" role="region" aria-label="{{ __('labels.esg_download_reports_pill') }}">
                                @foreach (__('labels.esg_report_items') as $item)
                                    @php
                                        $file = (($item['file'] ?? '') !== '' && ($item['file'] ?? '') !== '#') ? $item['file'] : null;
                                        $viewRel = (($item['view'] ?? '') !== '' && ($item['view'] ?? '') !== '#') ? $item['view'] : null;
                                        $dlRel = (($item['download'] ?? '') !== '' && ($item['download'] ?? '') !== '#') ? $item['download'] : null;
                                        $viewRel = $viewRel ?? $file;
                                        $dlRel = $dlRel ?? $file;
                                        $viewUrl = $viewRel ? asset($viewRel) : null;
                                        $downloadUrl = $dlRel ? asset($dlRel) : null;
                                        $downloadName = ($item['download_name'] ?? '') !== '' ? $item['download_name'] : ($dlRel ? basename($dlRel) : 'report.pdf');
                                    @endphp
                                    <div class="btn btn-primary esg-btn-download-pill rounded-pill w-100 d-flex justify-content-between align-items-center text-white py-3 px-3 px-sm-4 shadow-none border-0" role="group" aria-label="{{ $item['label'] }}">
                                        <span class="fw-semibold text-truncate text-start me-2">{{ $item['label'] }}</span>
                                        <div class="d-flex align-items-center gap-2 flex-shrink-0">
                                            @if ($viewUrl)
                                                <a href="{{ $viewUrl }}"
                                                   class="esg-download-icon link-light text-decoration-none rounded-1 p-1"
                                                   target="_blank"
                                                   rel="noopener noreferrer"
                                                   aria-label="{{ __('labels.esg_view_report') }}: {{ $item['label'] }}">
                                                    <i class="bi bi-eye fs-6" aria-hidden="true"></i>
                                                </a>
                                            @else
                                                <span class="esg-download-icon link-light text-decoration-none rounded-1 p-1 opacity-50" tabindex="-1" aria-disabled="true" title="{{ __('labels.esg_missing_file') }}">
                                                    <i class="bi bi-eye fs-6" aria-hidden="true"></i>
                                                </span>
                                            @endif
                                            @if ($downloadUrl)
                                                <a href="{{ $downloadUrl }}"
                                                   class="esg-download-icon link-light text-decoration-none rounded-1 p-1"
                                                   download="{{ $downloadName }}"
                                                   aria-label="{{ __('labels.esg_download_file') }}: {{ $item['label'] }}">
                                                    <i class="bi bi-download fs-6" aria-hidden="true"></i>
                                                </a>
                                            @else
                                                <span class="esg-download-icon link-light text-decoration-none rounded-1 p-1 opacity-50" tabindex="-1" aria-disabled="true" title="{{ __('labels.esg_missing_file') }}">
                                                    <i class="bi bi-download fs-6" aria-hidden="true"></i>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection