@extends('layouts.public')
@section('title', 'Candidates & Manifesto — ' . $election->title)

@section('content')
<div class="page-hero">
    <div class="container">
        <h1 class="fw-bold mb-1"><i class="bi bi-journal-text me-2"></i>{{ $election->title }}</h1>
        <p class="mb-0 opacity-75">Candidates, Positions & Manifestos</p>
        @if($election->manifesto_end)
        <small class="opacity-60"><i class="bi bi-clock me-1"></i>Manifesto period closes: {{ $election->manifesto_end->format('d M Y H:i') }}</small>
        @endif
    </div>
</div>

<div class="container py-5">
    @if($positions->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-inbox display-4 text-muted"></i>
            <p class="mt-3 text-muted">No positions have been set up yet. Check back soon.</p>
        </div>
    @else
        @foreach($positions as $position)
        <section class="mb-5" id="position-{{ $position->id }}">
            <div class="d-flex align-items-center mb-4 gap-3">
                <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white" style="width:44px;height:44px;min-width:44px;">
                    <i class="bi bi-briefcase-fill"></i>
                </div>
                <div>
                    <h2 class="mb-0 fw-bold fs-4">{{ $position->name }}</h2>
                    @if($position->description)
                        <small class="text-muted">{{ $position->description }}</small>
                    @endif
                </div>
                <span class="ms-auto badge bg-primary rounded-pill">{{ $position->candidates->count() }} candidate(s)</span>
            </div>

            <div class="row g-4">
                @forelse($position->candidates as $candidate)
                <div class="col-md-4 col-sm-6">
                    <div class="card h-100">
                        <div class="card-body p-4">
                            <div class="mb-3">
                                @if($candidate->photo)
                                    <img src="{{ asset('storage/' . $candidate->photo) }}" alt="{{ $candidate->name }}" class="candidate-photo">
                                @else
                                    <div class="candidate-photo-placeholder">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                @endif
                            </div>
                            <span class="badge-position mb-2 d-inline-block">{{ $position->name }}</span>
                            <h5 class="fw-bold mb-2">{{ $candidate->name }}</h5>
                            @if($candidate->campaign_message)
                                <p class="text-muted small mb-3">{{ Str::limit($candidate->campaign_message, 120) }}</p>
                            @endif
                            <a href="{{ route('manifesto.candidate', $candidate) }}" class="btn btn-outline-primary btn-sm w-100">
                                <i class="bi bi-eye me-1"></i>View Full Profile
                            </a>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <p class="text-muted"><i class="bi bi-info-circle me-1"></i>No candidates registered for this position yet.</p>
                </div>
                @endforelse
            </div>
        </section>
        <hr class="my-4">
        @endforeach
    @endif
</div>
@endsection