{% extends "base.twig" %}
{% block content %}
    <div id="ajaxPut">
        <div class="codebox">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                {% include "codebox.twig" %}
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <h3>Input example</h3>
            <pre class="IOExample">{{ code.input }}</pre>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <h3>Output example</h3>
            <pre class="IOExample">{{ code.output }}</pre>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            {% if user.nick is defined and user.IDU == code.idu %}
                <button class="btn btn-primary btn-lg col-md-6" style="margin: 10px 0;" data-toggle="modal" data-target="#modify">Edit</button>
            {% endif %}
            <div class="col-md-3"></div>
        </div>
        {% if user.ROLE == 3 %}
            <a href="?page=del&id={{ code.idc }}&lang={{ code.lang }}&version={{ code.version }}" class="btn btn-danger">Delete source</a>
        {% endif %}
        {% if page.otherV %}
            <div style='text-align: center; font-size: 22px; '><a href='?page=code&id={{ code.idc }}&lang={{ code.lang }}'>View version's history</a></div>
        {% endif %}
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align:center;"><h3>Other implementations</h3>
        </div>
        {% if page.otherI %}
            {% for i in otherImplementation %}
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style='text-align: center;'>
                    <table>
                        <tr>
                            <th>
                                <a href="?page=code&id={{ code.idc }}&lang={{ i.lang }}&version={{ i.version }}">Link</a>
                            </th>
                        </tr>
                        <tr>
                            <td><strong>Lang: </strong>{{ i.lLang }}</td>
                        </tr>
                        <tr>
                            <td>
                                <pre><code class='{{ i.lang }}'>{{ i.code }}</code></pre>
                            </td>
                        </tr>
                    </table>
                </div>
            {% endfor %}
        {% endif %}
        {% if user.nick is defined %}
            <div class="col-lg-4 col-md-4 col-sm-12 col-s-12" style="text-align: center;">
                <button type="button" class="btn btn-default btn-lg btn-block btn-primary" data-toggle="modal"
                        data-target="#otherImplementation" style="margin: 35% 0;">Add other implementation
                </button>
            </div>
        {% endif %}
    </div>
    {% if user.nick is defined %}
        <div id="otherImplementation" class="modal fade" role="dialog" aria-labelledby="otherImplementation"
             aria-hidden="true">
            <div class="vertical-alignment-helper">
                <div class="modal-dialog vertical-align-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5>Contribute with other implementation</h5>
                        </div>
                        <div class="modal-body">
                            <form method="post">
                                <div class="col_full">
                                    <label for="lang">Language:</label>
                                    <select id="lang" name="lang" required="required" class="form-control">
                                        <option value=""></option>
                                        {% for key,value in supported %}
                                            {% if key not in page.existedLangs %}
                                                <option value="{{ key }}"> {{ value }} </option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col_full">
                                    <label for="code">Code:</label>
                                    <textarea style="width: 100%" rows="{{ code.rows }}" required="required" name="code" id="code"></textarea>
                                </div>
                                <div class="col_full">
                                    <button class="btn btn-default btn-lg btn-block btn-success" type="submit">Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if user.nick is defined and user.IDU == code.idu%}
        <div id="modify" class="modal fade" role="dialog" aria-labelledby="modify"
             aria-hidden="true">
            <div class="vertical-alignment-helper">
                <div class="modal-dialog vertical-align-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5>Modify your share</h5>
                        </div>
                        <div class="modal-body">
                            <form method="post">
                                {% if page.original == user.IDU %}
                                    <div class="col_full">
                                        <label for="name">Name:</label>
                                        <input type="text" name="name" value="{{ code.name }}" id="name" required="required">
                                    </div>
                                    <div class="col_full">
                                        <label for="description">Description:</label>
                                        <input type="text" name="description" value="{{ code.description }}" id="description" required="required">
                                    </div>
                                    <div class="col_full">
                                        <label for="input">Input:</label>
                                        <textarea style="width: 100%" required="required" id="input" name="input">{{ code.input }}</textarea>
                                    </div>
                                    <div class="col_full">
                                        <label for="output">Output:</label>
                                        <textarea style="width: 100%" required="required" id="output" name="output">{{ code.output }}</textarea>
                                    </div>
                                {% endif %}
                                <div class="col_full" id="lib">
                                    <label for="extlib">External Library</label>
                                    <input type="text" name="extlib" id="extlib" {% if code.extlib is not null %}value="{{ code.extlib }}"{% endif %} placeholder="Name of library">
                                </div>
                                <div class="col_full" id="libVer">
                                    <label for="extlibver">Library version</label>
                                    <input type="text" name="extlibver" id="extlibver" {% if code.extlib is not null %}value="{{ code.extlibver }}" required="required"{% endif %} placeholder="Library version">
                                </div>
                                <div class="col_full">
                                    <label for="code">Code:</label>
                                    <textarea style="width: 100%" rows="{{ code.rows }}" required="required" name="code" id="code">{{ code.code }}</textarea>
                                </div>
                                <div class="col_full">
                                    <button class="btn btn-default btn-lg btn-block btn-success" type="submit">Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}


{% endblock %}

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

{% block css %}
    <style>
        textarea {
            line-height: 20px;
            font-family: monospace;
            font-size: 12px !important;
        }

        input {
            width: 100%;
        }

        label{
            font-weight: bold;
        }

        .col_full {
            clear: both;
            float: none;
            margin-right: 0;
        }

        .vertical-alignment-helper {
            display: table;
            height: 100%;
            width: 100%;
            pointer-events: none;

        }

        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
            pointer-events: none;
        }

        .modal-content {
            /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
            width: inherit;
            height: inherit;
            /* To center horizontally */
            margin: 0 auto;
            pointer-events: all;
        }
    </style>
{% endblock %}