@props(['row', 'href'])

@php
    use App\Support\Money;
    use App\Support\Percent;
@endphp

<a href="{{ $href }}" wire:navigate {{ $attributes->class('card block p-4 transition hover:border-teal-600') }}>
    <div class="flex items-start justify-between gap-3">
        <span class="font-semibold">
            {{ $row['property']->name }}
            @if ($row['property']->status !== App\Enums\Status::Active)
                <span class="block text-xs font-normal text-stone-500">Inactive</span>
            @endif
        </span>
        <span @class(['text-lg font-semibold whitespace-nowrap', 'text-red-700' => $row['profit'] < 0])>{{ Money::compact($row['profit']) }}</span>
    </div>
    <dl class="mt-2 grid grid-cols-3 gap-2 text-xs">
        <div><dt class="text-stone-500">Income</dt><dd class="font-medium">{{ Money::compact($row['income']['net'], false) }}</dd></div>
        <div>
            <dt class="text-stone-500">Expenses</dt>
            <dd class="font-medium">{{ Money::compact($row['expenses'], false) }}</dd>
            @if ($row['pending_expenses'])
                <dd class="text-amber-800">+{{ Money::compact($row['pending_expenses'], false) }} pending</dd>
            @endif
        </div>
        <div><dt class="text-stone-500">Occupancy</dt><dd class="font-medium">{{ Percent::format($row['occupancy']['rate']) }}</dd></div>
    </dl>
    <x-meter :rate="$row['occupancy']['rate']" class="mt-2" :label="$row['property']->name.' occupancy'" />
</a>