<div>
    <div class="flex justify-between mb-4">
        <input type="text" wire:model.live="search" placeholder="{{ __('Search') }}..." class="input input-bordered w-64" />
        <select wire:model.live="statusFilter" class="select select-bordered">
            <option value="">{{ __('All') }}</option>
            <option value="planning">{{ __('Planning') }}</option>
            <option value="in_progress">{{ __('In progress') }}</option>
            <option value="paused">{{ __('Paused') }}</option>
            <option value="completed">{{ __('Completed') }}</option>
        </select>
        @can('create projects')
            <a href="{{ route('projects.create') }}" class="btn btn-primary">+ {{ __('New Project') }}</a>
        @endcan
    </div>

    <div class="overflow-x-auto">
        <table class="table table-zebra">
            <thead>
                <tr><th>{{ __('Name') }}</th><th>{{ __('Address') }}</th><th>{{ __('Status') }}</th><th>{{ __('Progress') }}</th><th>{{ __('Actions') }}</th></tr>
            </thead>
            <tbody>
                @foreach($projects as $project)
                <tr>
                    <td>{{ $project->name }}</td>
                    <td>{{ $project->address }}</td>
                    <td>{{ __(ucfirst(str_replace('_', ' ', $project->status))) }}</td>
                    <td>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-primary h-2.5 rounded-full" style="width: {{ $project->phases->avg('progress_percent') }}%"></div>
                        </div>
                    </td>
                    <td>
                        <a href="{{ route('projects.dashboard', $project) }}" class="btn btn-sm btn-outline gap-1">
                            <x-heroicon-o-squares-2x2 class="w-3.5 h-3.5" />
                            Dashboard
                        </a>
                        <a href="{{ route('projects.map', $project) }}" class="btn btn-sm btn-outline gap-1">
                            <x-heroicon-o-map class="w-3.5 h-3.5" />
                            {{ __('Map') }}
                        </a>
                        @can('edit projects')
                            <a href="{{ route('projects.edit', $project) }}" class="btn btn-sm btn-warning">{{ __('Edit') }}</a>
                        @endcan
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{ $projects->links() }}
</div>
