@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Header Banner -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;" class="reveal">
        <div>
          <nav class="breadcrumbs" aria-label="Breadcrumb" style="margin-bottom: 0.5rem;">
            <a href="{{ route('home') }}">Home</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('jobseeker.dashboard') }}">Candidate Portal</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>Saved Vacancies</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            My Bookmarked Vacancies
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Saved job opportunities for quick review, comparison, and one-click application submission.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          <a href="{{ route('jobs.index') }}" class="btn btn-primary">
            <i class="fas fa-search"></i> Browse All Vacancies
          </a>
          <a href="{{ route('jobseeker.dashboard') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Dashboard
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Saved Jobs List Section -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container">
      
      @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); color: var(--success); padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
      @endif

      <div class="job-cards-list">
        @forelse($savedJobs as $job)
          <x-job-card :job="$job" />
        @empty
          <div class="card reveal" style="text-align: center; padding: 4rem 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl);">
            <i class="far fa-bookmark" style="font-size: 3.5rem; color: var(--border-light); margin-bottom: 1.25rem; display: block;"></i>
            <h3 style="font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-heading);">You Have No Saved Vacancies</h3>
            <p style="color: var(--text-muted); max-width: 480px; margin: 0 auto 1.5rem auto; font-size: 0.95rem;">
              Click the bookmark icon on any job card while browsing the careers portal to save opportunities here for later.
            </p>
            <a href="{{ route('jobs.index') }}" class="btn btn-primary">
              <i class="fas fa-search"></i> Explore Open Openings
            </a>
          </div>
        @endforelse
      </div>

      <!-- Pagination -->
      <div style="margin-top: 3rem; display: flex; justify-content: center;">
        {{ $savedJobs->links() }}
      </div>
    </div>
  </section>
</main>
@endsection