{# Status widget template using tabler.io components #}
<div class="status-card card card-sm mb-2">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="status-icon bg-{{ widget.status }}">
                    <i class="ti ti-{{ widget.icon|default('info-circle') }}"></i>
                </div>
            </div>
            <div class="col">
                <div class="font-weight-medium">{{ widget.label }}</div>
                <div class="text-muted">
                    <span class="status-value">{{ widget.value | safe }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .status-card {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        border-left: 3px solid var(--tblr-{{ widget.status }});
    }
    .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .status-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .status-value {
        font-size: 1.1rem;
        font-weight: 500;
    }
</style>
