@props([
    'title' => '',
    'subtitle' => '',
    'icon' => 'fas fa-chart-bar',
    'maxWidth' => '30%',
])

<div {{ $attributes->merge(['class' => 'card border-0 global-dashboard-tile']) }} style="max-width: {{ $maxWidth }}; margin: 1rem;">
    <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h6 class="mb-0">{{ $title }}</h6>
                @if($subtitle !== '')
                    <small class="text-muted">{{ $subtitle }}</small>
                @endif
            </div>
            <div class="global-dashboard-tile-icon">
                <i class="{{ $icon }}" aria-hidden="true"></i>
            </div>
        </div>

        <div class="global-dashboard-tile-content">
            {{ $slot }}
        </div>
    </div>

    @isset($footer)
        <div class="card-footer bg-white border-0 pt-0">
            {{ $footer }}
        </div>
    @endisset
</div>