<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <title>Polynom converter</title>
    <link href="{% static 'css/navigation.css' %}" rel="stylesheet" />
    <link href="https://yandex.st/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script type='text/javascript' src="{% static 'js/xmlhttp.js' %}"></script>
    <script type='text/javascript' src="{% static 'js/answer_set.js' %}"></script>
    <script type='text/javascript' src="{% static 'js/cgi_switcher.js' %}"></script>
</head>
<style>
    .btn-main-link {
        background-color: #6b4170;
    }
    .btn-main-link:after {
        border-left-color: #6b4170;
    }
</style>
<script type="text/javascript">
    let service = '{{ service }}';

    function set_answer(status, answer) {
        do_set_answer(status, answer, 'polynom_answer');
    }

    function do_convert(action, input_id, output_id) {
        let url = '{% url "polynom_converter" %}?do=1&service=' + service + '&action=' + action;
        let pars = get_cgi_params();
        if (pars.hasOwnProperty('dm')) {
            url += '&dm=' + pars['dm'];
        }
        let content = document.getElementById(input_id).value;
        document.getElementById(output_id).value = '';
        set_answer(statuses.loading, 'converting...');

        let xmlhttp = getXmlHttp();
        xmlhttp.open('POST', url);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status === 200) {
                    document.getElementById(output_id).value = xmlhttp.responseText;
                    set_answer(statuses.ok, 'converted successfully');
                } else {
                    set_answer(statuses.error, 'error: ' + xmlhttp.responseText);
                }
            }
        };
        xmlhttp.send(content);
    }
    function polynom_hr2coded() {
        do_convert('encode', 'te_polynom_hr', 'te_polynom_coded');
    }
    function polynom_coded2hr() {
        do_convert('decode', 'te_polynom_coded', 'te_polynom_hr');
    }
</script>
<body>
<button class="btn-main-link"><a href="{% url 'main' %}" class="main-link">SAAS</a></button>
<div style="margin:8px">
<h3>Polynom conversion for {{ service }}</h3>
<table width='100%' border='0' frame='void'>
    <tr align='center'>
        <td><h4>Human readable</h4></td>
        <td></td>
        <td><h4>Encoded</h4></td>
    </tr>
    <tr>
        <td>
            <textarea id='te_polynom_hr' style='width:100%;height:100px;'></textarea>
        </td>
        <td align='center'>
            <input id='btn-polynom-hr2coded' type='button' value='->' onclick='polynom_hr2coded()'>
            <br>
            <input id='btn-polynom-coded2hr' type='button' value='<-' onclick='polynom_coded2hr()'>
        </td>
        <td>
            <textarea id='te_polynom_coded' style='width:100%;height:100px;'></textarea>
        </td>
    </tr>
</table>
<div id = 'polynom_answer'></div>
</div>
</body>
</html>
