@extends('layouts.app')
@section('content')
<section class="max-w-[1100px] mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-[#041627]">Volumes & Issues Archive</h1>
    <p class="text-sm text-gray-600 mt-1">Browse published articles grouped by volume and issue.</p>
  </div>

  <div class="space-y-4">
    @forelse($volumes as $volume)
      <article class="bg-white border border-[#aeb6bf] rounded">
        <div class="px-4 py-3 border-b border-[#e3e6ea]">
          <h2 class="text-lg font-semibold text-[#041627]">{{ $volume->title }}</h2>
          @if($volume->year)<p class="text-xs text-gray-600 mt-1">{{ $volume->year }}</p>@endif
        </div>
        <div class="p-4 space-y-4">
          @forelse($volume->issues as $i)
            <section class="border border-[#e3e6ea] rounded">
              <div class="px-4 py-3 border-b border-[#edf0f2] bg-[#f7f9fc]">
                <h3 class="font-semibold text-[#041627]">{{ $i->title }}</h3>
                <p class="text-xs text-gray-600 mt-1">
                  @if($i->published_on)
                    Published: {{ \Illuminate\Support\Carbon::parse($i->published_on)->format('M d, Y') }}
                  @endif
                </p>
              </div>
              <div class="p-4">
                @forelse($i->articles as $a)
                  <div class="py-2 border-b border-[#edf0f2] last:border-b-0">
                    <a href="{{ route('public.article', $a) }}" class="font-semibold text-[#041627] hover:text-[#3b6090]">
                      {{ $a->title }}
                    </a>
                    <p class="text-sm text-gray-600">{{ $a->author->display_name ?? 'NEROSA Editorial' }}</p>
                  </div>
                @empty
                  <p class="text-sm text-gray-600">No published articles in this issue yet.</p>
                @endforelse
                <div class="mt-4">
                  <a href="{{ route('public.articles', ['volume_id' => $volume->id, 'issue_id' => $i->id]) }}" class="text-sm font-semibold text-[#041627] hover:text-[#3b6090]">View this issue in article listing</a>
                </div>
              </div>
            </section>
          @empty
            <div class="text-sm text-gray-600">No issues found under this volume.</div>
          @endforelse
        </div>
      </article>
    @empty
      <div class="bg-white border border-[#aeb6bf] rounded p-6 text-gray-600">No volumes found.</div>
    @endforelse
  </div>
</section>
@endsection