{% extends "base.html" %}

{% block title %}Step 1 — Account · Furtka Installer{% endblock %}
{% block step_indicator %}<span class="step-indicator">Step 1 of 3</span>{% endblock %}

{% block content %}
<h1>Name &amp; account</h1>
<p class="lede">Set the server name and your administrator account.</p>

{% if errors %}
<div class="alert alert-error" role="alert">
    <strong>Please fix the following:</strong>
    <ul>
        {% for e in errors %}<li>{{ e }}</li>{% endfor %}
    </ul>
</div>
{% endif %}

<form method="post" action="{{ url_for('install_step_1') }}">
    <div class="field">
        <label for="hostname">Server name</label>
        <input type="text" id="hostname" name="hostname" required value="{{ values.hostname }}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-describedby="hostname-hint" />
        <span class="hint" id="hostname-hint">You'll open your server at <strong>http://<span id="hostname-preview">{{ values.hostname or "furtka" }}</span>.local</strong>. Letters, numbers and dashes only.</span>
    </div>
    <div class="field">
        <label for="username">Admin username</label>
        <input type="text" id="username" name="username" required value="{{ values.username }}" autocomplete="username" autocapitalize="off" spellcheck="false" aria-describedby="username-hint" />
        <span class="hint" id="username-hint">Your login name on the server. You'll use this to sign in after installation.</span>
    </div>
    <div class="field">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password" aria-describedby="password-hint" />
        <span class="hint" id="password-hint">At least 8 characters. This one password is used for the web login and for the server itself (SSH / console), so pick a good one.</span>
    </div>
    <div class="field">
        <label for="password2">Confirm password</label>
        <input type="password" id="password2" name="password2" required autocomplete="new-password" />
    </div>
    <div class="field">
        <label for="language">Language</label>
        <select id="language" name="language" aria-describedby="language-hint">
            {% for code, lang in languages.items() %}
            <option value="{{ code }}" {% if code == values.language %}selected{% endif %}>{{ lang.label }}</option>
            {% endfor %}
        </select>
        <span class="hint" id="language-hint">Language and keyboard layout of the installed server. The Furtka pages themselves are in English for now.</span>
    </div>

    <div class="actions">
        <button type="submit" class="btn btn-primary">Next — pick a disk</button>
    </div>
</form>
<script>
(function () {
    var input = document.getElementById('hostname');
    var preview = document.getElementById('hostname-preview');
    input.addEventListener('input', function () {
        preview.textContent = input.value.trim().toLowerCase() || 'furtka';
    });
})();
</script>
{% endblock %}