{% extends "base.html" %}
{% block title %}Device Login{% endblock %}
{% block content %}
<div style="max-width:440px; margin:2rem auto;">
    <h1>Device Login</h1>

    {% if expired or record is none %}
    <div class="card">
        <p>This login code has expired or doesn't exist.</p>
        <p class="text-dim">Run <code>cpm login</code> again to get a new code.</p>
    </div>
    {% elif record.status == 'pending' %}
    <div class="card">
        <p>A CLI on another machine wants to sign in to your account.</p>
        <p>Code: <strong style="font-size:1.3rem; letter-spacing:0.1em;">{{ record.code }}</strong></p>
        {% if user %}<p class="text-dim">Signing in as {{ user.email }}</p>{% endif %}
        <form method="POST" action="/auth/device/approve" style="display:inline;">
            <input type="hidden" name="code" value="{{ record.code }}">
            <button type="submit" class="btn btn-primary">Approve</button>
        </form>
        <form method="POST" action="/auth/device/deny" style="display:inline; margin-left:0.5rem;">
            <input type="hidden" name="code" value="{{ record.code }}">
            <button type="submit" class="btn btn-danger">Deny</button>
        </form>
    </div>
    {% elif record.status == 'approved' %}
    <div class="card">
        <p>✅ Approved <strong>{{ record.code }}</strong>.</p>
        <p class="text-dim">Return to your terminal — login should complete shortly.</p>
    </div>
    {% else %}
    <div class="card">
        <p>This login code was already used.</p>
        <p class="text-dim">Run <code>cpm login</code> again if needed.</p>
    </div>
    {% endif %}
</div>
{% endblock %}