<div class="container" {{class}}>
    <div class="row d-flex justify-content-center">
        <div class="col-md-6">
            <form 
                {{#if id}}id="{{id}}"{{/if}}
                class="mt-3 mb-1" 
                method="post" 
                {{#if enctype}}enctype="{{enctype}}"{{/if}}
                {{#if action}}
                    action="{{action}}"
                {{else}}
                    {{#if id}}action="#{{id}}"{{/if}}
                {{/if}}
            >
                {{#if image}}
                    <div class="form-group d-flex justify-content-center align-items-center mb-2">
                        <img src="{{image}}"/>
                    </div>
                {{/if}}
                {{#if title}}
                    <h1 class="text-center mb-3">{{title}}</h1>
                {{/if}}
                {{#if (or error_message error_message_md)}}
                    <div class="alert alert-danger mb-3" role="alert">
                        <div class="alert-icon">
                            {{icon_img 'alert-circle'}}
                        </div>
                        <div class="overflow-auto w-100 remove-bottom-margin">
                            {{~error_message~}}
                            {{{~markdown error_message_md~}}}
                        </div>
                    </div>
                {{/if}}
                <label class="form-label" for="username">{{username}}</label>    
                <div class="input-icon mb-3">
                    <span class="input-icon-addon">{{icon_img (default username_icon 'user-circle')}}</span>
                    <input type="text" name="username" id="username" value="" class="form-control" placeholder="{{username}}" required="required" autofocus autocomplete="username"/>
                </div>
                <label class="form-label" for="password">{{password}}
                    {{#if forgot_password_text}}
                        <span class="form-label-description"><a href="{{forgot_password_link}}">{{forgot_password_text}}</a></span> 
                    {{/if}}
                </label>
                <div class="input-icon mb-3">
                    <span class="input-icon-addon">{{~icon_img (default password_icon 'key')~}}</span>
                    <input type="password" name="password" id="password" value="" class="form-control" placeholder="{{password}}" required="required" autocomplete="current-password" />
                </div>
                {{#if remember_me_text}}
                    <label class="form-check">
                        <input class="form-check-input" id="remember" name="remember" type="checkbox" />
                        <span class="form-check-label">{{remember_me_text}}</span>
                    </label>   
                {{/if}}
                <div class="form-group d-flex justify-content-center align-items-center">
                    <input 
                        class="btn
                        btn-{{default validate_color "primary"}}
                        {{#if validate_shape}} btn-{{validate_shape}} {{/if}}
                        {{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
                        {{#if validate_size}} btn-{{validate_size}} {{/if}}"
                        type="submit" 
                        name="submit"
                        value="{{default validate 'Login'}}"/>
                </div>
                {{#if (or footer footer_md)}}
                    <hr>
                    <div class="text-center mb-0">
                        <small class="form-hint mt-0">
                            {{#if footer}} 
                                {{footer}}
                            {{else}}
                                {{#if footer_md}}
                                    {{{markdown footer_md}}}
                                {{/if}}
                            {{/if}}
                        </small>
                    </div>
                {{/if}}
            </form>
        </div>
    </div>
</div>
