{% extends 'base.html.twig' %}
{% block title %}Register - ServerControl{% endblock %}

{% block stylesheets %}
<style>
    .form-section-title {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: .75rem;
        padding-bottom: .4rem;
        border-bottom: 1px solid rgba(108,117,125,.2);
    }
    .field-icon { color: #6c757d; }
    .input-group-text { background: transparent; }
</style>
{% endblock %}

{% block body %}
<div class="row justify-content-center mt-5">
    <div class="col-md-5 col-lg-4">
        <div class="card">
            <div class="card-header py-3 d-flex align-items-center gap-2">
                <i class="bi bi-person-plus-fill fs-5 text-primary"></i>
                <div>
                    <h5 class="mb-0">Create account</h5>
                    <small class="text-muted">Join ServerControl</small>
                </div>
            </div>
            <div class="card-body p-4">
                {{ form_start(form) }}

                <p class="form-section-title"><i class="bi bi-person me-1"></i>Identity</p>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Email</label>
                    <div class="input-group">
                        <span class="input-group-text field-icon"><i class="bi bi-envelope"></i></span>
                        {{ form_widget(form.email, {attr: {class: 'form-control', placeholder: 'you@example.com'}}) }}
                    </div>
                    {{ form_errors(form.email) }}
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Pseudo</label>
                    <div class="input-group">
                        <span class="input-group-text field-icon"><i class="bi bi-at"></i></span>
                        {{ form_widget(form.pseudo, {attr: {class: 'form-control', placeholder: 'Your display name'}}) }}
                    </div>
                    {{ form_errors(form.pseudo) }}
                </div>

                <p class="form-section-title"><i class="bi bi-key me-1"></i>Password</p>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Password</label>
                    <div class="input-group">
                        <span class="input-group-text field-icon"><i class="bi bi-lock"></i></span>
                        {{ form_widget(form.plainPassword.first, {attr: {class: 'form-control', placeholder: '••••••••', id: 'pwd1'}}) }}
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePwd('pwd1','eye1')">
                            <i class="bi bi-eye" id="eye1"></i>
                        </button>
                    </div>
                    {{ form_errors(form.plainPassword.first) }}
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Confirm password</label>
                    <div class="input-group">
                        <span class="input-group-text field-icon"><i class="bi bi-lock-fill"></i></span>
                        {{ form_widget(form.plainPassword.second, {attr: {class: 'form-control', placeholder: '••••••••', id: 'pwd2'}}) }}
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePwd('pwd2','eye2')">
                            <i class="bi bi-eye" id="eye2"></i>
                        </button>
                    </div>
                    {{ form_errors(form.plainPassword.second) }}
                    {{ form_errors(form.plainPassword) }}
                </div>

                <div class="pt-2 border-top">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-person-check me-1"></i>Create account
                    </button>
                </div>

                {{ form_end(form) }}
            </div>
            <div class="card-footer text-center py-3 text-muted small">
                Already have an account? <a href="{{ path('app_login') }}">Login</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function togglePwd(inputId, eyeId) {
    const input = document.getElementById(inputId);
    const eye   = document.getElementById(eyeId);
    if (input.type === 'password') {
        input.type = 'text';
        eye.className = 'bi bi-eye-slash';
    } else {
        input.type = 'password';
        eye.className = 'bi bi-eye';
    }
}
</script>
{% endblock %}