@php
    $phase = $moon_phase ?? null;
    $hasPhase = $phase && is_array($phase) && !empty($phase['key']);
@endphp
<div class="elements-card">
    <div class="chart-badge">{{ t('moon-phase', 'Fase Lunar (Momento Natal)') }}</div>

    @if (!$hasPhase)
        <div class="text-muted small p-2">{{ t('moon-phase-data-not-found', 'Datos de fase lunar no encontrados.') }}</div>
    @else
        <div class="moon-phase-box text-center">
            <div class="moon-phase-visual mb-1">
                @if ($phase['key'] === 'new_moon')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <circle cx="32" cy="32" r="26" fill="#0f0f1a" opacity="0.9"/>
                    </svg>
                @elseif ($phase['key'] === 'waxing_crescent')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <circle cx="32" cy="32" r="28" fill="#f0e6d3"/>
                        <circle cx="38" cy="32" r="28" fill="#1a1a2e"/>
                    </svg>
                @elseif ($phase['key'] === 'first_quarter')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <path d="M32 4 A28 28 0 0 1 32 60 A28 28 0 0 1 32 4" fill="#f0e6d3"/>
                    </svg>
                @elseif ($phase['key'] === 'waxing_gibbous')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <path d="M 60 32 A 28 28 0 1 1 32 4 L 32 32 Z" fill="#f0e6d3"/>
                    </svg>
                @elseif ($phase['key'] === 'full_moon')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#f0e6d3" stroke="#d4c4a0" stroke-width="1.5"/>
                        <circle cx="32" cy="32" r="24" fill="#e8dcb8" opacity="0.6"/>
                    </svg>
                @elseif ($phase['key'] === 'disseminating')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <path d="M 4 32 A 28 28 0 1 0 32 60 L 32 32 Z" fill="#ffffff"/>
                    </svg>
                @elseif ($phase['key'] === 'last_quarter')
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <path d="M32 4 A28 28 0 0 0 32 60 A28 28 0 0 0 32 4" fill="#f0e6d3"/>
                    </svg>
                @else
                    {{-- Balzamik Ay --}}
                    <svg class="moon-phase-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
                        <circle cx="32" cy="32" r="28" fill="#1a1a2e" stroke="#4a4a6a" stroke-width="1.5"/>
                        <circle cx="32" cy="32" r="28" fill="#f0e6d3"/>
                        <circle cx="26" cy="32" r="28" fill="#1a1a2e"/>
                    </svg>
                @endif
            </div>
            <div class="moon-phase-title fw-semibold">{{ $phase['short_label'] ?? $phase['label'] }}</div>
            <div class="small text-muted mb-1">{{ $phase['label'] }}</div>
            <div class="small text-muted">{{ t('elongation', 'Elongación') }}: {{ $phase['degree_formatted'] ?? ($phase['degree_diff'] ?? '') . '°' }}</div>
            @if(!empty($phase['description']))
                <div class="small mt-1 moon-phase-desc">{{ $phase['description'] }}</div>
            @endif
        </div>
    @endif
</div>