{% extends "base_curator.html" %}

{% block page_content %}

    {% from "_formhelpers.html" import render_field_curate %}
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <form class="tree-form" name="tree-form">
                        <h3 data-toggle="tooltip" title="The paper content is a widget that allows the user to navigate the content of the paper and enter file names during the tagging operation." class="card-title"> Paper Content </h3>
                        <div id="tree" class="disabledtree">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h3 title="" class="card-title"> Select section of paper to tag </h3>
                    <select id="curatelist" style="width:100%; margin-bottom: 1rem;">
                        <option value="Default">--Please select an option--</option>
                        <option value="Info">Info</option>
                        <option value="Charts">Charts</option>
                        <option value="Tools">Tools</option>
                        <option value="Datasets">Datasets</option>
                        <option value="Scripts">Scripts</option>
                        <option value="Reference">Paper</option>
                        <option value="Documentation">Documentation</option>
                    </select>
                    <span class="input-group-btn" style="margin-bottom: 1rem;">
                        <input type="submit" id="btnContinue"
                               value="Continue"
                               class="btn btn-theme-colored btn-lg m-0"
                               style="font-weight: bold; height: 50px;" onclick="window.location='/workflow';">
                   </span>
                    <div class="alert alert-success fade" id="bsalert" style="margin-top:0.1rem;margin-bottom:0.1rem;">
                        <strong>Saved!</strong>
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    </div>
                    <div class="alert alert-danger fade" id="bsalert" style="margin-top:0.1rem;margin-bottom:0.1rem;">
                        <strong>Please fill all Mandatory fields</strong>
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    </div>
                    <div id="Info" class="dropdown-container"  style="display: none;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects general information about your paper"> Add Info </h3>
                        <form method="post" id="InfoForm" name="info">
                            <div data-toggle="fieldset" id="pi-fieldset">
                                <label class="col-form-label">{{ infoform.PIs.label }}</label><span style="color: red;">*</span><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row" data-target="#pi-fieldset">+</button>

                                <table id="piTable">
                                    {% for name in infoform.PIs %}
                                    <tr data-toggle="fieldset-entry" id="entry">
                                        <td style="padding-bottom: 1rem;">{{ name.firstName(class_='form-control',title=name.firstName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ name.middleName(class_='form-control',title=name.middleName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ name.lastName(class_='form-control',title=name.lastName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row" id="PIs-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                                 <table>
                                    <tbody>
                                    {{ render_field_curate(infoform.collections) }}
                                    {{ render_field_curate(infoform.tags) }}
                                    {{ render_field_curate(infoform.notebookFile) }}
                                    <tr style="padding-bottom: 1rem;">
                                        <td style="padding-bottom: 1rem;">
                                            <input type="submit" id="btnInfoSave"
                                                   value="Save"
                                                   class="btn btn-theme-colored btn-lg m-0"
                                                   style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    {# Charts #}
                    <div id="Charts" class="dropdown-container" style="display: none;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about the Charts of the paper"> Add Charts </h3>
                        <form method="post" id="ChartListForm">
                            <table id="chartbuttons">
                            </table>
                        </form>

                        <form method="post" id="ChartForm" name="charts">
                            <table>
                                <tbody>
                                {{ render_field_curate(chartform.caption) }}
                                {{ render_field_curate(chartform.number) }}
                                {{ render_field_curate(chartform.files) }}
                                {{ render_field_curate(chartform.imageFile) }}
                                {{ render_field_curate(chartform.notebookFile) }}
                                {{ render_field_curate(chartform.properties) }}
                                {{ render_field_curate(chartform.saveas) }}
                                </tbody>
                            </table>
                             <div data-toggle="fieldset-charts" id="extra-fieldset-charts">
                                <label class="col-form-label">{{ chartform.extraFields.label }}</label> <button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row-charts" data-target="#extra-fieldset-charts">+</button>
                                <table id="extraTableCharts">
                                    {% for extra in chartform.extraFields %}
                                    <tr data-toggle="fieldset-entry-charts" id="entry-charts">
                                        <td style="padding-bottom: 1rem;">{{ extra.extrakey(class_='form-control',title=extra.extrakey.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ extra.extravalue(class_='form-control',title=extra.extravalue.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row-charts" id="extraChartFields-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                             <div style="padding-bottom: 1rem;">
                                    <input type="submit" id="btnChartSave"
                                           value="Save"
                                           class="btn btn-theme-colored btn-lg m-1"
                                           style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                    <input type="button" id="btnChartReset"
                                           value="Reset"
                                           class="btn btn-theme-colored btn-lg m-1"
                                           style="font-weight: bold; height: 50px;" onclick="$('#ChartForm')[0].reset();"/>
                             </div>
                        </form>
                    </div>
                {# Tools #}
                    <div id="Tools" class="dropdown-container" style="display: none; margin-top: 1rem;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about the Tools used in the paper. The tool represents the use of an instrument (either software or experimental set up)"> Add Tools </h3>
                        <form method="post" id="ToolListForm">
                            <table id="toolbuttons">
                            </table>
                        </form>
                        <form method="post" id="ToolForm" name="tools">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            {{ toolform.kind(title=toolform.kind.description,**{'data-toggle': 'tooltip','data-placement':'left'}) }}
                            <div class="toolClass" id="software">
                                <table>
                                    <tbody>
                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                             <label class="col-form-label">{{ toolform.packageName.label }}<span style="color: red;">*</span> </label>
                                        </div>
                                         <div class="col-sm-12">
                                             {{ toolform.packageName(class_='form-control',title=toolform.packageName.description,**{'data-toggle': 'tooltip'}) }}
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                             <label class="col-form-label">{{ toolform.version.label }}<span style="color: red;">*</span> </label>
                                        </div>
                                         <div class="col-sm-12">
                                             {{ toolform.version(class_='form-control',title=toolform.version.description,**{'data-toggle': 'tooltip'}) }}
                                        </div>
                                    </div>
                                    {{ render_field_curate(toolform.programName) }}
                                    {{ render_field_curate(toolform.patches) }}
                                    {{ render_field_curate(toolform.description) }}
                                    </tbody>
                                </table>
                            </div>
                            <div class="toolClass" id="experiment" style="display: none;">
                                <table>
                                    <tbody>
                                        <div class="form-group row">
                                            <div class="col-sm-12">
                                                 <label class="col-form-label">{{ toolform.facilityName.label }}<span style="color: red;">*</span> </label>
                                            </div>
                                             <div class="col-sm-12">
                                                 {{ toolform.facilityName(class_='form-control',title=toolform.facilityName.description,**{'data-toggle': 'tooltip'}) }}
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-sm-12">
                                                 <label class="col-form-label">{{ toolform.measurement.label }}<span style="color: red;">*</span> </label>
                                            </div>
                                             <div class="col-sm-12">
                                                 {{ toolform.measurement(class_='form-control',title=toolform.measurement.description,**{'data-toggle': 'tooltip'}) }}
                                            </div>
                                        </div>
                                    </tbody>
                                </table>
                            </div>
                            {{ render_field_curate(toolform.URLs) }}
                            {{ render_field_curate(toolform.saveas) }}
                             <div data-toggle="fieldset-tools" id="extra-fieldset-tools">
                                <label class="col-form-label">{{ toolform.extraFields.label }}</label> <button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row-tools" data-target="#extra-fieldset-tools">+</button>
                                <table id="extraTableTools">
                                    {% for extra in toolform.extraFields %}
                                    <tr data-toggle="fieldset-entry-tools" id="entry-tools">
                                        <td style="padding-bottom: 1rem;">{{ extra.extrakey(class_='form-control',title=extra.extrakey.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ extra.extravalue(class_='form-control',title=extra.extravalue.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row-tools" id="extraToolFields-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                             <div style="padding-bottom: 1rem;">
                                    <input type="submit" id="btnToolSave"
                                           value="Save"
                                           class="btn btn-theme-colored btn-lg m-0"
                                           style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                 <input type="button" id="btnToolReset"
                                           value="Reset"
                                           class="btn btn-theme-colored btn-lg m-1"
                                           style="font-weight: bold; height: 50px;" onclick="$('#ToolForm')[0].reset();"/>
                             </div>
                        </form>
                    </div>
                {# Dataset #}
                    <div id="Datasets" class="dropdown-container" style="display: none; margin-top: 1rem;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about the datasets generated in the paper. A dataset is a file or folder or a combination of the two which contains raw data generated in the scientific paper. Datasets are created by an instrument or by a versioned software"> Add Datasets </h3>
                        <form method="post" id="DatasetListForm">
                            <table id="datasetbuttons">
                            </table>
                        </form>
                        <form method="post" id="DatasetForm" name="datasets">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <table>
                                <tbody>
                                {{ render_field_curate(datasetform.files) }}
                                {{ render_field_curate(datasetform.readme) }}
                                {{ render_field_curate(datasetform.URLs) }}
                                {{ render_field_curate(datasetform.saveas) }}
                                </tbody>
                            </table>
                             <div data-toggle="fieldset-datasets" id="extra-fieldset-datasets">
                                <label class="col-form-label">{{ datasetform.extraFields.label }}</label> <button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row-datasets" data-target="#extra-fieldset-datasets">+</button>
                                <table id="extraTableDatasets">
                                    {% for extra in datasetform.extraFields %}
                                    <tr data-toggle="fieldset-entry-datasets" id="entry-datasets">
                                        <td style="padding-bottom: 1rem;">{{ extra.extrakey(class_='form-control',title=extra.extrakey.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ extra.extravalue(class_='form-control',title=extra.extravalue.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row-datasets" id="extraDatasetFields-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                             <div style="padding-bottom: 1rem;">
                                    <input type="submit" id="btnDatasetSave"
                                           value="Save"
                                           class="btn btn-theme-colored btn-lg m-0"
                                           style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                 <input type="button" id="btnDatasetReset"
                                           value="Reset"
                                           class="btn btn-theme-colored btn-lg m-1"
                                           style="font-weight: bold; height: 50px;" onclick="$('#DatasetForm')[0].reset();"/>
                             </div>
                        </form>
                    </div>
                {# Script #}
                    <div id="Scripts" class="dropdown-container" style="display: none; margin-top: 1rem;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about the scripts. Scripts are source codes not available publicly used to manipulate datasets and generate the data files of charts, or other data discussed in the scientific paper"> Add Scripts </h3>
                         <form method="post" id="ScriptListForm">
                            <table id="scriptbuttons">
                            </table>
                        </form>
                        <form method="post" id="ScriptForm" name="scripts">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <table>
                                <tbody>
                                {{ render_field_curate(scriptform.files) }}
                                {{ render_field_curate(scriptform.readme) }}
                                {{ render_field_curate(scriptform.URLs) }}
                                {{ render_field_curate(scriptform.saveas) }}
                                </tbody>
                            </table>
                            <div data-toggle="fieldset-scripts" id="extra-fieldset-scripts">
                                <label class="col-form-label">{{ scriptform.extraFields.label }}</label> <button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row-scripts" data-target="#extra-fieldset-scripts">+</button>
                                <table id="extraTableScripts">
                                    {% for extra in scriptform.extraFields %}
                                    <tr data-toggle="fieldset-entry-scripts" id="entry-scripts">
                                        <td style="padding-bottom: 1rem;">{{ extra.extrakey(class_='form-control',title=extra.extrakey.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ extra.extravalue(class_='form-control',title=extra.extravalue.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row-scripts" id="extraScriptFields-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                             <div style="padding-bottom: 1rem;">
                                    <input type="submit" id="btnScriptSave"
                                           value="Save"
                                           class="btn btn-theme-colored btn-lg m-0"
                                           style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                    <input type="button" id="btnScriptReset"
                                           value="Reset"
                                           class="btn btn-theme-colored btn-lg m-1"
                                           style="font-weight: bold; height: 50px;" onclick="$('#ScriptForm')[0].reset();"/>
                             </div>
                        </form>
                    </div>
                {# Reference #}
                    <div id="Reference" class="dropdown-container" style="display: none; margin-top: 1rem;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about the publication associated to the paper. The DOI number may aid in auto filling certain fields."> Add Paper </h3>
                        <form method="post" id="ReferenceForm" name="reference">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <table>
                                <tbody>
                                {{ render_field_curate(referenceform.kind) }}
                                 <div class="form-group row">
                                        <div class="col-sm-12">
                                             <label class="col-form-label">{{ referenceform.DOI.label }}<span style="color: red;">*</span>
                                                 <input type="button" class="btn btn-theme-colored" id="fillReference" title="Auto fills paper fields using DOI." value="fetch" onclick="javascript:fetchDOI($('#DOI').val());"/>
                                             </label>
                                        </div>
                                         <div class="col-sm-12">
                                             {{ referenceform.DOI(class_='form-control',title=referenceform.DOI.description,**{'data-toggle': 'tooltip'}) }}
                                        </div>
                                 </div>
                                </tbody>
                            </table>
                                <div data-toggle="author-fieldset-toggle" id="author-fieldset">
                                <label class="col-form-label">{{ referenceform.authors.label }}</label> <span style="color: red;">*</span> <button type="button" class="btn btn-theme-colored" data-toggle="fieldset-add-row-author" data-target="#author-fieldset">+</button>

                                <table id="authorTable">
                                    {% for name in referenceform.authors %}
                                    <tr data-toggle="fieldset-entry-authors" id="entry">
                                        <td style="padding-bottom: 1rem;">{{ name.firstName(class_='form-control',title=name.firstName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ name.middleName(class_='form-control',title=name.middleName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;">{{ name.lastName(class_='form-control',title=name.lastName.description,**{'data-toggle': 'tooltip'}) }}</td>
                                        <td style="padding-bottom: 1rem;"><button type="button" class="btn btn-theme-colored" data-toggle="fieldset-remove-row-authors" id="authors-{{loop.index0}}-remove">-</button></td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                            <table>
                                <tbody>
                                {{ render_field_curate(referenceform.title) }}
                                {{ render_field_curate(referenceform.journal.fullName) }}
                                {{ render_field_curate(referenceform.page) }}
                                {{ render_field_curate(referenceform.publishedAbstract) }}
                                {{ render_field_curate(referenceform.volume) }}
                                {{ render_field_curate(referenceform.year) }}
                                {{ render_field_curate(referenceform.URLs) }}
                                <tr style="padding-bottom: 1rem;">
                                    <td style="padding-bottom: 1rem;">
                                        <input type="submit" id="btnReferenceSave"
                                               value="Save"
                                               class="btn btn-theme-colored btn-lg m-0"
                                               style="font-weight: bold; height: 50px;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                {# Documentation #}
                    <div id="Documentation" class="dropdown-container" style="display: none; margin-top: 1rem;">
                        <h3 class="card-title" data-toggle="tooltip" data-placement="left" title="This section collects information about Documentation of your project"> Add Documentation </h3>
                        <form method="post" id="DocumentationForm">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                             <table>
                                <tbody>
                                {{ render_field_curate(documentationform.readme) }}
                                <tr style="padding-bottom: 1rem;">
                                    <td style="padding-bottom: 1rem;">
                                        <input type="submit" id="btnDocumentationSave"
                                               value="Save"
                                               class="btn btn-theme-colored btn-lg m-0"
                                               style="font-weight: bold; height: 50px;"/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="{{ url_for('static', filename='./javascript/modules/curate.js') }}"></script>
    <script type="text/javascript">
        var chartList = {{ chartlistform|tojson }};
        var toolList = {{ toollistform|tojson }};
        var dataList = {{ datalistform|tojson }};
        var scriptList = {{ scriptlistform|tojson }}
        var projectName = {{ projName|tojson }};
        createChartList(chartList);
        createToolList(toolList);
        createDatasetList(dataList);
        createScriptList(scriptList);
    </script>
        <script type="text/javascript">
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        ga('create', 'UA-126882431-1', 'auto');
        ga('send', 'pageview');
    </script>
    <script async src='https://www.google-analytics.com/analytics.js'> </script>

{% endblock %}