{{#> layouts/default body-class="has-background-white-ter login-bg" }}
    <br><br>
    <div class="container py-6" style="width:20%"> <!-- TODO: fix width on mobile -->
        <h1 class="title is-1 has-text-centered">storage-app</h1>
        <div class="box is-radiusless">
            <h4 class="title is-4 has-text-centered">Register</h4>
            {{#if can_register }}
            <form method="post" action="/auth/register">
                <div class="field">
                    <label class="label">Username</label>
                    <div class="control has-icons-left">
                        <input required name="username" class="input" type="text" placeholder="Username">
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                    </div>
                    {{!-- <p class="help is-success">This username is available</p> --}}
                </div>
                <div class="field">
                    <label class="label">Email</label>
                    <div class="control has-icons-left">
                        <input required name="username" class="input" type="email" placeholder="Email">
                        <span class="icon is-small is-left">
                            <i class="fas fa-email"></i>
                        </span>
                    </div>
                    {{!-- <p class="help is-success">This username is available</p> --}}
                </div>
                <div class="field">
                    <label class="label">Password</label>
                    <div class="control has-icons-left">
                        <input required name="password" class="input" type="password" placeholder="hunter2">
                        <span class="icon is-small is-left">
                            <i class="fas fa-key"></i>
                        </span>
                    </div>
                    {{!-- <p class="help is-success">This username is available</p> --}}
                </div>
                <div class="field">
                    <label class="label">Password (confirm)</label>
                    <div class="control has-icons-left">
                        <input required name="password" class="input" type="password" placeholder="hunter2">
                        <span class="icon is-small is-left">
                            <i class="fas fa-key"></i>
                        </span>
                    </div>
                    {{!-- <p class="help is-success">This username is available</p> --}}
                </div>
                <hr>
                <div class="buttons">
                    <button class="button is-link is-fullwidth" type="submit" >Register</button>
                </div>
            </form>
            {{else}}
            <div class="block ml-2 content">
                <p><i class="fas fa-xmark"></i>Registeration has been disabled</p>

                {{!-- <p>Contact administrator</p> --}}
            </div>
            {{/if}}
            <span>
                <a href="/auth/login">Login</a>
            </span>
            <div class="field is-pulled-right">
                <div class="control">
                    <div class="select is-small">
                        <select>
                            <option selected value="en-us">English</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{/layouts/default}}