@extends('layouts.app')

@section('title', 'Gestion des Contrats')

@section('content')
<div class="row mb-4">
    <div class="col-md-8">
        <p class="text-muted">Gérer les contrats de l'agglomération ({{ $contracts->total() }})</p>
    </div>
    <div class="col-md-4 text-end">
        @if(auth()->user()->isManager())
        <a href="{{ route('contracts.create') }}" class="btn btn-primary shadow-sm">
            <i class="bi bi-plus-lg"></i> Nouveau Contrat
        </a>
        @endif
    </div>
</div>

<div class="contracts-list-section">
    <!-- Vue Component -->
    <contracts-table :initial-contracts="{{ json_encode($contracts) }}"></contracts-table>

    <div class="pagination mt-3 justify-content-center">
        {{ $contracts->links() }} 
        <!-- Note: If using Vue-driven pagination, links() might conflict unless handled properly, but here we just pass initial page -->
    </div>
</div>
@endsection