{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}
{% import "macros/admin_crud_list.html" as crud %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/zephyre-licenses/assets/css/style.css">
{% endblock %}

{% block page_title %}Zephyre Licenses Administration{% endblock %}

{% block admin_content %}
<div class="zephyre-container" id="admin-data"
     data-currency-symbol="{{ currency_symbol }}">

    {{ mh::management_header_simple(
        title="License Administration",
        subtitle="Global configuration, pricing control, and activation monitoring.",
        title_heading="h1",
        wrapper_class="management-header mb-4",
        include_actions_column=false
    ) }}

    <div class="stat-card mb-5">
        <div class="zephyre-card-header">
            <h3 class="m-0"><i class="fas fa-tags mr-2"></i> Product Pricing Matrix</h3>
        </div>
        <div class="blocks-responsive-table">
            <table class="blocks-admin-table">
                <thead>
                    <tr>
                        <th>Product Entity</th>
                        <th>Encryption Keys</th>
                        <th>License Price</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td data-label="Product Entity">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary-soft p-2 rounded mr-3">
                                    <i class="fas fa-cube text-primary"></i>
                                </div>
                                <span class="font-weight-bold">{{ product.name }}</span>
                            </div>
                        </td>
                        <td data-label="Encryption Keys">
                            <div class="d-flex gap-2">
                                <span class="badge badge-secondary">0x{{ product.code_1_hex }}</span>
                                <span class="badge badge-secondary">0x{{ product.code_2_hex }}</span>
                                <span class="badge badge-secondary">0x{{ product.code_3_hex }}</span>
                                <span class="badge badge-secondary">0x{{ product.code_4_hex }}</span>
                            </div>
                        </td>
                        <td data-label="License Price">
                            <div class="flex items-center gap-2">
                                <span class="text-muted small mr-1">{{ currency_symbol }}</span>
                                <input type="number" min="0" step="0.01" class="price-input blocks-input max-w-36" data-product-id="{{ product.id }}" value="{{ product.price }}" aria-label="Price for {{ product.name }}">
                            </div>
                        </td>
                        <td data-label="Actions" class="blocks-table-actions">
                            <button type="button" class="blocks-button blocks-button-primary update-price-btn" data-product-id="{{ product.id }}">
                                <i class="fas fa-save mr-1"></i> Update
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="blocks-admin-crud-list" id="zephyre-activations-list" data-config-url="/plugins/zephyre-licenses/assets/admin/activations_list.json" data-context-selector="#admin-data">
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="6" class="crud-empty-state text-center">Loading activations…</td></tr>
        </tbody>
    </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/zephyre-licenses/assets/js/app.js"></script>
{% endblock %}