{{#> 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">{{ meta.app_name }}</h1>
        <div class="box is-radiusless">
            <h4 class="title is-4 has-text-centered">Forgot Password</h4>
            <p class="subtitle is-6 mt-2 has-text-centered">An email will be sent to reset your password</p>

            {{#if email_available }}
            {{#unless (eq (len form.form_errors) 0) }}
            <div class="notification is-danger is-light">
                <b>Failed with errors:</b>
                <ul>
                    {{#each form.form_errors}}
                    <li>{{msg}}</li>
                    {{/each}}
                </ul>
            </div>
            {{/unless}}

            {{#if success }}
                <div class="notification is-success is-light">
                    An email has been sent if an account exists with that email address.
                </div>
            {{/if}}
            <form method="post" action="/auth/login?return_to={{return_to}}">
                <input type="hidden" name="_csrf" value="{{ csrf_token }}">
                <div class="field">
                    <div class="control has-icons-left">
                        <input required name="email" class="input {{#if errors.email}}is-danger{{/if}}" type="email" placeholder="Email">
                        <span class="icon is-small is-left">
                            <i class="fas fa-envelope"></i>
                        </span>
                    </div>
                    {{#if errors.email }}
                    <p class="help is-danger">{{errors.email}}</p>
                    {{/if}}
                </div>
                <hr>
                <div class="buttons">
                    <button class="button is-link is-fullwidth" type="submit" >Submit</button>
                </div>
            </form>
            {{else}}
            <div class="notification is-warning is-light">
                Email support is unavailable, please contact an administrator to reset your password.
            </div>
            {{/if}}
            <br>
            <span>
                <a href="/auth/login">Login</a>
                {{#if can_register}}
                | <a href="/auth/register">Register</a>{{/if}}
            </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>
        <p>Powered by <b><a href="{{meta.repo_url}}">{{ meta.app_name }}</a></b> v{{meta.app_version}}</p>
    </div>
{{/layouts/default}}