{% extends 'layout.html' %}
{% block head %}
    <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
    <script>
         $( document ).ready(function() {
                document.getElementById("defaultOpen").click();


            });
    </script>
    <script>  
        function openPage(pageName, elmnt, color) {
        // Hide all elements with class="tabcontent" by default */
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            // console.log(i)
            tabcontent[i].style.display = "none";
        }

        // Remove the background color of all tablinks/buttons
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }

        elmnt.style.backgroundColor = color;
        }

        </script>  
    <script> function error(){console.log('error')} </script>

    <style>
         /* Style the tab content */
        .tabcontent {
          display: none;
          padding: 6px 12px;
          border: 1px solid #ccc;
          border-top: none;
        }
        #viewport {
                width: 500px;
                height: 500px;
                border: 1px solid gray;
            }
        table, th, td {
            width: 25%;
            height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        caption {
            caption-side: top; /* Ensures the caption stays above the table */
            font-weight: bold;
            margin-bottom: 4px;
            text-align: center;
        }
    </style>

    <script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
{% endblock head %}

{% block content %}
    <div class="container-fluid" align="center" style="padding: 2px">

    {% if project_id %}

{% if shape %}

        <div class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Structure similarity scores using steric(shape)</p>
            </div>

            <div class="col-sm-12">
                <table>
                    <caption>Similarity Score</caption>
                    <tr>
                        <th scope="rowgroup" rowspan="2" style="text-decoration: underline;" title="Comparsion is based on steric feature (shape of the molecule) only.">Steric Features (Shape)</th>
                        <th style="text-decoration: underline;" title="Radius of the spherical neighborhood around each atom used to construct the 3D histograms.">Radius</th>
                        <th style="text-decoration: underline;" title="Sinkhorn approximation of the similarity between binding sites following this paper:&#10;M. Cuturi, &quot;Sinkhorn Distances: Lightspeed Computation of Optimal Transport,&quot; in Advances in Neural Information Processing Systems (NIPS), vol. 26, 2013, pp. 2292–2300.">Sinkhorn Score</th>
                        <th style="text-decoration: underline;" title="Root Mean Square Deviation between atoms of the binding sites.">RMSD Score</th>
                    </tr>
                    <tr>
                        <td>{{ shape_radius }} &angst;</td>
                        <td>{{ sinkhorn_score_shape }}</td>
                        <td>{{ final_RMSD_shape }} &angst;</td>
                    </tr>
                </table>
                <br>
                <a href="output/{{ project_id }}/similarity_scores_using_steric(shape).csv" download>Click here </a> to download the similarity_scores csv for using steric(shape).</br>
                <a href="output/{{ project_id }}/correspondence_using_steric(shape).text" download>Click here </a> to download the correspondence text for using steric(shape).</p>

            </div>

        </div>


        <div id = "shape-viewer" class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Structure Correspondence Viewer </p>
            </div>
            <div class="col-sm-12">

                <iframe src="output/{{ project_id }}/3Dmol_viewer_steric(shape).html" style="width:100%; height:600px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>
        </div>
{% endif %}
</br>

{% if shape_feature %}

        <div class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Structure similarity scores using steric(shape) and charges</p>
            </div>

            <div class="col-sm-12">
                <table>
                <tr>
                    <!-- First column header spans two rows -->
                    <th scope="rowgroup" rowspan="2" style="text-decoration: underline;" title="Comparsion is based on steric feature (shape of the molecule) and atomic charges."> Steric Features (Shape) and Charges</th>
                    <!-- Column headers for the other two columns -->
                    <th scope="col" style="text-decoration: underline;" title="Radius of the spherical neighborhood around each atom used to construct the 3D histograms.">Radius</th>
                    <th scope="col" style="text-decoration: underline;" title="Sinkhorn approximation of the similarity between binding sites following this paper:&#10;M. Cuturi, &quot;Sinkhorn Distances: Lightspeed Computation of Optimal Transport,&quot; in Advances in Neural Information Processing Systems (NIPS), vol. 26, 2013, pp. 2292–2300.">Sinkhorn Score </th>
                    <th scope="col"style="text-decoration: underline;" title="Root Mean Square Deviation between atoms of the binding sites.">RMSD Score</th>
                </tr>

                <tr>

                    <td>{{ shape_feature_radius }} &angst;</td>
                    <td>{{ sinkhorn_score_shape_feature }}</td>
                    <td>{{ final_RMSD_shape_feature }} &angst;</td>
                </tr>
                </table>
                <br>
                <a href="output/{{ project_id }}/similarity_scores_using_steric(shape)_and_charges.csv" download>Click here </a> to download the similarity_scores csv for using steric(shape) and charges.</br>
                <a href="output/{{ project_id }}/correspondence_using_steric(shape)_and_charges.text" download>Click here </a> to download the correspondence text for using steric(shape) and charges.</p>
            </div>

        </div>

        <div id = "shape_feature_viewer" class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Structure Correspondence Viewer </p>
            </div>
            <div class="col-sm-12">
                <iframe src="output/{{ project_id }}/3Dmol_viewer_steric(shape)_and_charges.html" style="width:100%; height:600px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>
        </div>

    </div>
{% endif %}



    {% endif %}
    </div>
{% endblock content %}
