@inject('markdown', 'Parsedown')
@php
    // TODO: There should be a better place for this.
    $markdown->setSafeMode(true);
@endphp


<div id="comment-{{ $comment->getKey() }}" class="flex rounded-lg p-1 mb-2 ">

    <a class="contents" href="{{ route('user.index', ['username' => $comment->commenter->username]) }}">
        @if($comment->commenter->avatar)
        <img class="w-12 h-12 rounded-lg m-2" src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ $comment->commenter->id }}/{{ $comment->commenter->avatar }}.webp" alt="{{ $comment->commenter->global_name ?? $comment->commenter->username }} Avatar">
        @else
        <img class="w-12 h-12 rounded-lg m-2" src="/images/default-avatar.webp" alt="{{ $comment->commenter->global_name ?? $comment->commenter->username }} Avatar">
        @endif
    </a>

    <div class="text-gray-800 dark:text-gray-200">
        <a href="{{ route('user.index', ['username' => $comment->commenter->username]) }}">
            @if($comment->commenter->is_patreon)
                <h5 class="text-gray-800 dark:text-gray-400">{{ $comment->commenter->global_name ?? $comment->commenter->username }} <a data-te-toggle="tooltip" title="Badge of appreciation for the horny people supporting us! :3"><i class="fa-solid fa-hand-holding-heart text-rose-600 animate-pulse"></i></a> <small class="text-muted">- {{ $comment->created_at->diffForHumans() }}</small></h5>
            @else
                <h5 class="text-gray-800 dark:text-gray-400">{{ $comment->commenter->global_name ?? $comment->commenter->username }} <small class="text-muted">- {{ $comment->created_at->diffForHumans() }}</small></h5>
            @endif
        </a>
        <div style="white-space: pre-wrap;">{!! $markdown->line($comment->comment) !!}</div>

        @if (! Illuminate\Support\Facades\Route::is('profile.comments'))
        <div>
            @can('reply-to-comment', $comment)
                <button data-te-toggle="modal" data-te-target="#reply-modal-{{ $comment->getKey() }}" class="inline-flex items-center px-4 py-2 mt-2 dark:focus:ring-offset-gray-800 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 focus:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition ease-in-out duration-150">@lang('comments::comments.reply')</button>
            @endcan
            @can('edit-comment', $comment)
                <button data-te-toggle="modal" data-te-target="#comment-modal-{{ $comment->getKey() }}" class="inline-flex items-center px-4 py-2 mt-2 dark:focus:ring-offset-gray-800 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 focus:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition ease-in-out duration-150">@lang('comments::comments.edit')</button>
            @endcan
            @can('delete-comment', $comment)
                <a href="{{ route('comments.destroy', $comment->getKey()) }}" onclick="event.preventDefault();document.getElementById('comment-delete-form-{{ $comment->getKey() }}').submit();" class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 mt-2">@lang('comments::comments.delete')</a>
                <form id="comment-delete-form-{{ $comment->getKey() }}" action="{{ route('comments.destroy', $comment->getKey()) }}" method="POST" style="display: none;">
                    @method('DELETE')
                    @csrf
                </form>
            @endcan
        </div>
        @endif


        @can('edit-comment', $comment)
            @include('modals.comment-edit')
        @endcan

        @can('reply-to-comment', $comment)
            @include('modals.comment-reply')
        @endcan

        <br />{{-- Margin bottom --}}

        <?php
            if (!isset($indentationLevel)) {
                $indentationLevel = 1;
            } else {
                $indentationLevel++;
            }
        ?>

        {{-- Recursion for children --}}
        @if($grouped_comments->has($comment->getKey()) && $indentationLevel <= $maxIndentationLevel)
            {{-- TODO: Don't repeat code. Extract to a new file and include it. --}}
            @foreach($grouped_comments[$comment->getKey()] as $child)
                <div class="flex">
                    <div class="h-[100px]  bg-rose-600 w-[4px] rounded-lg"></div>
                    @include('comments::_comment', [
                        'comment' => $child,
                        'grouped_comments' => $grouped_comments
                    ])
                </div>
            @endforeach
        @endif

    </div>
</div>

{{-- Recursion for children --}}
@if($grouped_comments->has($comment->getKey()) && $indentationLevel > $maxIndentationLevel)
    {{-- TODO: Don't repeat code. Extract to a new file and include it. --}}
    @foreach($grouped_comments[$comment->getKey()] as $child)
        @include('comments::_comment', [
            'comment' => $child,
            'grouped_comments' => $grouped_comments
        ])
    @endforeach
@endif