@extends('layouts.base')
@section('heading')
     {{ __('Processes') }}
@endsection
@section('info')
    Your processes
@endsection
@section('focus_action')
    <form action="{{ route('processes.create') }}" method="get">
        @csrf
        <button type="submit" class="text-sm text-blue-500 hover:text-blue-700">
            ADD A NEW PROCESS +
        </button>
    </form>
@endsection
@section('body')
    <div>
        <div class="p-2 sm:grid sm:grid-cols-3 md:grid-cols-3_ gap-2">
            @foreach ($processes as $process)
                @php                
                    $process = CamundaProcess::objCamundaProcess($process);
                @endphp
                <div class="m-2">
                    <a href="{{ route('processes.show', $process->id) }}" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
                        <div class="flex items-center_ space-x-3">
                            {{-- <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg> --}}
                            <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">{{ $process->name ?? null }}</h3>
                            {{-- {{ $process->id }} --}}
                        </div>
                        <p class="text-slate-500 group-hover:text-white text-sm">Manage Documents for your {{ $process->name ?? null }} - {{ $process->key ?? null }}</p>
                        {{-- @foreach ($process->tasks() as $task)

                            @php
                                dump($task);
                            @endphp
                            
                        @endforeach --}}
                        {{ count(($process->tasks()) ?? []) }} tasks
                        <br>
                        {{ count(($process->instances()) ?? []) }} instances

                    </a>
                </div>
            @endforeach
        </div>
        
    </div>
@endsection