@extends('layouts.app')

@section('nav-bar-context-icon')
@if($emails_count > 0)
<a class="btn" type="button" href="{{route('emails')}}">
    <img src="{{asset('resources/img/email.png')}}" width="32" height="32" />
</a>
@endif
<a class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
    <img src="{{asset('resources/img/create.png')}}" width="32" height="32" />
</a>
@endsection

@section('content')

<div class="offcanvas offcanvas-end bg-charcoal" style="width:130px" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-body small">
        <div class="d-flex flex-column justify-content-center">
            <a class="btn btn-lg mt-3 me-2 border-0 bg-charcoal d-flex flex-column align-items-center" href="{{route('note-create')}}" style="width:100px">
                <img src="{{asset('resources/img/item-note.png')}}" width="48" height="48" />
                <small>{{ __('app.activity.note.type') }}</small>
            </a>
            <a class="btn btn-lg mt-3 me-2 border-0 bg-charcoal d-flex flex-column align-items-center" href="{{route('task-create')}}" style="width:100px">
                <img src="{{asset('resources/img/item-task.png')}}" width="48" height="48" />
                <small>{{ __('app.activity.task.type') }}</small>
            </a>
            <a class="btn btn-lg mt-3 me-2 border-0 bg-charcoal d-flex flex-column align-items-center" href="{{route('event-create')}}" style="width:100px">
                <img src="{{asset('resources/img/item-event.png')}}" width="48" height="48" />
                <small>{{ __('app.activity.event.type') }}</small>
            </a>
            <hr>
            <a class="btn btn-lg mt-1 me-2 border-0 bg-charcoal d-flex flex-column align-items-center" href="{{route('topic-create')}}" style="width:100px">
                <img src="{{asset('resources/img/topic.png')}}" width="48" height="48" />
                <small>{{ __('app.activity.topic.type') }}</small>
            </a>
        </div>
    </div>
</div>

<div class="px-3 bg-charcoal w-100 py-1" style="margin-top:10px">
    <livewire:components.quick-add>
</div>

<div class="px-3">
    <div class="row justify-content-center">
        <div class="col-md-12 mt-3">
            <livewire:pages.home.desktop>
        </div>
    </div>
</div>

@endsection