{% extends app.fronthtml~"/base.twig" %}
{% block content %}
    <form class="form-horizontal" method="post">
        <div class="form-group">
            <label class="control-label col-sm-12" for="name">Solution's name:</label>
            <div class="col-sm-12">
                <input type="text" class="form-control" required="required" name="name" placeholder="Enter solution's name">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-12" for="description">Description</label>
            <div class="col-sm-12">
                <input type="text" class="form-control" required="required" name="description" placeholder="Add a description">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-12" for="lang">Language:</label>
            <div class="col-sm-12">
                <select id="lang" name="lang" required="required" class="form-control">
                    <option value=""></option>
                    {% for key,value in supported %}
                        <option value="{{ key }}">{{ value[0] }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-6" for="lang">Name of external library, if needed:</label>
            <label class="control-label col-sm-6" for="lang">It needs a specific version of this library?:</label>
            <div class="col-sm-6">
                <input type="text" name="extlib" id="extlib" placeholder="Name of library"/>
            </div>
            <div class="col-sm-6">
                <input type="text" name="extlibver" id="extlibver" placeholder="Version used, only if needed"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-6" for="input">Input example:</label>
            <label class="control-label col-sm-6" for="output">Output example:</label>
            <div class="col-sm-6">
                <textarea class="form-control" required="required" name="input" placeholder="Input example" rows="4"></textarea>
            </div>
            <div class="col-sm-6">
                <textarea class="form-control" required="required" name="output" placeholder="Output example" rows="4"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-12" for="code">Code:</label>
            <div class="col-sm-12">
                <textarea class="form-control" required="required" name="code" placeholder="Paste here your code" rows="15"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12 col-sm-12">
                <button type="submit" class="btn btn-success btn-block">Submit</button>
            </div>
        </div>
    </form>
{% endblock %}
{% block css %}
    <style>
        .control-label {
            text-align: left !important;
            font-weight: bold;
        }
        textarea {
            line-height: 20px;
            font-family: monospace;
            font-size: 12px !important;
        }

        input {
            width: 100%;
        }
    </style>
{% endblock %}

{% block js %}
    <script>
        function verRequired() {
            if(extlib.value=="")
                extlibver.removeAttribute("required");
            else
                extlibver.setAttribute("required","required");
            if(extlib2.value=="")
                extlibver2.removeAttribute("required");
            else
                extlibver2.setAttribute("required","required");
        }
        extlib = document.getElementById("extlib");
        extlibver=document.getElementById("extlibver");
        extlib2 = document.getElementById("extlib2");
        extlibver2=document.getElementById("extlibver2");
        extlib.onkeyup=verRequired;
        extlib2.onkeyup=verRequired;
    </script>
{% endblock %}