{% extends "setup/_setup_base.html" %}

{% block title %}Unlock Pychestrate{% endblock %}

{% block content %}
<h1>Unlock Pychestrate</h1>
<p class="lede">First-run setup. Enter the initial admin token to continue.</p>

<div class="step">
    <h2>1. Read the token from the server</h2>
    <p>The token was generated on first boot and written to:</p>
    <div class="copy-block">
        <pre class="path" id="token-path">{{ token_path }}</pre>
        <button type="button" class="btn btn-secondary btn-sm" data-copy-from="token-path" aria-label="Copy the token file path">Copy</button>
    </div>
    <p>From a shell on the server, run:</p>
    <div class="copy-block">
        <pre class="path" id="token-command">sudo cat {{ token_path }}</pre>
        <button type="button" class="btn btn-secondary btn-sm" data-copy-from="token-command" aria-label="Copy the command">Copy</button>
    </div>
    <p class="copy-status" role="status" aria-live="polite"></p>
</div>

<div class="step">
    <h2>2. Paste it below</h2>
    <form method="post" action="/setup/unlock">
        <div class="form-group">
            <label for="token">Initial admin token</label>
            <div class="actions-row">
                <input type="password" id="token" name="token" class="form-control mono" required autofocus
                       spellcheck="false" autocapitalize="off" autocomplete="off"
                       aria-describedby="token-help{% if error %} token-error{% endif %}"{% if error %} aria-invalid="true"{% endif %}>
                <button type="button" class="btn btn-secondary btn-sm" data-reveal-for="token" aria-pressed="false" aria-controls="token">Show</button>
            </div>
            <p class="form-text" id="token-help">Paste the whole line. Leading or trailing whitespace is ignored.</p>
            {% if error %}
            <div class="form-error" id="token-error" role="alert">{{ error }}</div>
            {% endif %}
        </div>
        <button type="submit" class="btn btn-primary btn-block">Continue</button>
    </form>
</div>

<p class="footer">Once setup is complete, this page is no longer available.</p>
{% endblock %}