@extends('layouts.marketing')

@section('title', 'Your Passport to Global Healthcare Careers – CuraHealthLine')

@section('content')
    <x-marketing-nav />

    <div class="mx-auto w-full max-w-6xl px-4 pt-20 pb-12 sm:px-6 sm:pt-24 lg:px-8 lg:pb-16">
        <main class="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
            <section
                class="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-[0_18px_45px_rgba(29,91,191,0.12)] ring-1 ring-slate-100 scroll-mt-24 lg:scroll-mt-32"
                style="background-image: url('{{ asset('images/home.png') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
            >
                <div class="absolute inset-0 bg-white/80"></div>
                <div class="relative grid gap-6 px-4 py-8 sm:px-6 sm:py-10 lg:grid-cols-2 lg:items-center lg:px-8">
                    <div class="space-y-4 sm:space-y-6 text-center max-w-3xl mx-auto">
                        <p class="inline-flex items-center gap-2 rounded-full bg-brand/10 px-3 py-1 text-xs sm:text-sm font-semibold text-brand">
                            Connecting Care, Globally.
                        </p>
                        <h1 class="font-heading text-2xl leading-tight text-ink sm:text-4xl lg:text-5xl text-center">
                            Your Passport to Global Healthcare Careers
                        </h1>
                        <div class="h-1 w-16 mx-auto bg-brand/60 rounded-full"></div>
                        <p class="max-w-2xl mx-auto text-center text-sm sm:text-base lg:text-lg text-slate-600">
                            From credentials to care-worldwide. Curated roles, visa-ready options, and a community that lifts healthcare workers and employers together.
                        </p>
                        <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
                            <a
                                href="{{ route('jobs.index') }}"
                                class="inline-flex items-center justify-center rounded-full bg-brand px-4 py-2.5 sm:px-5 sm:py-3 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition w-full sm:w-auto"
                            >
                                Search Jobs
                            </a>
                            @auth
                                @if(in_array(auth()->user()->role, ['nurse', 'user']))
                                    <a
                                        href="{{ route('nurse.connect.index') }}"
                                        class="inline-flex items-center justify-center rounded-full bg-teal px-4 py-2.5 sm:px-5 sm:py-3 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition w-full sm:w-auto"
                                    >
                                        Connect with Healthcare Workers
                                    </a>
                                @elseif(auth()->user()->role === 'employer')
                                    <a
                                        href="{{ route('employer.jobs.create') }}"
                                        class="inline-flex items-center justify-center rounded-full bg-teal px-4 py-2.5 sm:px-5 sm:py-3 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition w-full sm:w-auto"
                                    >
                                        Post a Job
                                    </a>
                                @endif
                            @else
                                <a
                                    href="{{ route('register', ['role' => 'nurse']) }}"
                                    class="inline-flex items-center justify-center rounded-full bg-teal px-4 py-2.5 sm:px-5 sm:py-3 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition w-full sm:w-auto"
                                >
                                    Join as Healthcare Worker
                                </a>
                                <a
                                    href="{{ route('register', ['role' => 'employer']) }}"
                                    class="inline-flex items-center justify-center rounded-full border border-teal/40 text-teal px-4 py-2.5 sm:px-5 sm:py-3 text-sm font-semibold hover:-translate-y-0.5 transition bg-white/80 w-full sm:w-auto"
                                >
                                    Post Jobs
                                </a>
                            @endauth
                        </div>
                    </div>
                    <div class="relative flex items-end justify-center lg:justify-end">
                        <div class="h-64 w-64 rounded-full bg-brand/20 blur-3xl lg:h-72 lg:w-72"></div>
                    </div>
                </div>

                <div class="relative border-t border-slate-100 bg-[#f7f9fb] px-4 py-4 sm:px-6 backdrop-blur">
                    <form action="{{ route('jobs.index') }}" method="GET" class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-[2fr_1.2fr_auto] lg:items-center">
                        <label class="sr-only" for="keywords">Job Title, Keywords, or Phrase</label>
                        <div class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-transparent px-3 py-3 shadow-sm">
                            <svg class="h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 104.5 4.5a7.5 7.5 0 0012.15 12.15z" />
                            </svg>
                            <input
                                id="keywords"
                                name="q"
                                type="text"
                                placeholder="Job Title, Keywords, or Phrase"
                                value="{{ request('q') }}"
                                class="w-full border-0 bg-transparent text-sm text-ink placeholder:text-slate-400 focus:outline-none"
                            >
                        </div>
                        <label class="sr-only" for="location">Select Location</label>
                        <div class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-transparent px-3 py-3 shadow-sm">
                            <svg class="h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11a3 3 0 110-6 3 3 0 010 6zm0 0c-4.418 0-8 1.79-8 4v1h16v-1c0-2.21-3.582-4-8-4z" />
                            </svg>
                            <input
                                id="location"
                                name="country"
                                type="text"
                                placeholder="Country or state"
                                value="{{ request('country') }}"
                                class="w-full border-0 bg-transparent text-sm text-ink placeholder:text-slate-400 focus:outline-none"
                            >
                        </div>
                        <button
                            type="submit"
                            class="w-full rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition sm:col-span-2 lg:col-span-1 lg:w-auto"
                        >
                            Search
                        </button>
                    </form>
                </div>
            </section>

            <!-- RIGHT COLUMN: Healthcare Workers Connect + Recommended Jobs -->
            <div class="space-y-6 min-w-0">
                <!-- Healthcare Workers Connect Section -->
                <aside
                    id="connect"
                    class="rounded-2xl sm:rounded-3xl border border-slate-100 bg-white p-4 sm:p-6 lg:p-7 shadow-[0_16px_30px_rgba(0,36,94,0.08)]"
                >
                    <div class="flex items-center gap-3 mb-4">
                        <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-teal/10 text-teal">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h6m-6 4h4m6-8h.01M17 12h.01M17 16h.01M12 21a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-teal">{{ $connectHighlights['title'] }}</p>
                            <h2 class="font-heading text-2xl text-ink">{{ $connectHighlights['subtitle'] }}</h2>
                        </div>
                    </div>
                    <p class="text-slate-600 mb-4">{{ $connectHighlights['copy'] }}</p>

                    <div class="space-y-2 mb-4">
                        @forelse ($nurses as $nurse)
                            <div class="rounded-xl border border-slate-100 p-3 shadow-sm hover:shadow-md transition">
                                <div class="flex items-start gap-3">
                                    <img src="{{ $nurse->displayAvatarUrl() }}" alt="{{ $nurse->name }}" class="h-12 w-12 rounded-full object-cover border-2 border-slate-200 flex-shrink-0" width="48" height="48" loading="lazy" decoding="async">
                                    <div class="flex-1 min-w-0">
                                        <div class="font-semibold text-ink text-sm truncate">{{ $nurse->name }}</div>
                                        @if(optional($nurse->nurseProfile)->headline)
                                            <div class="text-xs text-slate-600 mt-1 line-clamp-1">{{ optional($nurse->nurseProfile)->headline }}</div>
                                        @endif
                                        <div class="mt-2 flex flex-wrap gap-1">
                                            @if(optional($nurse->nurseProfile)->primary_specialty)
                                                <span class="inline-block text-xs bg-brand/10 text-brand px-2 py-0.5 rounded-full">
                                                    {{ optional($nurse->nurseProfile)->primary_specialty }}
                                                </span>
                                            @endif
                                            @if(optional($nurse->nurseProfile)->secondary_specialty)
                                                <span class="inline-block text-xs bg-slate-100 text-slate-700 px-2 py-0.5 rounded-full">
                                                    {{ optional($nurse->nurseProfile)->secondary_specialty }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="mt-2 text-xs text-slate-500 space-y-0.5">
                                            @if(optional($nurse->nurseProfile)->country)
                                                <div class="truncate">📍 {{ optional($nurse->nurseProfile)->city ? optional($nurse->nurseProfile)->city . ', ' : '' }}{{ optional($nurse->nurseProfile)->country }}</div>
                                            @endif
                                            @if(optional($nurse->nurseProfile)->years_experience || optional($nurse->nurseProfile)->experience_years)
                                                <div>💼 {{ optional($nurse->nurseProfile)->years_experience ?? optional($nurse->nurseProfile)->experience_years }} years</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 flex justify-end">
                                    @auth
                                        <a
                                            href="{{ route('user.profile.view', $nurse->id) }}"
                                            class="rounded-full bg-teal px-3 py-1.5 text-xs font-semibold text-white hover:bg-teal/90 active:bg-teal/95 transition whitespace-nowrap cursor-pointer shadow-sm hover:shadow-md inline-block"
                                        >
                                            View Profile
                                        </a>
                                    @else
                                        <a
                                            href="{{ route('login') }}"
                                            class="rounded-full bg-teal px-3 py-1.5 text-xs font-semibold text-white hover:bg-teal/90 active:bg-teal/95 transition whitespace-nowrap cursor-pointer shadow-sm hover:shadow-md inline-block"
                                        >
                                            Log in to view profiles
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        @empty
                            <p class="text-sm text-slate-500">No healthcare worker profiles yet.</p>
                        @endforelse
                    </div>
                    
                    <!-- Divider -->
                    <div class="my-6 border-t border-slate-100"></div>

                    <!-- Recommended Job Section Inside Card -->
                    <div>
                        <h3 class="font-semibold text-slate-900 mb-3 flex items-center gap-2">
                            <svg class="h-5 w-5 text-brand" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m0 0h.01M4 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m0 0h.01"/>
                            </svg>
                            Featured Job
                        </h3>

                        @if($recommendedJobs->first())
                            @php $job = $recommendedJobs->first() @endphp
                            <a href="{{ route('jobs.show', $job->id) }}" class="block rounded-lg border border-slate-100 p-3 shadow-sm hover:shadow-md hover:border-brand transition">
                                <h4 class="font-semibold text-ink text-sm line-clamp-1">{{ $job->title }}</h4>
                                @if($job->employer)
                                    <p class="text-xs text-slate-500 mt-1">{{ $job->employer->name }}</p>
                                @endif
                                
                                <div class="flex flex-wrap gap-1 mt-2">
                                    @if($job->location_city || $job->location_country)
                                        <span class="inline-flex items-center gap-1 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                            </svg>
                                            {{ $job->location_city ?? $job->location_country }}
                                        </span>
                                    @endif
                                    @if($job->employment_type)
                                        <span class="inline-block text-xs bg-green-50 text-green-700 px-2 py-0.5 rounded-full">
                                            {{ $job->employment_type }}
                                        </span>
                                    @endif
                                </div>
                                
                                @if($job->required_specialty)
                                    <p class="text-xs text-slate-600 mt-2">
                                        <span class="font-semibold">Specialty:</span> {{ $job->required_specialty }}
                                    </p>
                                @endif
                            </a>
                        @endif
                        
                        <a href="{{ route('jobs.index') }}" class="block mt-3 text-sm font-semibold text-brand hover:text-brand/80">
                            View all jobs →
                        </a>
                    </div>

                    <div class="mt-6 pt-6 border-t border-slate-100">
                        <ul class="space-y-2 mb-4">
                            <li class="flex items-start gap-2">
                                <span class="mt-1 h-2 w-2 rounded-full bg-teal flex-shrink-0"></span>
                                <span class="text-xs text-slate-700">Grow with peers in private communities.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="mt-1 h-2 w-2 rounded-full bg-teal flex-shrink-0"></span>
                                <span class="text-xs text-slate-700">Share docs securely with employers and mentors.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="mt-1 h-2 w-2 rounded-full bg-teal flex-shrink-0"></span>
                                <span class="text-xs text-slate-700">Message recruiters with a guided pipeline.</span>
                            </li>
                        </ul>
                        @auth
                            <a
                                href="{{ route('nurse.connect.index') }}"
                                class="inline-flex items-center gap-2 text-sm font-semibold text-brand hover:text-brand/80"
                            >
                                Explore Healthcare Worker Connect
                                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                            </a>
                        @else
                            <a
                                href="{{ route('register', ['role' => 'nurse']) }}"
                                class="inline-flex items-center gap-2 text-sm font-semibold text-brand hover:text-brand/80"
                            >
                                Join Healthcare Worker Connect
                                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                            </a>
                        @endauth
                    </div>
                </aside>
            </div>
        </main>

        <section id="jobs" class="mt-10 sm:mt-14 space-y-6 col-span-1 lg:col-span-2">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="min-w-0">
                    <p class="text-sm font-semibold text-brand">Featured Jobs</p>
                    <h3 class="font-heading text-xl sm:text-2xl text-ink">Roles healthcare workers are landing now</h3>
                </div>
                <a href="{{ route('jobs.index') }}" class="text-sm font-semibold text-ink hover:text-brand transition shrink-0">View all jobs</a>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @forelse ($featuredJobs as $job)
                    <article
                        class="flex flex-col gap-2 rounded-xl sm:rounded-2xl border border-slate-100 bg-white px-4 py-4 sm:px-5 shadow-sm hover:-translate-y-0.5 hover:shadow-[var(--shadow-card)] transition min-w-0"
                    >
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h4 class="font-semibold text-ink">{{ $job['title'] }}</h4>
                                <p class="text-sm text-slate-500">{{ $job['location'] }}</p>
                                <p class="text-xs text-slate-400 mt-1">{{ $job['employer'] }}</p>
                            </div>
                            <span class="rounded-full bg-soft px-3 py-1 text-xs font-semibold text-ink">
                                {{ $job['type'] }}
                            </span>
                        </div>
                        <div class="flex items-center gap-3 text-xs text-slate-500">
                            <span class="flex items-center gap-1">
                                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                                Posted {{ $job['published_at'] ? $job['published_at']->diffForHumans() : 'recently' }}
                            </span>
                            <span class="flex items-center gap-1">
                                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                                {{ $job['applications_count'] }} {{ $job['applications_count'] === 1 ? 'applicant' : 'applicants' }}
                            </span>
                        </div>
                        <div class="space-y-1">
                            <p class="text-xs font-semibold text-slate-600">Requirements:</p>
                            <div class="flex flex-wrap gap-1.5">
                                @if($job['required_license'])
                                    <span class="rounded-full bg-brand/10 px-2 py-0.5 text-xs text-brand">{{ $job['required_license'] }}</span>
                                @endif
                                @if($job['required_specialty'])
                                    <span class="rounded-full bg-teal/10 px-2 py-0.5 text-xs text-teal">{{ $job['required_specialty'] }}</span>
                                @endif
                                @if($job['required_experience_years'])
                                    <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700">{{ $job['required_experience_years'] }}+ years</span>
                                @endif
                                @if($job['required_exam'])
                                    <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700">{{ $job['required_exam'] }}</span>
                                @endif
                                @if($job['required_language'])
                                    <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700">{{ $job['required_language'] }}</span>
                                @endif
                                @if($job['work_mode'])
                                    <span class="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">{{ $job['work_mode'] }}</span>
                                @endif
                            </div>
                        </div>
                        @if($job['visa_sponsorship'] || $job['relocation_package'] || $job['housing_provided'])
                            <div class="space-y-1">
                                <p class="text-xs font-semibold text-slate-600">Benefits:</p>
                                <div class="flex flex-wrap gap-1.5">
                                    @if($job['visa_sponsorship'])
                                        <span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs text-purple-700">✓ Visa Sponsorship</span>
                                    @endif
                                    @if($job['relocation_package'])
                                        <span class="rounded-full bg-orange-100 px-2 py-0.5 text-xs text-orange-700">✓ Relocation Package</span>
                                    @endif
                                    @if($job['housing_provided'])
                                        <span class="rounded-full bg-pink-100 px-2 py-0.5 text-xs text-pink-700">✓ Housing Provided</span>
                                    @endif
                                </div>
                            </div>
                        @endif
                        <a href="{{ route('jobs.show', $job['id']) }}" class="flex items-center gap-3 text-sm font-semibold text-brand hover:text-brand/80 transition cursor-pointer">
                            View details & Apply
                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </article>
                @empty
                    <div class="col-span-1 sm:col-span-2 text-center py-8 text-slate-500">
                        No jobs available at the moment. Check back soon!
                    </div>
                @endforelse
            </div>
        </section>

        <section class="mt-10 sm:mt-14 rounded-2xl sm:rounded-3xl border border-slate-100 bg-sky-panel p-6 sm:p-8 shadow-[var(--shadow-card)] col-span-1 lg:col-span-2">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-[0.55fr_1fr] md:items-center md:gap-8">
                <div class="space-y-3 min-w-0">
                    <p class="text-sm font-semibold text-brand">How CuraHealthLine Works</p>
                    <h3 class="font-heading text-2xl sm:text-3xl text-ink">Built for healthcare workers, recruiters, and admins</h3>
                    <p class="text-slate-600">
                        From profile to placement, stay organized with transparent status updates and guided next steps.
                    </p>
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
                    @foreach ($howItWorks as $index => $item)
                        <div class="rounded-xl sm:rounded-2xl border border-slate-100 bg-soft px-4 py-5 shadow-sm min-w-0">
                            <div class="flex h-9 w-9 items-center justify-center rounded-full bg-brand text-sm font-semibold text-white">
                                {{ $index + 1 }}
                            </div>
                            <h4 class="mt-3 text-sm font-semibold text-ink">{{ $item['label'] }}</h4>
                            <p class="mt-2 text-sm text-slate-600">{{ $item['copy'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="mt-10 sm:mt-12 rounded-2xl sm:rounded-3xl bg-brand px-6 py-8 sm:px-8 sm:py-10 text-white shadow-[var(--shadow-card)] col-span-1 lg:col-span-2">
            <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between md:gap-8">
                <div class="space-y-2 min-w-0">
                    <p class="text-sm font-semibold text-white/80">Join Our Network</p>
                    <h3 class="font-heading text-2xl sm:text-3xl">Ready to start your next chapter?</h3>
                    <p class="max-w-2xl text-sm sm:text-base text-white/85">
                        Create your profile in minutes, browse curated roles, and get matched with employers who value
                        your expertise.
                    </p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:gap-3 shrink-0">
                    <a
                        @auth
                            href="{{ route('jobs.index') }}"
                        @else
                            href="{{ route('register', ['role' => 'nurse']) }}"
                        @endauth
                        class="inline-flex items-center justify-center rounded-full bg-white px-5 py-3 text-sm font-semibold text-brand shadow hover:-translate-y-0.5 transition w-full sm:w-auto"
                    >
                        Get Started
                    </a>
                    <a
                        href="{{ route('contact') }}"
                        class="inline-flex items-center justify-center rounded-full border border-white/40 px-5 py-3 text-sm font-semibold text-white hover:-translate-y-0.5 transition w-full sm:w-auto"
                    >
                        Talk to us
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection