@extends('layouts.app')

@section('nav-bar-context-icon')
<a class="btn bg-primary bg-dark text-white" type="button" href="{{route('task-create')}}">
    <img src="{{asset('resources/img/plus.png')}}" width="32" height="32">
</a>
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center mb-5">
        <div class="col-md-12">
            <h1>{{ __('app.activity.task.title.index') }}</h1>

            @if(count($users) == 1)
                <livewire:components.tasks :user_id="$users[0]->id">
            @else
                <div class="accordion" id="allTasks">
                    @foreach($users as $user) 
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button @if($user->id != $current_user_id) collapsed @endif" style="background-color:@if($user->color == null) #fff @else {{$user->color}} @endif" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{$user->id}}" aria-expanded="false" aria-controls="collapse_{{$user->id}}">
                                <span class='me-3' >
                                    @if($user->avatar != null)
                                        <img src="{{asset('resources/img/avatars/'. $user->avatar)}}" width="32" height="32" />
                                    @else
                                        <img src="{{asset('resources/img/avatars/unknown.png')}}" width="32" height="32" />
                                    @endif
                                </span>
                                {{$user->name}}
                            </button>
                        </h2>
                        <div id="collapse_{{$user->id}}" class="accordion-collapse collapse @if($user->id == $current_user_id) show @endif" >
                            <div class="accordion-body">
                                <livewire:components.tasks :user_id="$user->id">
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @endif

            <div class="accordion mt-3" id="allTasksWithoutAssignedUser">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_no_assigned_user" aria-expanded="false" aria-controls="collapse_no_assigned_user">
                            <span class='me-3' >
                                <img src="{{asset('resources/img/family.png')}}" width="32" height="32" />
                            </span>
                            Family
                        </button>
                    </h2>
                    <div id="collapse_no_assigned_user" class="accordion-collapse collapse " >
                        <div class="accordion-body">
                            <livewire:components.tasks :user_id="null">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection