@php
    use Spatie\Comments\Enums\NotificationSubscriptionType;
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Facades\Gate;
@endphp



  
<section class="comments {{ $newestFirst ? 'comments-newest-first' : '' }}">

    <div class="d-none">
        <p>Focused Comment ID: {{ $focusedCommentId }}</p>
        <p>Navigate Parent Comment ID: {{ $navigateParentComment }}</p>
      </div>

    <header class="comments-header">
        <p class="mb-4">
          <span>Loaded {{$comments->count()}} of {{ $totalComments }}</span> Comments
        </p>
        @if($writable && $showNotificationOptions && Auth::check())
            <div x-data="{ subscriptionsOpen: false}" class="comments-subscription">
                <button @click.prevent="subscriptionsOpen = true" class="comments-subscription-trigger">
                    {{ NotificationSubscriptionType::from($selectedNotificationSubscriptionType)->longDescription() }}
                </button>
                <x-comments::modal
                    bottom
                    compact
                    x-show="subscriptionsOpen"
                    @click.outside="subscriptionsOpen = false"
                >
                    @foreach(NotificationSubscriptionType::cases() as $case)
                        <button class="comments-subscription-item" @click="subscriptionsOpen = false" wire:click="updateSelectedNotificationSubscriptionType('{{ $case->value }}')">
                            {{ $case->description() }}
                        </button>
                    @endforeach
                </x-comments::modal>
            </div>
        @endif

        {{-- delete All Comments --}}
        @if($writable && $comments->isNotEmpty())
          <div class="ms-2 position-relative" x-data="{ confirmDelete: false }">
              <button class="comments-button is-danger" @click.prevent="confirmDelete = true">
                  {{ __('Delete All') }}
              </button>
              <x-comments::modal
                  right
                  bottom
                  x-show="confirmDelete"
                  @click.outside="confirmDelete = false"
                  :title="__('Delete All Comments')"
                >
                  <p>{{ __('comments::comments.delete_confirmation_text') }}</p>
                  <x-comments::button danger small wire:click="deleteAllComments">
                      {{ __('comments::comments.delete') }}
                  </x-comments::button>
              </x-comments::modal>
          </div>
        @endif
    </header>

    {{-- <div
        class="comments-list"
        style="max-height: 500px; overflow-y: auto; overflow-x: hidden;" --}}
        <!--begin::Scroll-->
        <div class="comments-list hover-scroll h-300px px-5"
        data-kt-scroll="true"
        data-kt-scroll-offset="100px"
        x-data="{ previousScrollHeight: 0 }"
        x-init="$watch('previousScrollHeight', value => {
            if (value > 0) {
                const newScrollHeight = $el.scrollHeight;
                $el.scrollTop += newScrollHeight - value;
            }
        })"
        x-on:livewire-loaded-more-top.window="$el.scrollTop = 0"
    >

    @if ($hasMoreTop)
        <div
            class="w-full flex flex-col justify-center items-center text-center gap-2"
        >
            <button
                type="button"
                wire:loading.remove
                x-intersect.full="$wire.loadMoreTop"
                class="bg-slate-100 disabled:bg-slate-50 px-3 py-2 text-slate-500 border-slate-100 rounded hover:cursor-pointer w-fit hover:bg-slate-200"
            >
                Load more
            </button>

            <div wire:loading wire:target="loadMoreTop" class="w-full flex flex-col justify-center items-center text-center gap-2">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    @endif

    @forelse($comments as $comment)
        @continue(! Gate::check('see', $comment))
        <livewire:comments-comment
            :key="$comment->id"
            :comment="$comment"
            :highlight="$comment->id === $focusedCommentId"
            :show-avatar="$showAvatars"
            :newest-first="$newestFirst"
            :writable="$writable"
            :show-replies="$showReplies"
            :show-reactions="$showReactions"
            use-metronic="true"
        />
    @empty
        {{-- <p class="comments-no-comment-yet">{{ $noCommentsText ?? __('comments::comments.no_comments_yet') }}</p> --}}
        <!--begin::Wrapper-->
        <div class="w-100 mt-4">
          <!--begin::Heading-->
          <div class="pb-12 text-center px-4 d-flex flex-column align-items-center justify-content-center">
            
              <!--begin::Illustration-->
              <div class="text-center px-4">
                  <img class="empty-state theme-image w-200px mb-2" src="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress.svg" data-light="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress.svg" data-dark="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress-dark.svg" alt="">
              </div>
              <!--end::Illustration-->

              <!--begin::Description-->
              <div class="fw-semibold text-muted fs-6">
                  There are no comments at the moment.
              </div>
              <div class="fw-semibold fs-6">
                  Be the first to comment.
              </div>
              <!--end::Description-->
          </div>
          <!--end::Heading-->
        </div>
        <!--end::Wrapper-->
    @endforelse


        @if ($hasMoreBottom)
            <div class="w-full flex flex-col justify-center items-center text-center gap-2">
                <button type="button" wire:click="loadMoreBottom" x-intersect="$wire.loadMoreBottom" wire:loading.remove wire:target="loadMoreBottom"
                        class="bg-slate-100 disabled:bg-slate-50 px-3 py-2 text-slate-500 border-slate-100 rounded hover:cursor-pointer w-fit hover:bg-slate-200">
                    Load more
                </button>

                <div wire:loading wire:target="loadMoreBottom" class="w-full flex flex-col justify-center items-center text-center gap-2">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        @endif

    </div>
</section>