<!DOCTYPE doctype html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>g2p Studio</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='handsontable.full.min.css') }}"> -->
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='handsontable.main.css') }}"> -->

    <link rel="stylesheet" href="{{ url_for('static', filename='normalize.css') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='skeleton.css') }}">
    <!-- <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> -->

    <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
</head>

<body>
    <div class="container">
        <div class='row'>
            <div class='columns twelve center-text'>
                <h4 id='title'>Gⁱ-to-Pⁱ Studio
                    <span id="log">(Disconnected)</span></h4>
                <hr>
                <p>Welcome to the g2p Studio. Here, you can try out new lookup tables and export them to csv for use
                    with either <a href='//github.com/roedoejet/g2p'>g2p</a> or <a
                        href='//github.com/roedoejet/convertextract'>convertextract</a>. If you write a lookup table
                    that you want to add to the main g2p repo, please make a <a
                        href='//github.com/roedoejet/g2p/pulls'>pull
                        request</a>.</p>
            </div>
        </div>

        <div class='row'>
            <div class='columns twelve center-text'>
                <form id='textForm' name="textForm">
                    <input id='standard-radio' type="radio" name="texttype" value="plain" checked> Standard
                    <input id='animated-radio' type="radio" name="texttype" value="animated"> Animate
                </form>
            </div>
        </div>
        <br>
        <div id='standard' class='row'>
            <div class='columns six center-text'>
                <textarea id='input' spellcheck="false"></textarea>
            </div>
            <div class='columns six center-text'>
                <textarea id='output' spellcheck="false"></textarea>
            </div>
        </div>
        <div id='animated' style='display: none'>
            <div class='row'>
                <div class='columns twelve center-text'>
                    <form autocomplete='off' autocorrect='off'> 
                        <input autocomplete='off' autocorrect='off' id='indexInput' type="text" name="usrname"
                            maxlength="10">
                    </form>
                </div>
            </div>
            <div class='row'>
                <div class='columns twelve center-text'>
                    <div id="echart" style="width:100%; min-width: 400px; height:400px;"></div>
                </div>
            </div>
        </div>
        <br>
        <div class='row'>
            <div class='columns six'>
                <h4>Languages</h4>
                <select id="langselect">
                    <option value="custom">Custom</option>
                    {% for k, v in langs.items() %}
                    {% for mapping in v['mappings'] %}
                    <option value="{{ mapping['in_lang'] }}-to-{{ mapping['out_lang'] }}">{{ k }} -
                        {{ mapping['language_name'] }}
                        - {{ mapping['display_name'] }}
                    </option>
                    {% endfor %}
                    {% endfor %}
                </select>

            </div>
            <div class='columns six mg-top'>
                <form id='settings-form'>
                    <fieldset>
                        <legend>Settings</legend>
                        <div>
                            <input checked id='as_is' type='checkbox' name='as_is' value='as_is'>
                            <label for='as_is'>Leave order as is</label>
                        </div>
                        <div>
                            <input checked id='case_sensitive' type='checkbox' name='case_sensitive'
                                value='case_sensitive'>
                            <label for='case_sensitive'>Rules are case sensitive</label>
                        </div>
                        <div>
                            <input id='escape_special' type='checkbox' name='escape_special'
                                value='escape_special'>
                            <label for='escape_special'>Escape special characters</label>
                        </div>
                        <div>
                            <input id='reverse' type='checkbox' name='reverse' value='reverse'>
                            <label for='reverse'>Reverse the rules</label>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class='row'>
            <div class='columns twelve'>
                <h4>Custom Rules</h4>
                <button id='hot-add'>Add Rule</button>
                <div id="hot"></div>
                <h4>Rule Creator</h4>
                <button id='clear'>Clear</button>
                <button id='add'>Add to Rules</button>
                <button id='exportJS'>Export JavaScript</button>
                <button id='exportPY'>Export Python</button>
                <div id="blockly-container" class="blockly-editor">
                    <div id="blockly-div" style="height: 480px; width: 100%;"></div>
                    <xml id="toolbox" style="display: none">
                        <category name="Actions" colour="330">
                            <block type="create_rule"></block>
                        </category>
                        <category name="Input" colour="220">
                            <block type="lists_create_empty"></block>
                            <block type="lists_create_with"></block>
                            <block type="lists_getIndex"></block>
                            <block type="text"></block>
                            <block type="text_join"></block>
                            <block type="math_number"></block>
                            <block type="math_arithmetic">
                            </block>
                            <block type="abbreviations"></block>
                            <block type='variables_get'></block>
                            <block type='variables_set'></block>
                        </category>
                        <category name="Loops" colour="120" icon="icon_loops">
                            <block type="controls_forEach"></block>
                        </category>
                        <!-- <category custom="VARIABLE" name="Variables" colour="440">
                        </category> -->

                    </xml>
                </div>
            </div>
        </div>
        <div class='row mg-top'>
            <div class='columns twelve'>
                <h4>Custom Abbreviations</h4>
                <p>Follow the example below to create your own abbreviations to use in your rules.</p>
                <button id='varhot-add-row'>Add Row</button>
                <button id='varhot-add-col'>Add Column</button>
                <div id="varhot"></div>
            </div>
        </div>
        <div class='row'>
            <div class='columns twelve center-text'>
                <div class="export-buttons" class="visible">
                    <button id="export-rules">
                        Export Rules</button>
                </div>
                <div class="export-buttons" class="visible">
                    <button id="export-abbs">
                        Export Abbreviations</button>
                </div>
            </div>
        </div>
    </div>


    <!-- <script src="{{ url_for('static', filename='echart_custom.js') }}"></script> -->
</body>

<!-- <script src="{{ url_for('static', filename='jquery.min.js') }}"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- <script src="{{ url_for('static', filename='handsontable.full.min.js') }}"></script> -->
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>

<!-- <script src="{{ url_for('static', filename='socket.io.slim.js') }}"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>


<script src="{{ url_for('static', filename='blockly_compressed.js') }}"></script>
<script src="{{ url_for('static', filename='blocks_compressed.js') }}"></script>
<script src="{{ url_for('static', filename='en.js') }}"></script>
<script src="{{ url_for('static', filename='javascript_compressed.js') }}"></script>
<script src="{{ url_for('static', filename='python_compressed.js') }}"></script>

<script src="{{ url_for('static', filename='blockly_main.js') }}"></script>

<script src="{{ url_for('static', filename='echart_custom.js') }}"></script>
<script src="{{ url_for('static', filename='custom.js') }}"></script>
<script src="{{ url_for('static', filename='blocks.js') }}"></script>

</html>