{{-- _empire-panel.blade.php --}}
@php
    $city = Auth::user()->city;
    $citySizeBackgroundImage = asset('images/' . ($city->size_background_image ?? 'hamlet_background.png'));
@endphp

<div class="w-full md:w-[384px] h-[678px] bg-yellow-50 border border-yellow-800 rounded-xl shadow-md overflow-hidden"
        style="background-image: url('{{ $citySizeBackgroundImage }}'); background-size: cover; background-position: center;">
    <div class="bg-black bg-opacity-50 text-yellow-100 p-6 h-full flex flex-col justify-between">
        <div>
            <h3 class="text-xl font-bold mb-2 drop-shadow">{{ Auth::user()->city->size }} Overview</h3>
            <p><span class="font-semibold">City:</span> {{ Auth::user()->city->name }}</p>
            <p><span class="font-semibold">Wood:</span> {{ Auth::user()->city->wood }}</p>
            <p><span class="font-semibold">Stone:</span> {{ Auth::user()->city->stone }}</p>
            <p><span class="font-semibold">Thatch:</span> {{ Auth::user()->city->thatch }}</p>
            <p><span class="font-semibold">Food:</span> {{ Auth::user()->city->food }}</p>
            <p><span class="font-semibold">Peasant Houses:</span> {{ Auth::user()->city->peasant_houses }}</p>
            <p><span class="font-semibold">Wood Cutters:</span> {{ Auth::user()->city->woodcutters }}</p>
            <p><span class="font-semibold">Stone Miners:</span> {{ Auth::user()->city->stone_miners }}</p>
            <p><span class="font-semibold">Farmers:</span> {{ Auth::user()->city->farmers }}</p>
            <p><span class="font-semibold">Foragers:</span> {{ Auth::user()->city->foragers }}</p>
        </div>

        <div class="flex justify-end mt-4">
            <a href="{{ route('city.manage') }}"
            class="inline-block bg-yellow-800 text-yellow-100 font-bold px-4 py-2 rounded hover:bg-yellow-700 transition shadow">
                Manage {{ Auth::user()->city->size }}
            </a>
        </div>
    </div>
</div>