<div class="col-sm-12 col-md-8 col-lg-4 col-md-offset-2 col-lg-offset-4">
    <form role="form">
        <div class="panel panel-default">
            <header class="panel-heading">
                <strong class="panel-title">Login</strong>
            </header>

            <section class="panel-body">
                <FwNotifications @outlet="login" />

                <FwValidatedTextfield @valuePath="identification" @model={{model}} @label="Username/Email" @placeholder="Username/Email" @name="identification" @update={{action (mut model.identification)}} @autofocus={{true}} @showCount={{false}} />

                <FwValidatedTextfield @valuePath="password" @model={{model}} @label="Password" @placeholder="Password" @name="password" @type="password" @update={{action (mut model.password)}} @showCount={{false}} />

                {{#if jokeOfTheDay}}
                    {{jokeOfTheDay.question}}
                    <button class="btn btn-primary btn-xs" type="button" {{action "showAnswer"}}>
                        <i class="fa-solid fa-eye"></i>
                    </button>
                {{/if}}
            </section>

            <footer class="panel-footer clearfix">
                <FwPromiseButton @id="loginButton" @promise={{action "login"}} @type="submit" @class="pull-left btn btn-sm btn-primary">
                    <i class="fa-regular fa-thumbs-up"></i>
                    Login
                </FwPromiseButton>

                <LinkTo @route="forgot" @role="button" class="pull-right btn btn-sm btn-default">
                    <i class="fa-regular fa-circle-question"></i>
                    Forgot?
                </LinkTo>
            </footer>
        </div>
    </form>
</div>
