{% extends "base.html" %}

{% block content %}

<section class="hero is-medium">
    <div class="hero-body">
        <div class="column is-4 is-offset-4">
            <form class="box" method="POST" action="/signup">
                <h3 class="title">Регистрация</h3>
                <div class="field">
                    <label class="label">Email</label>
                    <p class="control has-icons-left">
                        <input class="input" type="email" name="email" placeholder="yourmail@mail.com" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-envelope"></i>
                        </span>
                    </p>
                </div>
                <div class="field">
                    <label class="label">Никнейм</label>
                    <p class="control has-icons-left">
                        <input class="input" type="username" name="username" placeholder="Username" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                    </dpiv>
                </div>
                <div class="field">
                    <label class="label">Пароль</label>
                    <p class="control has-icons-left">
                        <input class="input" type="password" name="password" placeholder="********" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-lock"></i>
                        </span>
                    </p>
                </div>
                <div class="field">
                    <label class="label">Повторите пароль</label>
                    <p class="control has-icons-left">
                        <input class="input" type="password" name="password_confirmation" placeholder="********" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-lock"></i>
                        </span>
                    </p>
                </div>
                <button class="button is-success is-outlined is-fullwidth">Зарегистрироваться</button>
            </form>
        </div>
    </div>
</section>

{% endblock %}