{% extends 'user_base.html' %}
{% load staticfiles %}

{% block content_block %}

<div id="ng" ng-app="proso" ng-controller="auth">
    <h2>Angular service for user</h2>
    <div ng-show="user_service.error.error">{% verbatim %}{{ user_service.error.error }}{% endverbatim %}</div>
    <div ng-show="user_service.status.loading">Komunikujem se serverem</div>
    <input type="button" class="pure-button pure-button-primary" ng-click="user_service.loadSession()" value="Get session"/>
    <div ng-show="user_service.status.logged && !user_service.status.loading">
        <hr/>
        User: {% verbatim %}{{ user_service.user.username }}{% endverbatim %}
        <input type="button" class="pure-button pure-button-primary" ng-click="user_service.logout()" value="Logout"/>
        <form ng-submit="user_service.updateProfile(user_service.update)">
            <p>Update user:</p>
            <input type="text" ng-model="user_service.update.user.first_name" placeholder="First Name"/>
            <input type="text" ng-model="user_service.update.user.last_name" placeholder="Last Name"/>
            <input type="password" ng-model="user_service.update.user.password" placeholder="Password"/>
            <input type="password" ng-model="user_service.update.user.password_check" placeholder="Password Again"/>
            <p>Update profile:</p>
            <label>Send Emails <input type="checkbox" ng-model="user_service.update.send_emails"/> </label>
            <label>Public <input type="checkbox" ng-model="user_service.update.public"/> </label>
            <input type="submit" class="pure-button pure-button-primary" value="Update"/>
            {% verbatim %}{{ user_service.update | json:4 }}{% endverbatim %}
        </form>
    </div>
    <div ng-hide="user_service.status.logged || user_service.status.loading">
        <hr/>
        <h4>Login</h4>
        <form ng-submit="user_service.login(login.username, login.password)">
            <input type="text" required ng-model="login.username" placeholder="User Name"/>
            <input type="password" required ng-model="login.password" placeholder="Password"/>
            <input type="submit" class="pure-button pure-button-primary" value="Login"/>
        </form>
        <br/>
        <input type="button" class="pure-button pure-button-primary" ng-click="user_service.loginGoogle()" value="with Google"/>
        <input type="button" class="pure-button pure-button-primary" ng-click="user_service.loginFacebook()" value="with Facebook"/>

        <hr/>
        <h4>Sign up</h4>
        <form ng-submit="user_service.signup(signup)">
            <input type="text" required ng-model="signup.username" placeholder="User Name"/>
            <input type="email" required ng-model="signup.email" placeholder="E-mail"/>
            <input type="password" required ng-model="signup.password" placeholder="Password"/>
            <input type="password" required ng-model="signup.password_check" placeholder="Password Again"/>
            <input type="text" ng-model="signup.first_name" placeholder="First Name"/>
            <input type="text" ng-model="signup.last_name" placeholder="Last Name"/>
            <input type="submit" value="Sing Up"/>
        </form>
        <pre>{% verbatim %}{{ signup | json:4 }}{% endverbatim %}</pre>
    </div>
    <hr/>
    <h4>User object</h4>

    <pre>{% verbatim %}{{ user_service.status | json:4 }}{% endverbatim %}</pre>

    <hr/>
    <h4>User object</h4>
    <pre>{% verbatim %}{{ user_service.user | json:4 }}{% endverbatim %}</pre>

    <h4>Error</h4>
    <pre>{% verbatim %}{{ user_service.error | json:4 }}{% endverbatim %}</pre>

</div>
{% endblock %}


{% block head_block %}
    <script>
        var app = angular.module('proso', ["proso.apps"]);
        app.config(function($httpProvider) {
            $httpProvider.defaults.xsrfCookieName = 'csrftoken';
            $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
        });
        app.controller("auth", function($scope, userService){
            $scope.user_service = userService;
            userService.processUser({{ user | safe }});
        });

        var social_auth_callback = function(){
            var element = angular.element(document.getElementById("ng"));
            element.injector().get("userService").loadUserFromJS(element.scope());
        };
    </script>
{% endblock %}
