{% extends "silpa.html" %}
{% block modulescript %}
<script>
$(document).ready(function() {
$("form").submit(function(event)
{
    event.preventDefault();
    var jsonRequest = {
        "method" :  "chardetails.getdetails",
        "params" : [$("input[name=character]", 'form').val()],
        "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.empty();
            id_error.hide();
            id_progress.html("Checking. Please Wait..").show();
        },
        success: function(msg) {
            var resultobj =  msg.result ;
            id_progress.hide();
            // Render it
            characters = resultobj['Characters'];

            for (var index in characters) {
              var character = characters[index];
              chardetails = resultobj[character]
              var output = $("<div>")
                .append($('<h3>').text(character))
                .append($("<table>").addClass("table table-bordered"));

              for (var property in chardetails)
              {
                var row = $('<tr>')
                  .append($('<td>').text(property))
                  .append($('<td>').text(chardetails[property]));
                $('table', output).append(row);
              };
              id_result.append(output);
            };
        },
        error: function(msg) {
            id_progress.hide();
            id_error.html("Something went wrong. Please try again!").show();
        }
    });
});
});
</script>
{% endblock %}

{% block content %}
<div class="well">
  <h2>Unicode Character Details</h2></hr>
  <p>Enter a character to get the unicode details
  </p>
  <form class="form-horizontal" action="" method="post">
    <div class="control-group">
      <label class="control-label" for="character">Character :</label>
      <div class="controls">
        <input type="text" name="character" id="character"/>
        <button class="btn" type="submit" id="Char_Details">Get Details</button>
      </div>
    </div>
    </br>
  </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"></div>
</div>
{% endblock %}