{% extends 'base.html' %}

{% load define %}
{% load has_access_url %}
{% block content %}
{% define 0 as int%}
<form action="choose_metadata" method="post" onkeypress="return event.keyCode != 13;">
    {% csrf_token %}
    <input type="hidden" id="datatoup" name="datatoup" value="{{tomap}}">
    <table id="table" data-page-length='10' class="table table-striped table-bordered ">
        <thead class="thead-dark">
            <tr>
                <th>Dataset</th>
                <th>Assay</th>
                <th>Study</th>
                <th>Link</th>
            </tr>
        </thead>
        <tbody>
            {% for item in listmap %}
            {% if item.type == "dataset" %}
            <tr>
                <td>{{item}}</td>
                <td>{{assay}}</td>
                <td>{{study}}</td>
                {% if item.tool_id|has_access_url %}
                <td> <a type="button" style="margin-right:0; margin-left: 10px;"
                        class="btn-sm btn rounded btn-secondary" role=button href="{{item.link_url}}"
                        target="_blank">View on {{item.link_tool}}</a></td>
                {% else %}
                <td></td>
                {% endif %}
            </tr>
            {% elif item.type == "assay"%}
            {% define item.name as assay %}
            {% elif item.type == "study"%}
            {% define  item.name as study %}
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
    <br>
    <label>Title : </label>
    <input style="width: 100%;" type="text" id="title" name="title" value="{{title.name}}" pattern=".{3,}"
        title="three or more chaacters" required>
    <br><br><br>
    <table class="table table-striped table-bordered ">
        <thead class="thead-dark">
            <tr>
                <th>Author</th>
                <th>Afilliation</th>
                <th>ORCID</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="0">
            {%for aut in users%}
            {% define int|add:"1" as int%}
            <tr id="{{int}}">
                <td><input style=" width:100%" type="text" id="author" name="author {{int}}" value="{{aut}}"
                        pattern=".{3,}" title="three or more chaacters" required></td>
                <td><input style=" width:100%" type="text" id="affiliation" name="affiliation {{int}}"> </td>
                <td><input style=" width:100%" type="text" id="orcid" name="orcid {{int}}"> </td>
                <td><button class="btn btn-secondary" style=" align:center" type="button" id="{{int}}"
                        {% if author|length == 1 %}hidden=true {%endif%} onClick="del(id)">x </button> </td>
            </tr>
            {%endfor%}
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td><button class="btn btn-secondary" type="button" onClick="add2()">+</button></td>
            </tr>
        </tbody>
    </table>
    <div align="right">

    </div>

    <div>
        <script>
        </script>
        <label>Tag</label> <input id="tags" name="tags" type="text" value="{{ tags }}" data-role="tagsinput" />
    </div>

    <label>Description:</label>
    {% load static %}
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
    <textarea cols="10" id="description" name="description" rows="10" data-sample-short> <strong><em>{{title.name}}</em></strong> <br> {{title.description}} <br> {% for item in list  %}  
                                            <em>{{item.name}} </em> <br>
                                            {{item.description}} <br>
                            {% endfor %}  </textarea>

    <script>
        CKEDITOR.replace('description', {
            toolbar: [{
                    name: 'clipboard',
                    items: ['PasteText', 'PasteFromWord', ]
                },
                {
                    name: 'basicstyles',
                    items: ['Bold', 'Italic', 'Strike', 'Subscript', 'Superscript', '-', ]
                },
                {
                    name: 'links',
                    items: ['Link', 'Unlink', ]
                },
                {
                    name: 'paragraph',
                    items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote',
                        'CodeSnippet']
                },
                {
                    name: 'undo',
                    items: ['Undo', 'Redo', 'RemoveFormat']
                },
                {
                    name: 'insert',
                    items: ['SpecialChar', 'Mathjax']
                },
                {
                    name: 'document',
                    items: ['Source']
                },
                {
                    name: 'tools',
                    items: ['Maximize', ]
                }
            ],

            extraPlugins: 'codesnippet,mathjax',
            mathJaxLib: '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        });
    </script>

    <input type="hidden" id="type" name="type" value="dataset">
    <input type="hidden" id="list" name="list" value="{{tomap}}">
    <div> </div>


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

    <button type="button" class="btn btn-secondary" onClick="javascript:history.go(-1);">back </button>
    <input type="submit" class="btn btn-primary" value="Valid Data and Publish">
</form>

<script>
    function del(int) {
        console.log(int)
        div = document.getElementById(int);
        console.log(div)
        div.parentNode.removeChild(div);
        divp = document.getElementById(0);
        console.log(divp.childElementCount)
        if (divp.childElementCount == 2) {
            divp.firstElementChild.children[3].hidden = true
        }
    }

    function add2() {
        div = document.getElementById(0)
        id = div.children[div.childElementCount - 2].id
        div2 = document.getElementById(div.firstElementChild.id)
        div2.children[3].hidden = false
        console.log(div2)
        console.log(div2.children[3])
        newdiv = document.createElement("tr")
        newdiv.innerHTML = div2.innerHTML
        newdiv.id = id + 1
        newdiv.children[0].children[0].value = ""
        newdiv.children[0].children[0].name = "author " + id + 1
        newdiv.children[1].children[0].name = "affiliation " + id + 1
        newdiv.children[2].children[0].name = "orccid " + id + 1
        newdiv.children[3].children[0].id = id + 1
        div.insertBefore(newdiv, div.children[div.childElementCount - 1])
    }
</script>
{% endblock %}