{% extends "silpa.html" %}
{% block modulescript %}
<script>
    $(document).ready(function() {
        $("form").submit(function(event)
        {
            event.preventDefault();
            var text= $("textarea[name=input_text]", 'form').val();

            var jsonRequest = {
                "method" :  "guesslanguage.guessLanguage",
                "params" : [text],
                "id" : ""
            };
            id_result = $('#result');
            id_error = $('#errormessage');
            id_progress = $('#progress');
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "JSONRPC",
                data: JSON.stringify(jsonRequest),
                dataType: "json",
                beforeSend:function(){
                    id_result.hide();
                    id_error.hide();
                    id_progress.html("Guessing. Please Wait...").show();
                },
                success: function(msg) {
                    id_progress.hide();
                    var result = msg.result;
                    console.log(result);
                    id_result.html("<p>"+result+"</p>").show();
                },

                error: function(msg) {
                    id_progress.hide();
                    id_error.html("Something went wrong. Please try again!").show();
                }
            });
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="well">
    <h2>Guess the language</h2></hr>
    <p class="help-block">Enter the text for guessing the language in the below text area.
         You can give the text in any language and even with mixed language
        </p>
    <form class="form-horizontal" action="" method="post">
        <textarea  name='input_text' id='id1' rows="10" style="width: 98.5%;"></textarea>
        <span class="help-block"></span>
        <div class="control-group">
            <div class="controls">
                <button class="btn" type="submit" id="Convert">Guess</button>
            </div>
        </div>
    </form>
    <hr/>
    <div id="progress" class="alert alert-info hide"></div>
    <div id="successmessage" class="alert alert-success hide"></div>
    <div id="errormessage" class="alert alert-error hide"></div>
    <div id="result" class="alert alert-success hide"></div>
</div>
{% endblock %}