@props([
    'ticket',
    'statusLabels',
    'onTheClock',
    'tpl',
    'level' => 0
])

@php
    $ticketDataJson = json_encode([
        'id' =>  $ticket['id'] ,
        'title' =>  $ticket['headline'],
        'color' =>   'var(--accent2)',
        'enitityType' =>  'ticket',
        'url' =>  BASE_URL.'#/tickets/showTicket/'.$ticket['id'],
    ]);

    $hasChildren = !empty($ticket['children']);
@endphp

<div class="sortable-item draggable-todo"
     id="ticket_{{ $groupKey.$ticket['id'] }}"
     data-item-type="{{ $ticket['type'] === 'milestone' ? 'milestone' : ($ticket['type'] === 'subtask' ? 'subtask' : 'task') }}"
     data-id="{{ $ticket['id'] }}"
     data-project="{{ $ticket['projectId'] }}"
     data-draggable="true"
     data-sort-index="{{ $ticket['sortIndex'] ?? 10 }}"
     data-event='{!! $ticketDataJson !!}'>

    @php
        $accordionId = 'task-children-'.$groupKey.$ticket['id'];
        $accordionState = $tpl->getToggleState($tpl->getToggleState("accordion_content-".$accordionId) === 'closed' ? 'closed' : 'open');
    @endphp

    <div
        class="tw-relative ticketBox {{ $ticket['type'] === 'milestone' ? 'milestone-box priority-border- ' : 'priority-border-'.$ticket['priority'] }} {{ $hasChildren ? 'has-children' : '' }}"
        data-val="{{ $ticket['id'] }}"
        data-event='{!! $ticketDataJson !!}'
        @if($ticket['type'] === 'milestone')
            style="background: var(--secondary-background) linear-gradient(135deg, {{ $ticket['tags'] }} 0%, var(--accent1) 100%); background-repeat: no-repeat; background-size: 100% 5px; background-position: bottom;"
        @endif
    >
        <div class="tw-absolute full-width-loader htmx-indicator-ticket-{{$ticket['id']}}">
            <div class="indeterminate"></div>
        </div>

        @if($hasChildren)
            <div id="accordion_toggle_{{$accordionId }}"
                 class="task-collapse-toggle accordion-toggle {{ $accordionState }}"
                 onclick="leantime.snippets.accordionToggle('{{ $accordionId}}');"
            >
                <i class="fa fa-angle-{{ $accordionState == 'closed' ? 'right' : 'down' }}"></i>
            </div>
        @endif

        @if($ticket['type'] == 'milestone')
            <div class="tw-flex tw-flex-row tw-items-center tw-gap-4">
                <div class="tw-flex-grow">
                    <small style="display:inline-block; ">{{ $ticket['projectName'] }}</small>
                    <h4><a href="#/tickets/editMilestone/{{ $ticket['id'] }}"
                           style="font-size:var(--font-size-l);">{{ $ticket['headline'] }}</a></h4>

                </div>
                <div class="tw-flex-grow">
                    <div hx-trigger="load"
                         hx-indicator=".htmx-indicator"
                         hx-get="