67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
{% from 'common/macros.html' import format_size %}
|
|
|
|
{% macro usage_limits(usage_stats) %}
|
|
<div class="masonry-card" style="width: 100%;">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>Usage Limits</h5>
|
|
</div>
|
|
|
|
<!-- Rooms Progress -->
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-door-open me-2 icon-primary"></i>
|
|
<span class="text-muted">Rooms:</span>
|
|
</div>
|
|
<div class="fw-bold text-primary">{{ usage_stats.current_rooms }} / {{ usage_stats.max_rooms }}</div>
|
|
</div>
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: {{ usage_stats.rooms_percentage }}%; background-color: var(--secondary-color);"
|
|
aria-valuenow="{{ usage_stats.rooms_percentage }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversations Progress -->
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-comments me-2 icon-primary"></i>
|
|
<span class="text-muted">Conversations:</span>
|
|
</div>
|
|
<div class="fw-bold text-primary">{{ usage_stats.current_conversations }} / {{ usage_stats.max_conversations }}</div>
|
|
</div>
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: {{ usage_stats.conversations_percentage }}%; background-color: var(--secondary-color);"
|
|
aria-valuenow="{{ usage_stats.conversations_percentage }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Progress -->
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-hdd me-2 icon-primary"></i>
|
|
<span class="text-muted">Storage:</span>
|
|
</div>
|
|
<div class="fw-bold text-primary">{{ format_size(usage_stats.current_storage) }} / {{ format_size(usage_stats.max_storage) }}</div>
|
|
</div>
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: {{ usage_stats.storage_percentage }}%; background-color: var(--secondary-color);"
|
|
aria-valuenow="{{ usage_stats.storage_percentage }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %} |