{% extends "layout.html" %}
{% set title ='BIBFRAME ScriptShifter' %}
{% block body %}

    <style>

        body{
            font-family: Avenir,Helvetica,Arial,sans-serif;
        }

        textarea{
            width: 99%;
            height: 15vh;
            padding: 0.5em;
        }

        fieldset.float-left {
            margin-right: 2rem;
        }

        #results{
            font-size: 1.25em;
            background-color: whitesmoke;
            margin-top: 1em;
            padding: 1em;
        }

        #feedback_cont {
            margin: 4em;
            padding: 4em;
            background-color: whitesmoke;
        }

        pre.warnings{
            border-left: 0.3rem solid #FF5722 !important;
        }

        .hidden {
            display: none !important;
        }

        p.input_descr {
            font-size: 80%;
            font-style: italic;
            margin-bottom: .5rem;
        }

        .center {
            display: block;
            margin: 20px auto;
        }

    </style>


    <form id="transliterate" action="/trans" method="POST">
        <fieldset>
            <label for="text">Input text</label>
            <textarea id="text" name="text"></textarea>
            <label for="lang">Language</label>
            <select id="lang" name="lang">
                {% for k, v in languages.items() %}
                    <option value="{{ k }}">{{ v["name"] }}</option>
                {% endfor %}
            </select>
        </fieldset>
        <div class="clearfix">
            <h3>General Options</h3>
            <fieldset class="float-left">
                <legend>Direction</legend>
                <div>
                    <label class="label-inline" for="s2r">Script to Roman</label>
                    <input
                            type="radio" id="opt_s2r" name="t_dir" value="s2r"
                            checked>
                </div>
                <div>
                    <label class="label-inline" for="r2s">Roman to script</label>
                    <input
                            type="radio" id="opt_r2s" name="t_dir" value="r2s">
                </div>
            </fieldset>
            <fieldset class="float-left">
                <legend>Capitalize</legend>
                <div>
                    <label class="label-inline" for="no-change">No change</label>
                    <input
                            type="radio" id="no-change" name="capitalize"
                                                         value="no_change" checked>
                </div>
                <div>
                    <label class="label-inline" for="first">First word</label>
                    <input type="radio" id="first" name="capitalize" value="first">
                </div>
                <div>
                    <label class="label-inline" for="all">All words</label>
                    <input type="radio" id="all" name="capitalize" value="all">
                </div>
            </fieldset>
        </div>
        <div id="options" class="clearfix"></div>

        <fieldset>
            <input class="button button-primary" type="submit" value="Transliterate!">
        </fieldset>

        {% if feedback_form %}
        <fieldset id="feedback_btn_cont" class="hidden">
            <input
                    id="feedback_btn" class="button button-outline"
                    value="Suggest improvements">
        </fieldset>
        {% endif %}
    </form>

    <div id="warnings-toggle" class="hidden">
        <pre class="warnings"><code id="warnings"></code></pre>
    </div>

    <div id="results_cont">
        <img id="loader_results" src="/static/loading.gif" class="hidden"/>
        <div id="results">Results will appear here.</div>
    </div>

    {% if feedback_form %}
    <div id="feedback_cont" class="hidden">
        <h2>Submit feedback</h2>
        <form
                id="feedback_form" action="/feedback"
                method="POST">
            <fieldset>
                <label class="label-inline" for="lang">Language</label>
                <input id="lang_fb_input" name="lang" disabled />
            </fieldset>
            <fieldset>
                <label class="label-inline" for="src">Input text</label>
                <input id="src_fb_input" name="src" disabled />
            </fieldset>
            <fieldset>
                <label class="label-inline" for="t_dir">Direction</label>
                <input id="t_dir_fb_input" name="t_dir" disabled />
            </fieldset>
            <fieldset>
                <label class="label-inline" for="result">Result</label>
                <textarea id="result_fb_input" name="result" disabled>
                </textarea>
            </fieldset>
            <fieldset>
                <label class="label-inline" for="expected">
                    Expected result
                </label>
                <textarea
                        id="expected_fb_input" name="expected"
                        style="background-color: white"></textarea>
            </fieldset>
            <fieldset>
                <label class="label-inline" for="contact">Contact</label>
                <input id="contact_fb_input" name="contact" />
            </fieldset>
            <fieldset>
                <label class="label-inline" for="notes">Notes</label>
                <textarea id="notes_fb_input" name="notes"></textarea>
            </fieldset>
                <input type="hidden" id="options_fb_input" name="options" />
            <fieldset>
            </fieldset>

            <button type="submit" class="button button-primary">
                Submit
            </button>
            <button
                    id="cancel_fb_btn"
                    class="button button-clear">Cancel</button>
        </form>
    </div>
    {% endif %}

    <script type="text/javascript" src="/static/ss.js"></script>
{% endblock %}