<div id="userModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <br/>
            </div>
            <div class="modal-body">
                <form id="frmLogout" role="form" ng-show="config.loggedIn">
                    <h3>You are logged in!</h3>
                </form>
                
                <!-- LOGIN -->
                <form id="frmLogin" ng-show="state=='login'" role="form">
                    <h3>{{ 'LOGIN' | translate }}</h3>
                    <div class="form-group">
                        <label for="txtEmail">{{ 'EMAIL' | translate }}</label>
                        <input type="email" ng-model="email" class="form-control" id="txtEmail" placeholder="E-mail adres" name="email" />
                    </div>
                    <div class="form-group">
                        <label for="txtPass">{{ 'PASSWORD' | translate }}</label>
                        <input type="password" class="form-control" ng-model="password" id="txtPass" placeholder="{{ 'PASSWORD' | translate }}" name="password" />
                    </div>
                    <button type="submit" ng-click="loginToggle()" class="btn btn-default btn-block">{{ 'LOGIN' | translate }}</button>
                    <br/>
                    <div ng-if="config.userAllowRegister">
                    Don't have an account? <button type="submit" ng-click="state='register'" class="btn btn-primary">{{ 'REGISTER' | translate }}</button>
                    </div>
                    <!--<br />-->
                    <!--<h4>{{ 'LOGIN' | translate }} with</h4>-->
                    <!--<a href="#" class="btn btn-primary bt-social" data-provider="facebook">Facebook</a>-->
                    <!--<a href="#" class="btn btn-info bt-social" data-provider="twitter">Twitter</a>-->
                    <!-- <a href="#" class="btn btn-danger bt-social" data-provider="google">Google+</a> -->
                    <!--<a href="#" class="btn btn-default bt-social" data-provider="github">GitHub</a>-->
                    <!--<a href="#" class="btn btn-warning" id="btAnon">Anon</a>-->
                </form>
                <!-- / LOGIN -->

                <!-- PROFILE -->
                <form id="frmProfile" role="form" ng-show="state=='profile'">
                    <h3>Profile</h3>
                    <br />
                    <div class="form-group">
                        <label for="txtName">Name</label>
                        <input type="text" class="form-control" id="txtName" ng-model="config.users[config.uid].name" placeholder="Name" name="name" />
                    </div>
                    <div class="form-group">
                        <label for="permissions">Permissions</label>
                        <select id="permissions" name="permissions" ng-model="config.users[config.uid].role" class="form-control">
                            <option>editor</option>
                            <option>beheerder</option>
                            <option>admin</option>
                        </select>
                    </div>
                    <button type="submit" ng-click="saveDb()" class="btn btn-primary">Update</button>
                    <button type="submit" ng-click="loginToggle()" class="btn btn-primary">{{ 'LOGOUT' | translate }}</button>
                </form>
                <!-- / PROFILE -->

                <!-- REGISTER -->
                <form id="frmRegister" role="form" ng-show="state=='register'">
                    <h3>{{ 'REGISTER' | translate }}</h3>
                    <div class="form-group">
                        <label for="txtEmail">Email address</label>
                        <input type="email" ng-model="email" class="form-control" id="txtEmail" placeholder="Enter email" name="email" />
                    </div>
                    <div class="form-group">
                        <label for="txtPass">{{ 'PASSWORD' | translate }}</label>
                        <input type="password" ng-model="password" class="form-control" id="txtPass" placeholder="{{ 'PASSWORD' | translate }}" name="password" />
                    </div>
                    <button type="submit" ng-click="register()" class="btn btn-default">{{ 'REGISTER' | translate }}</button>
                </form>
                <!-- / REGISTER -->

                <!-- ALERT BOX -->
                <div id="alert" class="alert" role="alert" ng-show="config.userError">
                    <h4 id="alert-title">{{ config.userError | translate }}</h4>
                    <p id="alert-detail"></p>
                </div>
                <!-- / ALERT BOX -->

            </div>
            <!--<div class="modal-footer">-->
                <!--<div class="form-group">-->
                    <!--<button type="submit" class="btn btn-success">{{ 'SUBMIT' | translate }}</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; The form is not valid. </p>-->
                    <!--<button class="btn pull-right" data-dismiss="modal" aria-hidden="true">{{ 'CANCEL' | translate }}</button>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>