{% extends "silpa.html" %}
{% block modulescript %}
<script>
$(document).ready(function() {
    $("form").submit(function(event)
    {
        event.preventDefault();
        var text = $("textarea[name=input_text]", 'form').val(),
            font = $("select[name=font]", 'form').val(),
            direction = $("select[name=direction]", 'form').val(),
            id_result = $('#result'),
            id_error = $('#errormessage'),
            id_progress = $('#progress'),
            jsonRequest = {
                module: "libindic.payyans",
                method: (direction == "a2u" ?
                    "ASCII2Unicode" : "Unicode2ASCII"),
                params: [text, font],
                id: ""
            };

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "api",
            data: JSON.stringify(jsonRequest),
            dataType: "json",
            beforeSend:function(){
                id_result.hide();
                id_error.hide();
                id_progress.html("Converting. Please Wait...").show();
            },
            success: function(msg) {
                id_progress.hide();
                id_result.html(msg.result.replace("\n", "&#13;")).show();
            },
            error: function(msg) {
                id_progress.hide();
                id_error.html("Something went wrong. Please try again!").show();
            }
        });
    });
});
</script>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>ASCII - Unicode Conversion</h1>
</div>

<p class="help-block">Enter the text for conversion in the below text area.</p>

<form action="" method="post">
<div class="form-horizontal">
    <div class="form-group">
        <textarea name='input_text' id='id1' rows="10" class="form-control ime"></textarea>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-1" for="font">Font</label>

        <div class="col-sm-3">
            <select id="font" name="font" class="form-control">
                <option value="ambili">Ambili</option>
                <option value="valluvar">Valluvar</option>
                <option value="karthika">Karthika</option>
                <option value="matweb">Mathrubhumi</option>
                <option value="manorama">Manorama</option>
                <option value="revathi">Revathi</option>
                <option value="uma">Uma</option>
                <option value="panchari">Panchari</option>
                <option value="nandini">Nandini (ML-TT)</option>
                <option value="haritha">Haritha</option>
                <option value="indulekha">Indulekha</option>
		<option value="banglapedia">Banglapedia</option>
            </select>
        </div>

        <label class="control-label col-sm-2" for="direction">Direction</label>

        <div class="col-sm-3">
            <select id="direction" name="direction" class="form-control">
                <option value="a2u">ASCII to Unicode</option>
                <option value="u2a">Unicode to ASCII</option>
            </select>
        </div>

        <div class="col-sm-3">
            <button class="btn btn-default pull-right" type="submit" id="Convert">Convert</button>
        </div>
    </div>
</form>

<div id="progress" class="alert alert-info silpa-hide"></div>
<div id="errormessage" class="alert alert-danger silpa-hide"></div>

<p id="result"></p>

</div>
{% endblock %}