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

{% block content_block %}
<div id="ng" ng-app="proso" ng-controller="auth">
    <h4>Flashcard</h4>
    <div class="pure-button pure-button-primary" ng-click="getFlashcard()">Get flashcard</div>
    <p>{% verbatim %}{{ msg }}{% endverbatim %}</p>
    <div class="fc">
        Flashcard id: {% verbatim %}{{ flashcard.id }}{% endverbatim %}
        <pre>{% verbatim %}{{ flashcard | json:4 }}{% endverbatim %}</pre>
    </div>
    <div ng-show="flashcard">
        <hr/>
        <h4>Answer</h4>
        <form ng-submit="service.saveAnswerToCurrentFC(answer.id, answer.rt, answer.meta)">
            <input type="number" required ng-model="answer.id" placeholder="FC Answered id"/>
            <input type="number" required ng-model="answer.rt" placeholder="Response time"/>
            <input type="text" ng-model="answer.meta" placeholder="Meta"/>
            <input type="submit" class="pure-button pure-button-primary" value="Save"/>
        </form>
    </div>
    <hr/>
    <h4>Service</h4>
    <pre>Current FC: {% verbatim %}{{ service.getCurrent() }}{% endverbatim %}</pre>
    <pre>{% verbatim %}{{ service.getConfig() | json:4 }}{% endverbatim %}</pre>
</div>
{% endblock %}


{% block head_block %}
    <script>
        var app = angular.module('proso', ["proso.apps", "ngCookies"]);
        var config_loaded;
        app.run(function(configService){
            configService.processConfig({{ config_json | safe }});
            // config_loaded = configService.load_config();
        });
        app.controller("auth", function($scope, practiceService){
            $scope.service = practiceService;
            practiceService.initSet("intro");
            // config_loaded.then(function(){ practiceService.init_set("intro")});

            $scope.getFlashcard = function(){
                practiceService.getFlashcard().then(
                        // called after FC is ready
                        function(flashcard) {
                            $scope.flashcard = flashcard;
                            $scope.msg = "";
                        },
                        // called on error (set complete)
                        function(msg){
                            $scope.flashcard = null;
                            $scope.msg = msg;
                        }
                );
            }
        });

    </script>
    <style>
        .fc { position: relative; cursor: help; }
        .fc pre{
            display: none;
            position: absolute;
            background-color: white;
            border: solid gray 1px;
            left: 20px;
            top: -20px;
        }
        .fc:hover pre{
            display: block;
        }
    </style>
{% endblock %}
