{% extends "base.html" %}
{% block title %}GNQNA{% endblock %}

{% block content %} <!-- Start of body -->
 

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />
<link rel="stylesheet" type="text/css" href="/static/new/css/llm.css">
{% endblock %}


<style type="text/css">

  #loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center;
    z-index: 10000;
}


.btn{
  cursor: pointer;
  outline: 0;
  color: #AAA;

}

.btn:focus {
  outline: none;
}


.blue{
  color: blue;
}

.red{
  color: red;
}


}
.panel-heading {
  padding: 0;
    border:0;
}
.panel-title>a, .panel-title>a:active{
    display:block;
  padding:15px;
  color:#555;
  font-weight:bold;
text-decoration:none;
border: none;

outline: none;
}

.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}




</style>





<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;">

  <div id="loader">
    
  </div>
<div style="margin:10px; border:1px solid #ccc;padding: 15px;">
  <div >
    <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1>
  </div>

  <div style="width:90vw;overflow-wrap: normal; margin-top: 5px;">
    <p id="gnqa_answer">{{answer}} <p>
  </div>
</div>

<div>


      <div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;">
        <h4> <a href="#" style="font-weight: bold;">References</a></h4>
        {% if references %}
            <ul id="gnqa_ref">

     {% for reference in references %}

    <li id="gnqa_ref_item">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!--panel starts here -->
<div class="panel panel-default">
        {% if loop.first %}

           <div class="panel-heading active" role="tab" id="heading{{reference.doc_id}}">
             <h4 class="panel-title">

                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}">
               <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
        </a>
         </h4>
     </div>


        <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">
      <div class="panel-body">

        <div>
        </div>
        {% if reference.pubmed %}

        <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
           
      <button type="button"  data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> 
          <span><b>See PubMed Info</b></span>
      </button>        
  </div>


    <div>
      {% include 'pubmed_modal.html' %}
    </div>
      
       
        {% endif %}
        
            <p class="node-references">{{reference.comboTxt}}</p>
            <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}">

                 <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button>
                 <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this reference  -1"><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></button>
                
            </div>


      </div>
    </div>



          {% else %}
          
        <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}">
                 <h4 class="panel-title">

                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}">
                   <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2>
            </a>
             </h4>
         </div>



    <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}">

      <div class="panel-body">


     {% if reference.pubmed %}


     <div style="margin: 5px;color:#3071a9;cursor: pointer;" >
           
      <button type="button"  data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> 
      <span><b>See PubMed Info</b></span>
      </button>        
  </div>



      <div>
      {% include 'pubmed_modal.html' %}

      </div>

      

    {% endif %}
   

        
            <p class="node-references">{{reference.comboTxt}}</p>
            <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}">

                 <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button>
                 <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this reference  -1"><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></button>
                
            </div>


      </div>
    </div>

        {% endif %} 

  </div>

            </div>
        </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>No references available.</p>
        {% endif %}
    </div>
</div>
</div>


<!-- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='fontawesome/js/all.min.js') }}"></script> -->
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>

<script type="text/javascript">
$('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });

     document.addEventListener('DOMContentLoaded', function() {
      const GN_SERVER_URL = {{gn_server_url|tojson}}
        $('#globalsearchform').hide()
        $('#gnqna_search_home').show()
         $('footer').hide()
          $("#gnqna_search_home_input").keypress(function(event) {
            if (event.keyCode === 13) {
                console.log("clicked this button")
            $('#gnqna_search_home').submit();
            let spinner = $("#loader")
            spinner.show();

            }
        })


     $(".rating").each(function() {
        let  item = $(this);
        let  likeBtn = item.find("#green")
        let dislikeBtn = item.find("#red")


let voteRequest = (gn_server_url,task_id,doc_id,vote_count)=>{
    try{
    fetch(`${GN_SERVER_URL}/api/llm/rating/${task_id}/${doc_id}/${vote_count}`,{
        method:"POST",
        body:""
    })
    .then(response => response.text())
    .then(data=> console.log(data));
    }
    catch {
        alert("An error occurred")
    }
}
    likeBtn.on("click",function() {
    if(dislikeBtn.hasClass("red")){
        dislikeBtn.removeClass("red")
    }
    likeBtn.toggleClass("blue")
    likeBtn.hasClass("blue")? voteRequest(GN_SERVER_URL,item.data("taskId"),item.data("docId"),1) : 0 
})

dislikeBtn.on("click",function(){
if(likeBtn.hasClass("blue")){
        likeBtn.removeClass("blue")
    }
    dislikeBtn.toggleClass("red")
    dislikeBtn.hasClass("red") ? voteRequest(GN_SERVER_URL,item.data("taskId"),item.data("docId"),-1):0
})
 })
 })
</script>


<script src="{{ url_for('js', filename='linkify/linkify.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('js', filename='linkify/linkify-html.min.js') }}" type="text/javascript"></script>


<script type="text/javascript">


const nodeLinkify = (node_list)=>{
node_list.forEach((node)=>{
    node.innerHTML = linkifyHtml(node.innerHTML, {
        target:{
            url:"_blank",
            email:null
        }
    })
})
}
    
    nodeLinkify(document.querySelectorAll(".pubmed-abstract"))

    nodeLinkify(document.querySelectorAll(".node-references"))

var coll = document.getElementsByClassName("collapsible-btn");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {

    this.classList.toggle("active-btn");
  });
}



</script>

{% endblock %}