{% extends "base.html" %}
{% block content %}

<h1>License</h1>
<p class="page-subtitle">
    Whether this device is licensed, and when it last reached <code>vendorawifi.com</code>.
</p>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<div class="page-actions">
    <form method="POST" action="/license/refresh" style="display: inline;"
          onsubmit="return confirm('Check the license with vendorawifi.com now?');">
        <button type="submit" class="btn-primary">↻ Refresh Now</button>
    </form>
</div>

{# Top stat cards #}
<div class="stat-grid">
    <div class="stat-card {% if data.status == 'active' %}good{% elif data.status == 'awaiting_first_contact' %}accent{% endif %}">
        <div class="label">Status</div>
        <div class="value" style="font-size: 18px;">
            {% if data.status == 'active' %}Active
            {% elif data.status == 'awaiting_first_contact' %}Awaiting Activation
            {% elif data.status == 'grace_expired' %}Grace Expired
            {% elif data.status == 'unlicensed' %}Unlicensed
            {% else %}{{ data.status }}{% endif %}
        </div>
        <div class="hint">
            {% if data.licensed %}this device is licensed{% else %}needs a credit at vendorawifi.com{% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Last Contact</div>
        <div class="value" style="font-size: 18px;">
            {% if data.last_contact_at %}{{ data.last_contact_age_s // 60 }}m ago
            {% else %}never{% endif %}
        </div>
        <div class="hint">
            {% if data.last_contact_at %}last successful check
            {% else %}not checked in yet{% endif %}
        </div>
    </div>
    <div class="stat-card {% if data.grace_remaining_s > 86400 %}good{% elif data.grace_remaining_s < 0 %}{% endif %}">
        <div class="label">Grace Remaining</div>
        <div class="value" style="font-size: 18px;">
            {% if data.grace_remaining_s < 0 %}expired
            {% else %}{{ (data.grace_remaining_s // 60) | duration }}{% endif %}
        </div>
        <div class="hint">keeps selling if the internet drops</div>
    </div>
    <div class="stat-card">
        <div class="label">Next Check</div>
        <div class="value" style="font-size: 18px;">{{ (data.next_poll_secs // 60) }}m</div>
        <div class="hint">automatic</div>
    </div>
</div>

{# Activation CTA — the walled garden lets the operator reach vendorawifi.com
   from the hotspot without a voucher, so this works even at a site with no
   other uplink. Shown while not licensed. #}
{% if not data.licensed %}
<section>
    <div class="card" style="border-color: var(--accent);">
        <h2 style="margin-top: 0;">Activate this device</h2>
        <p style="color: var(--muted); line-height: 1.5; margin-bottom: 12px;">
            Register this SBC at <code>vendorawifi.com</code> and allocate a credit to activate it.
            You can open it straight from this hotspot — no voucher needed (the activation site is in
            the walled garden).
        </p>
        {% if data.vnd_id %}
        <p style="margin-bottom: 14px;">Device ID:
            <code style="font-size: 14px; user-select: all;">{{ data.vnd_id }}</code></p>
        {% endif %}
        <a class="btn-primary" href="https://vendorawifi.com" target="_blank" rel="noopener"
           style="display: inline-block; text-decoration: none;">Open vendorawifi.com →</a>
    </div>
</section>
{% endif %}

<section>
    <h2>Identity</h2>
    <div class="card">
        <table class="kv-table">
            <tr>
                <th>VND-ID</th>
                <td>
                    {% if data.vnd_id %}
                        <code style="font-size: 14px;">{{ data.vnd_id }}</code>
                    {% else %}
                        <span style="color: var(--muted);">— not yet generated</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
</section>

<section>
    <h2>Server Contact</h2>
    <div class="card">
        <table class="kv-table">
            <tr>
                <th>Last successful contact</th>
                <td>
                    {% if data.last_contact_at %}
                        <code>{{ data.last_contact_at }}</code>
                        <span style="color: var(--muted); font-size: 12px;">
                            ({{ (data.last_contact_age_s // 60) | duration }} ago)
                        </span>
                    {% else %}
                        <span style="color: var(--muted);">never</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>Last attempt</th>
                <td>
                    {% if data.last_attempt_at %}
                        <code>{{ data.last_attempt_at }}</code>
                        <span style="color: var(--muted); font-size: 12px;">
                            ({{ (data.last_attempt_age_s // 60) | duration }} ago)
                        </span>
                    {% else %}
                        <span style="color: var(--muted);">never</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>Last error</th>
                <td>
                    {% if data.last_error %}
                        <code style="color: var(--danger); font-size: 12px;">{{ data.last_error }}</code>
                    {% else %}
                        <span style="color: var(--muted);">—</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
</section>

{# The "Cached credentials" section (activation token / signature presence)
   was removed 2026-08-03: operator-facing pages must not describe how
   licensing works, only whether the device is licensed. The Status card
   above already carries the outcome, and the token/signature detail is
   available internally via the service log. #}

<section>
    <div class="section-head">
        <h2>Sales Reporting</h2>
    </div>
    <div class="card">
        <form method="POST" action="/license/sales-reporting">
            <div class="form-grid" style="grid-template-columns:minmax(0,1fr);">
                <div class="col-span-all" style="min-width:0;">
                    <label for="sales-interval">Sales reporting interval (minutes)</label>
                    <input type="number" id="sales-interval" name="sales_report_interval_mins"
                           min="10" max="240" step="1"
                           value="{{ data.sales_report_interval_mins }}" required>
                    <p class="form-hint" style="margin-top:6px;">
                        How often new sales are sent to the website.
                        Default 15, minimum 10, maximum 240.
                    </p>
                </div>
            </div>
            <button type="submit" class="btn-primary" style="margin-top:12px;">Save</button>
        </form>
    </div>
</section>

{% endblock %}