{% extends 'base.html' %}
{% from "macros.html" import render_selectable_table, render_pagination %}

{% block title %}Active License Usage{% endblock %}

{% block content_title %}Active License Usage{% endblock %}
{% block content_description %}Overview of the current license period usage{% endblock %}

{% block content %}
{% if active_period and active_period.license_usage %}
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header p-3">
                    <h6 class="mb-0">License Information</h6>
                </div>
                <div class="card-body">
                    <p><strong>License ID:</strong> {{ active_period.license.id }}</p>
                    <p><strong>License Name:</strong> {{ active_period.license.name }}</p>
                    <p><strong>Period Nr:</strong> {{ active_period.period_number }}</p>
                    <p><strong>Start Date:</strong> {{ active_period.period_start }}</p>
                    <p><strong>End Date:</strong> {{ active_period.period_end }}</p>
                    <p><strong>Status:</strong> {{ active_period.status.value }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header p-3">
                    <h6 class="mb-0">License Details for Period</h6>
                </div>
                <div class="card-body">
                    <p><strong>Max Storage:</strong> {{ active_period.max_storage_mb }} MB</p>
                    <p><strong>Included Embedding:</strong> {{ active_period.included_embedding_mb }} MB</p>
                    <p><strong>Included Interaction Tokens:</strong> {{ active_period.included_interaction_tokens }}</p>
                    <p><strong>Overage Storage Allowed:</strong> {{ active_period.additional_storage_allowed }}</p>
                    <p><strong>Overage Embedding Allowed:</strong> {{ active_period.additional_embedding_allowed }}</p>
                    <p><strong>Overage Interaction Allowed:</strong> {{ active_period.additional_interaction_allowed }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header p-3">
                    <h6 class="mb-0">Storage Usage</h6>
                </div>
                <div class="card-body pt-0">
                    <h2 class="font-weight-bold mt-3
                        {% if usage_data.storage_percent >= 95 %}text-danger
                        {% elif usage_data.storage_percent > 80 %}text-warning
                        {% else %}text-info{% endif %}">
                        {{ usage_data.storage_percent }}%
                    </h2>
                    <div class="progress mt-2">
                        <div class="progress-bar
                            {% if usage_data.storage_percent >= 95 %}bg-danger
                            {% elif usage_data.storage_percent > 80 %}bg-warning
                            {% else %}bg-info{% endif %}"
                            role="progressbar"
                            style="width: {{ usage_data.storage_percent }}%"
                            aria-valuenow="{{ usage_data.storage_percent }}"
                            aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                    <p class="mt-3">{{ usage_data.storage_used_rounded or 0.0 }} / {{ active_period.max_storage_mb or 0 }} MB</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header p-3">
                    <h6 class="mb-0">Embedding Usage</h6>
                </div>
                <div class="card-body pt-0">
                    <h2 class="font-weight-bold mt-3
                        {% if usage_data.embedding_percent >= 95 %}text-danger
                        {% elif usage_data.embedding_percent > 80 %}text-warning
                        {% else %}text-info{% endif %}">
                        {{ usage_data.embedding_percent }}%
                    </h2>
                    <div class="progress mt-2">
                        <div class="progress-bar
                            {% if usage_data.embedding_percent >= 95 %}bg-danger
                            {% elif usage_data.embedding_percent > 80 %}bg-warning
                            {% else %}bg-info{% endif %}"
                            role="progressbar"
                            style="width: {{ usage_data.embedding_percent }}%"
                            aria-valuenow="{{ usage_data.embedding_percent }}"
                            aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                    <p class="mt-3">{{ usage_data.embedding_used_rounded or 0.0 }} / {{ active_period.included_embedding_mb or 0 }} MB</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header p-3">
                    <h6 class="mb-0">Interaction Usage</h6>
                </div>
                <div class="card-body pt-0">
                    <h2 class="font-weight-bold mt-3
                        {% if usage_data.interaction_percent >= 95 %}text-danger
                        {% elif usage_data.interaction_percent > 80 %}text-warning
                        {% else %}text-info{% endif %}">
                        {{ usage_data.interaction_percent }}%
                    </h2>
                    <div class="progress mt-2">
                        <div class="progress-bar
                            {% if usage_data.interaction_percent >= 95 %}bg-danger
                            {% elif usage_data.interaction_percent > 80 %}bg-warning
                            {% else %}bg-info{% endif %}"
                            role="progressbar"
                            style="width: {{ usage_data.interaction_percent }}%"
                            aria-valuenow="{{ usage_data.interaction_percent }}"
                            aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                    <p class="mt-3">{{ usage_data.interaction_used_rounded or 0.0 }} / {{ active_period.included_interaction_tokens or 0 }} M tokens</p>
                </div>
            </div>
        </div>
    </div>

{% else %}
    <div class="alert alert-info">
        There's no active license period for this tenant, or no usage data has been recorded yet.
    </div>
{% endif %}
{% endblock %}