@props([
    'includeTitle' => true,
    'tickets' => [],
    'onTheClock' => false,
    'groupBy' => '',
    'allProjects' => [],
    'allAssignedprojects' => [],
    'projectFilter' => '',

])

<div class="clear">
    <div class="row" id="yourToDoContainer">
        <div class="col-md-12">
            <div class="tw-mb-l">
                @if($allAssignedprojects)
                    <form method="get">
                    @dispatchEvent("beforeTodoWidgetGroupByDropdown")

                    <a href="javascript:void(0);"
                       id="ticket_new_link"
                        class="btn btn-primary"
                       onclick="jQuery('#ticket_new').toggle('fast', function() { jQuery(this).find('input[name=headline]').focus(); });">
                        <i class="fa fa-plus"></i> Add To-Do
                    </a>
                    <div class="btn-group left">
                        <button class="btn btn-link dropdown-toggle f-right" type="button" data-toggle="dropdown">{!! __("links.group_by") !!}: {{ __('groupByLabel.'.$groupBy) }}</button>
                        <ul class="dropdown-menu">
                            <li><span class="radio">
                                    <input type="radio" name="groupBy"
                                           @if($groupBy == "time") checked='checked' @endif
                                           value="time" id="groupByDate"
                                           hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                           hx-trigger="click"
                                           hx-target="#yourToDoContainer"
                                           hx-swap="outerHTML"
                                           hx-indicator="#todos .htmx-indicator"
                                           hx-vals='{"projectFilter": {{ $projectFilter }}, "groupBy": "time" }'
                                        />
                                    <label for="groupByDate">{!! __("label.dates") !!}</label></span></li>
                            <li>
                                <span class="radio">
                                    <input type="radio"
                                           name="groupBy"
                                           @if($groupBy == "project") checked='checked' @endif
                                           value="project" id="groupByProject"
                                           hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                           hx-trigger="click"
                                           hx-target="#yourToDoContainer"
                                           hx-swap="outerHTML"
                                           hx-indicator="#todos .htmx-indicator"
                                           hx-vals='{"projectFilter": {{ $projectFilter }}, "groupBy": "project" }'
                                    />
                                    <label for="groupByProject">{!! __("label.project") !!}</label>
                                </span>
                            </li>

                        </ul>
                    </div>
                    <div class="btn-group left ">
                        <button class="btn btn-link dropdown-toggle f-right" type="button" data-toggle="dropdown">
                            {!! __("links.filter") !!}
                            @if($projectFilter != '')
                                <span class='badge badge-primary'>1</span>
                            @endif
                        </button>
                        <ul class="dropdown-menu">
                            <li
                                @if($projectFilter == '')
                                    class='active'
                                @endif
                            ><a href=""
                                hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                hx-trigger="click"
                                hx-target="#yourToDoContainer"
                                hx-swap="outerHTML"
                                hx-indicator="#todos .htmx-indicator"
                                hx-vals='{"projectFilter": "", "groupBy": "{{ $groupBy }}" }'

                                >{{ __('labels.all_projects') }}

                                </a></li>

                            @if($allAssignedprojects)
                                @foreach($allAssignedprojects as $project)
                                    <li
                                        @if($projectFilter == $project['id'])
                                            class='active'
                                        @endif
                                    ><a href=""
                                        hx-get="{{BASE_URL}}/widgets/myToDos/get"
                                        hx-trigger="click"
                                        hx-target="#yourToDoContainer"
                                        hx-swap="outerHTML"
                                        hx-indicator="#todos .htmx-indicator"
                                        hx-vals='{"projectFilter": "{{ $project['id'] }}", "groupBy": "{{ $groupBy }}" }'
                                        >{{ $project['name'] }}</a></li>
                                @endforeach
                            @endif

                        </ul>
                    </div>

                    @dispatchEvent("afterTodoWidgetGroupByDropdown")
                    <div class="clearall"></div>
                </form>
                @endif
            </div>
            <div class="hideOnLoad " id="ticket_new" style="padding-top:5px; padding-bottom:15px;">

                <form method="post"
                      hx-post="{{ BASE_URL }}//widgets/myToDos/addTodo"
                      hx-target="#yourToDoContainer"
                      hx-swap="outerHTML"
                      hx-indicator="#ticket_new .htmx-indicator-small"
                >
                    <input type="hidden" name="quickadd" value="1"/>
                    <div class="flex" style="display:flex; column-gap: 10px;">
                        <input type="text" name="headline" style="width:100%;" placeholder="Enter To-Do Title" title="