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

{% 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">
<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-btn{
     color: blue;
 }

 .red-btn{
     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>
{% endblock %}

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

<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 class="rating" style="margin-right:30px;padding:8px;text-align: right;" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}">

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

            </div>

	</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>
			    </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>
			    </div>
			    {% endif %}

			</div>

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

{% block js %}
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></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">
 $('.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()
     $('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();

	 }
     })
     const answer = {{ answer | tojson }};
     const query = {{query | tojson }}
     const task_id = {{ task_id | tojson }}["task_id"];
     async function voteRequest (gn_server_url,task_id,metadata){
	 try{
	     const response = await fetch(`/gnqna/rating/${task_id}`,{
		 method:"POST",
		 headers: {
		     'Content-Type': 'application/json'
		 },
		 body: JSON.stringify(metadata)
	     })
	     if (response.ok){
		 return {"message":"success",status:0}
	     }
	     else {
		 let {error,error_description} = await response.json()
		 return  {"message":`HTTP Error:HTTP Response Code: ${response?.status}-reason-${error_description}`,status:1}
	     }
	 }
	 catch (err){
	     return {"message":err,status:1}}
     }
     likeBtn = document.querySelector("#green");
     dislikeBtn = document.querySelector("#red")
     likeBtn.addEventListener("click",(event)=>{
	 if (likeBtn.classList.contains("blue-btn")){
	     var {caller,weight} = (voteWeight["default"])
	 }
	 else {
	     var {caller,weight} = voteWeight["like"]

	 }
	 voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{
	     alert(message);
	     status == 0 ? caller():"";
	 })
     })
     dislikeBtn.addEventListener("click", (event) = {
	 var {caller,weight} = voteWeight["dislike"]
	 if (dislikeBtn.classList.contains("red-btn")){
	     var {caller,weight} = (voteWeight["default"])
	 }
	 voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{
	     alert(message)
	     status == 0 ? caller():""
     }));
	 let voteWeight = {
	     like: {
		 caller:function(){
		     dislikeBtn.classList.remove("red-btn")
		     likeBtn.classList.toggle("blue-btn")

		 },
		 weight: 1
	     },
	     dislike: {
		 caller:function(){
		     likeBtn.classList.remove("blue-btn")
		     dislikeBtn.classList.toggle("red-btn")
		 },

		 weight:-1
	     },
	     default: {
		 caller:function() {
		     likeBtn.classList.remove("blue-btn")
		     dislikeBtn.classList.remove("red-")
		 },
	 }}
</script>
<script type="text/javascript">
 function 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 %}