Laravel 8: Syntax error, unexpected 'endif' (T_ENDIF) - php

Question

im doing the Laravel 8 from Scratch Tutorial but get the Error "Syntax error, unexpected 'endif' (T_ENDIF)".
Cant find where the problem is because there is not even a "#if" statement in the file which is throwing the error.
The file is the header for filtering posts.
It seems the dropdown component which is responsible for selecting a post category is the reason for the problem, because everything workes fine when i comment this out.
I have shared the Error Code on flareapp.io
Dropdown Component:
#props(['trigger'])
<div x-data="{ show:false }" #click.away="show = false">
<div #click="show = ! show">
{{ $trigger }}
</div>
<div x-show="show" class="py-2 absolute bg-gray-100 mt-2 rounded-xl w-32 z-50" style="display: none">
{{ $slot }}
</div>
</div>
Dropdown-item Component:
#props(['active' => false])
#php
$classes = 'block text-left px-3 text-sm loading-6 hover:bg-blue-500 focues:bg-blue-500 hover:text-white focus:text-white';
if ($active) {
$classes += 'bg-blue-500 text-white';
}
#endphp
<a {{ $attributes(['class' => $classes]) }}>
{{ $slot }}
</a>
Posts header:
<header class="max-w-xl mx-auto mt-20 text-center">
<h1 class="text-4xl">
Latest <span class="text-blue-500">Laravel From Scratch</span> News
</h1>
<h2 class="inline-flex mt-2">By Lary Laracore <img src="./images/lary-head.svg" alt="Head of Lary the mascot"></h2>
<p class="text-sm mt-14">
Another year. Another update. We're refreshing the popular Laravel series with new content.
I'm going to keep you guys up to speed with what's going on!
</p>
<div class="space-y-2 lg:space-y-0 lg:space-x-4 mt-8">
<!-- Category -->
<div class="relative lg:inline-flex bg-gray-100 rounded-xl">
<x-dropdown>
<x-slot name="trigger">
<button class="py-2 pl-3 pr-9 text-sm font-semibold w-full lg:w-32 text-left flex lg:inline-flex">
{{ isset($currentCategory) ? ucwords($currentCategory->name) : 'Categories' }}
<svg class="transform -rotate-90 absolute pointer-events-none" style="right: 12px;" width="22"
height="22" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
</path>
<path fill="#222"
d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
</g>
</svg>
</button>
</x-slot>
<x-dropdown-item href="/blog/" :active="request()->routeIs(" none")">
All
</x-dropdown-item>
#foreach ($categories as $category)
<x-dropdown-item href="/blog/categories/{{ $category->slug }}" :active="request()->is("
categories/{$category->slug}")"
>
{{ ucwords($category->name) }}
</x-dropdown-item>
#endforeach
</x-dropdown>
</div>
<!-- Other Filters -->
<div class="relative flex lg:inline-flex items-center bg-gray-100 rounded-xl">
<select class="flex-1 appearance-none bg-transparent py-2 pl-3 pr-9 text-sm font-semibold">
<option value="category" disabled selected>Other Filters
</option>
<option value="foo">Foo
</option>
<option value="bar">Bar
</option>
</select>
{{-- ERROR THROWN IN NEXT LINE --}}
<svg class="transform -rotate-90 absolute pointer-events-none" style="right: 12px;" width="22" height="22"
viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
</path>
<path fill="#222" d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z">
</path>
</g>
</svg>
</div>
<!-- Search -->
<div class="relative flex lg:inline-flex items-center bg-gray-100 rounded-xl px-3 py-2">
<form method="GET" action="#">
<input type="text" name="search" placeholder="Find something"
class="bg-transparent placeholder-black font-semibold text-sm">
</form>
</div>
</div>
</header>

Answer 1

Try this
#foreach ($categories as $category)
<x-dropdown-item href="/blog/categories/{{ $category->slug }}" :active="request()->is('categories/' . $category->slug)">
{{ ucwords($category->name) }}
</x-dropdown-item>
#endforeach