{# Daily Usage Indicator Component

   Required template variables:
   - remaining: Number of turns remaining (-1 if unlimited)
   - daily_limit: Daily turn limit (-1 if unlimited)
   - is_limited: Boolean, true if limit reached
   - is_unlimited: Boolean, true if user has unlimited turns
   - reset_time: ISO timestamp of when limit resets (optional)
#}

<div class="daily-usage-indicator">
    {% if is_unlimited %}
        <span class="usage-badge unlimited">
            <span class="usage-icon">&#9889;</span>
            <span class="usage-text">Unlimited Turns</span>
        </span>
    {% elif is_limited %}
        <span class="usage-badge limited">
            <span class="usage-icon">&#9888;</span>
            <span class="usage-text">Limit Reached</span>
        </span>
    {% else %}
        <span class="usage-badge normal">
            <span class="usage-icon">&#9201;</span>
            <span class="usage-count">{{ remaining }}/{{ daily_limit }}</span>
            <span class="usage-label">turns today</span>
        </span>
    {% endif %}
</div>

<style>
.daily-usage-indicator {
    display: inline-flex;
    align-items: center;
}

.usage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.usage-badge.normal {
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}

.usage-badge.limited {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
}

.usage-badge.unlimited {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
}

.usage-icon {
    font-size: 0.9rem;
}

.usage-count {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.usage-label {
    color: var(--text-muted);
}

.usage-text {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
</style>