@extends('layouts.app')

@section('title-head','tasks')

@section('content')
    <div class="btn btn-secondary m-5">
        <a class="text-white" href="{{ route('tasks.create')}}">Add Task</a>
    </div>

    <div class="d-flex justify-content-center align-items-center">
        <div>
        @if(count($tasks))
        <div>
            <h1 class="beige-text">There are tasks!</h1>
            <h2 class="text-center">The list is</h2>
        </div>
        @endif
        @forelse( $tasks as $task)
            <div>
                <a href="{{ route('tasks.show', ['task' => $task->id]) }}">{{ $task->title}}</a>
            </div>
            @empty
            <div class="text-white text-center">There are no tasks!</div>
        @endforelse
        @if ($tasks->count())
            <div class="d-flex justify-content-center">
                <nav>
                    {{ $tasks->links() }}
                </nav>
            </div>
        @endif
    </div>
    </div>
@endsection