{% load subscription_tags %}

{% if token_status and token_status.should_alert %}
<div class="alert alert-{{ token_status.alert_class }} alert-dismissible fade show mb-3 shadow-sm token-alert" 
     role="alert" 
     style="border-left: 4px solid; animation: slideDown 0.3s ease;">
    <div class="d-flex align-items-start">
        <div class="flex-shrink-0 me-3 mt-1">
            <i class="fas fa-{{ token_status.alert_icon }} fa-2x"></i>
        </div>
        <div class="flex-grow-1">
            <h6 class="alert-heading mb-1 fw-bold">
                {% if token_status.alert_level == 3 %}
                    <i class="fas fa-ban"></i> Token Limit Exceeded
                {% elif token_status.alert_level == 2 %}
                    <i class="fas fa-exclamation-triangle"></i> Critical Token Alert
                {% else %}
                    <i class="fas fa-exclamation-circle"></i> Token Usage Warning
                {% endif %}
            </h6>
            <p class="mb-2">{{ token_status.message }}</p>
            
            <!-- Progress Bar -->
            {% token_progress_bar token_status.percentage token_status.tokens_used token_status.token_limit %}
            
            <!-- Action Buttons -->
            <div class="mt-3 d-flex gap-2 flex-wrap">
                <a href="{% url 'tenants:subscription' %}" class="btn btn-sm btn-outline-{{ token_status.alert_class }}">
                    <i class="fas fa-chart-line"></i> View Usage Details
                </a>
                {% if token_status.alert_level >= 2 %}
                <a href="mailto:support@3ncount.com?subject=Upgrade Plan Request - {{ org.name }}" 
                   class="btn btn-sm btn-{{ token_status.alert_class }}">
                    <i class="fas fa-arrow-up"></i> Upgrade Plan
                </a>
                {% endif %}
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>

<style>
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.token-alert {
    border-radius: 8px;
}

.token-alert .alert-heading {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .token-alert .d-flex {
        flex-direction: column;
    }
    
    .token-alert .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }
}
</style>
{% endif %}