@props(['metric'])

<article class="metric-card" data-state="{{ $metric->state }}">
    <h3>{{ $metric->label }}</h3>

    @if ($metric->value !== null)
        <p class="metric-value">{{ $metric->value }}</p>
    @elseif ($metric->state === 'not-configured')
        <p class="metric-state">Not Yet Configured</p>
    @elseif ($metric->state === 'not-applicable')
        <p class="metric-state">Not Applicable</p>
    @else
        <p class="metric-state">Unavailable</p>
    @endif

    @if ($metric->help !== null)
        <p class="metric-help">{{ $metric->help }}</p>
    @endif
</article>