{% load static %}
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>S как доллар</title>
    <link href="https://fonts.googleapis.com/css?family=Pattaya&amp;subset=cyrillic" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'skakdollar/css/main.css' %}" />
</head>

<body>
    <script>
        function translate() {
            var msg = window.message.value,
                xhr = new XMLHttpRequest();
            xhr.onload = function () {
                response = JSON.parse(this.response)['response'];
                window.result.innerHTML = response.join(', ');
            }
            xhr.open("POST", '{% url 'skakdollar:translate' %}');
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify({ 'msg': msg }));
        }
    </script>
    <div class="page">
        <div class="header">S как доллар</div>
        <form action='javascript:translate();'>
            <input id="message" name="message" type="text"/>
            <input type="submit" value="Перевести" />
        </form>
        <div id="result" name="result" />
    </div>
</body>
</html>
