{% extends "base.html" %}
{% block title %}Create API Token{% endblock %}
{% block content %}
<h1>Create API Token</h1>

<div class="card" style="max-width:560px;">
    <form method="POST">
        <label>Token Name
            <input type="text" name="name" placeholder="e.g. CI/CD Pipeline" required>
        </label>

        <label>Expires
            <select name="expiry">
                <option value="never">Never</option>
                <option value="30">30 days</option>
                <option value="90">90 days</option>
                <option value="365">1 year</option>
            </select>
        </label>

        <h3>Scopes</h3>
        <p class="text-dim" style="margin-bottom:.75rem;">Select which packages and actions this token can access.</p>

        <fieldset>
            <legend>All Packages</legend>
            <label style="display:inline-flex; margin-right:1rem;"><input type="checkbox" name="scope_*_publish"> publish</label>
            <label style="display:inline-flex; margin-right:1rem;"><input type="checkbox" name="scope_*_unpublish"> unpublish</label>
            <label style="display:inline-flex;"><input type="checkbox" name="scope_*_read"> read</label>
        </fieldset>

        {% if packages %}
        <h3>Per-package</h3>
        {% for pkg in packages %}
        <div style="margin-bottom:.5rem; padding:.6rem .75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px;">
            <strong>{{ pkg.name }}</strong><br>
            <label style="display:inline-flex; margin-right:1rem;"><input type="checkbox" name="scope_{{ pkg.id }}_publish"> publish</label>
            <label style="display:inline-flex; margin-right:1rem;"><input type="checkbox" name="scope_{{ pkg.id }}_unpublish"> unpublish</label>
            <label style="display:inline-flex;"><input type="checkbox" name="scope_{{ pkg.id }}_read"> read</label>
        </div>
        {% endfor %}
        {% endif %}

        <div class="btn-group mt-2">
            <button type="submit" class="btn btn-primary">Create Token</button>
            <a href="/tokens" class="btn btn-outline">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}