{% extends "base.html" %}

{% block page_content %}
        <div class="row">
            <div class="col-md-12">
                <h3 class="pt-0"><p id="lblTitle" style="font-size: 22px;"></p></h3>
                <p id="lblAuthor"></p>
                <p id="lblTags"></p>
                <div class="paper-col-info"><label style="float: left">Collection(s): &nbsp;</label>
                    <p style="float: left" id="lblCollection"></p></div>
                <div class="paper-col-info"><label style="float: left">Published In: &nbsp;</label>
                    <p style="float: left" id="lblPublishedIn"></p></div>
                <div id="PaperSection"></div>
                <label>Abstract: </label>
                <div style="width: 100%;">
                    <p id="lblPaperAbstract" style="text-align: justify;font-size: 15px;"></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="chartToggle" class="panel-group toggle pb-0 mb-10">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a data-toggle="collapse" href="#charts" id="chartscollap" class="active"
                                   aria-expanded="true">
                                    <span class="open-sub"></span><strong>View Charts</strong>
                                </a>
                            </div>
                        </div>
                        <div id="charts" class="panel-collapse in collapse show" aria-expanded="true">
                            <div class="panel-body">
                                <div id="divCharts" class="wow fadeInDown" style="margin-top: 10px;">
                                    <table id="tblcharts" class="display" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Image File</th>
                                            <th></th>
                                            <th>Number</th>
                                            <th>Caption</th>
                                            <th>Properties</th>
                                            <th>Files</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="datasetToggle" class="panel-group toggle pb-0 mb-10">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a data-toggle="collapse" href="#datasets" id="datasetscollap" class="active"
                                   aria-expanded="true">
                                    <span class="open-sub"></span><strong>View Datasets</strong>
                                </a>
                            </div>
                        </div>
                        <div id="datasets" class="panel-collapse in collapse show" aria-expanded="true">
                            <div class="panel-body">
                                <div id="divDatasets" class="wow fadeInDown" style="margin-top: 10px;">
                                    <table id="tbldatasets" class="display" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Description</th>
                                            <th>Files</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="workflowToggle" class="panel-group toggle pb-0 mb-10">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a data-toggle="collapse" href="#workflow" id="workflowcollap" class="active"
                                   aria-expanded="true">
                                    <span class="open-sub"></span><strong>View Workflow</strong>
                                </a>
                            </div>
                        </div>
                        <div id="workflow" class="panel-collapse in collapse show" aria-expanded="true">
                            <div class="panel-body">
                                <div class="container-fluid pt-80 pb-10">
                                    <div class="row">
                                        <div class="col-md-2 p-0">
                                            <div id="divLegend" class="wow fadeInDown"></div>
                                        </div>
                                        <div class="col-md-10 p-0">
                                            <div id="divWorkflow" class="wow fadeInDown"></div>
                                        </div>

                                        <div class="col-md-12">
                                            <!-- Modal -->
                                            <div class="modal fade" id="modalInfo" tabindex="-1"
                                                 role="dialog" aria-labelledby="myModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <h4 class="modal-title" id="myModalLabel"></h4>
                                                        </div>
                                                        <div class="modal-body" id="myModalBody"></div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="chartWorkflowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="chartWorkflowModalLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid pt-80 pb-10">
                            <div class="row">
                                <div class="col-md-2 p-0">
                                    <div id="divChartLegend" class="wow fadeInDown"></div>
                                </div>
                                <div class="col-md-10 p-0">
                                    <div id="divChartWorkflow" class="wow fadeInDown"></div>
                                </div>

                                <div class="col-md-12">
                                    <!-- Modal -->
                                    <div class="modal fade" id="modalInfo" tabindex="-1"
                                         role="dialog" aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel"></h4>
                                                </div>
                                                <div class="modal-body" id="myModalBody"></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <script src="{{ url_for('static', filename='./javascript/modules/paperdetails.js') }}"></script>

    <script type="text/javascript">
        var paperdetails = {{ paperdetail|tojson }};
        var workflowdetails = {{ workflowdetail|tojson }};
        buildPaperInfo(paperdetails);
        bindWorkflow(workflowdetails, false);
        createGoogleDatasetsScript(paperdetails);
    </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 %}