{% 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>Account &amp; hostname</h1>
<p class="lede">Set the server name and your administrator account.</p>

{% if errors %}
<div class="alert alert-error">
    <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">Hostname</label>
        <input type="text" id="hostname" name="hostname" required value="{{ values.hostname }}" autocomplete="off" />
        <span class="hint">The name your server shows up as on your home network. Lowercase 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" />
        <span class="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 autocomplete="new-password" />
        <span class="hint">At least 8 characters.</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">
            {% for code, lang in languages.items() %}
            <option value="{{ code }}" {% if code == values.language %}selected{% endif %}>{{ lang.label }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="actions">
        <button type="submit" class="btn btn-primary">Next — pick boot drive</button>
    </div>
</form>
{% endblock %}