{% load subscription_tags %}

{% if token_status and token_status.has_tokens %}
<div class="card border-0 shadow-sm mb-3 token-widget">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0">
                <i class="fas fa-coins text-primary"></i> AI Token Usage
            </h6>
            {% token_badge token_status.alert_level %}
        </div>
        
        <!-- Progress Bar -->
        {% token_progress_bar token_status.percentage token_status.tokens_used token_status.token_limit %}
        
        <!-- Usage Stats -->
        <div class="row text-center mt-3">
            <div class="col-6">
                <div class="text-muted small">Used</div>
                <div class="h6 mb-0 text-primary">{{ token_status.tokens_used|format_tokens }}</div>
            </div>
            <div class="col-6">
                <div class="text-muted small">Remaining</div>
                <div class="h6 mb-0 {% if token_status.alert_level >= 2 %}text-danger{% elif token_status.alert_level == 1 %}text-warning{% else %}text-success{% endif %}">
                    {{ token_status.tokens_remaining|format_tokens }}
                </div>
            </div>
        </div>
        
        <!-- Quick Info -->
        {% if token_status.percentage >= 75 %}
        <div class="alert alert-{{ token_status.alert_class }} mt-3 mb-0 py-2 px-2" style="font-size: 0.85rem;">
            <i class="fas fa-{{ token_status.alert_icon }}"></i>
            {% if token_status.percentage >= 100 %}
                Limit exceeded! Additional charges may apply.
            {% elif token_status.percentage >= 90 %}
                Almost at limit! Use carefully.
            {% else %}
                Approaching token limit.
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Action Button -->
        <div class="text-center mt-3">
            <a href="{% url 'tenants:subscription' %}" class="btn btn-sm btn-outline-primary w-100">
                <i class="fas fa-chart-line"></i> View Details
            </a>
        </div>
    </div>
</div>

<style>
.token-widget {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.token-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.token-widget .card-body {
    padding: 1.25rem;
}

.token-widget .progress {
    border-radius: 10px;
    overflow: hidden;
}

.token-widget .progress-bar {
    transition: width 0.6s ease;
}
</style>
{% endif %}