<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/default.css" rel="stylesheet">

    <script src="js/angular.js"></script>
    <script src="js/angular-resource.js"></script>
    <script src="js/app.js"></script>
</head>

<body class=keycloak-login-page data-ng-app=keycloak>
<div id=keycloak-login-container data-ng-controller=GlobalCtrl>
    <div id=keycloak-login-standard>
        <h1>Login to {{config.name}}</h1>

        <div class="alert alert-info" data-ng-show="info">{{info}}</div>
        <div class="alert alert-error" data-ng-show="error">{{error}}</div>

        <form action="#">
            <label for=username>Username</label>
            <input id=username type=text data-ng-model=username required/>

            <label for=password>Password</label>
            <input id=password type=text data-ng-model=password required/>

            <div>
                <button class="btn btn-primary" id=keycloak-login-submit type=submit>Login</button>
                <a class="btn" href="register.html?application={{config.id}}">Register</a>
                <a class="btn" href="{{config.callbackUrl}}">Cancel</a>
            </div>
        </form>
    </div>

    <div id=keycloak-login-social>
        <h3>Login with</h3>

        <div data-ng-repeat="p in config.providers">
            <a href="/keycloak-server/social/api/{{config.id}}/auth/{{p}}"><img data-ng-src="icons/{{p}}.png"/></a>
        </div>
    </div>
</div>

</body>
</html>