<section class="chart-metric chart-correlated-stat {{ $size }}">
    <div id="{{ $element }}" class="metric-panel metric-style-{{ $color ?? 'default' }}">
        <div class="metric-body">
            <p class="metric-label">{{ $label }}</p>
            <h1 class="metric-value">{{ $data ?? 0 }}</h1>
            <p class="metric-change text-red">
                <span class="fa-solid fa-chevron-down metric-icon-bg"></span> {{ $percentage ?? 0 }}% of total {{ $total ?? 0 }}
            </p>
        </div>
        @if (! empty($help))
            <button type="button" class="metric-help" data-toggle="tooltip" data-placement="left" title="{{ $help ?? '' }}" data-trigger="hover">
                <span class="fa-solid fa-question metric-icon-bg text-gray"></span>
            </button>
        @endif
    </div>
</section>
