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

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/new/css/llm.css">
<style>
 #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;
 }
 .gnqa-copy p {
     font-size: 16px;
     line-height: 1.5;
 }
 .search-hist-btn{
     padding:15px;

     margin: 0 auto;
     border-bottom: 1px solid #ccc;
 }
 .search-hist-btn a:hover {
     text-decoration: None;
     padding:5px;
     border-radius: 10px;
     color:blue;
     cursor:pointer;
 }
 .search-hist-btn a {
     font-weight: bold;
     color:#000;
 }
 #gnqna_search_home input{
     min-width: 25em;
 }
</style>
{% endblock %}

{% block search %}
<form class="row" id="gnqna_search_home" method="POST" action="/gnqna">
    <!--- init gnqa codebase here -->
    <div class="col-sm-1">
	<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg" class="btn btn-link btn-sm ">
            <i class="fa fa-history fa-2x" aria-hidden="true" title="Search History"></i>
	</button>
    </div>

	<input class="col-sm-6 text-center" id="gnqna_search_home_input" type="text" autocomplete="off"
               required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="querygnqa"/>
</form>
{% endblock %}

<div class="modal fade  bd-example-modal-lg " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document" >
		<div class="modal-content">
                    <div class="modal-header">
			<h2 class="modal-title" id="exampleModalLabel">Your Search History</h2>

                    </div>
                    <div class="modal-body">
			<div>
                            {% if prev_queries %}
                            <div>
				{% for search in prev_queries[:8] %}
				<div class="search-hist-btn" style="display:flex;justify-content: space-between;align-items: center;">
                                    <form  class="search-hist-btn-form" method="GET" data-link="{{search}}">
					<a  class="search-hist-btn-link" data-link="{{search}}">{{search}}</a>
                                    </form>
				</div>
				{% endfor %}
                            </div>
                            {% endif %}
			</div>
                    </div>
                    <div class="modal-footer">
			<button type="button" class="btn btn-danger " style="color:white" >Delete All</button>
			<button type="button" class="btn btn-primary" data-dismiss="modal" style="color:white">Cancel</button>
                    </div>
		</div>
            </div>
</div>

{% block content %} <!-- Start of body -->
<section class="container-fluid">

    <div id="loader"></div>

    <div class="row">
	<h2 class="col-sm-12 text-center" style="font-variant:small-caps">Gnqa System</h2>
    </div>
    <div class="row gnqa-copy">
	<p class="col-sm-11 col-md-offset-3 col-md-6">
	    Welcome to the GeneNetwork Question and Answer (GNQA)system. We utilize a large language model and 3000 scientific publications to make GNQA a subject matter expert in three areas: <b><a href="/">GeneNetwork.org </a></b>, <b>genomics/genetics with regards to diabetes</b> and <b>genomics/genetics with regards to agin.</b>.
	</p>
	<p class="col-sm-11 col-md-offset-3 col-md-6">At the moment when you ask GNQA something it will attempt to return a sensible answer with <q>real</q> references. To this end we aim to reduce hallucinations and provide a knowledge launchpad for a researcher to enhance their knowledge on the relevant subject matter.</p>
	<p class="col-sm-11 col-md-offset-3 col-md-6">
	    GNQA is not a finished product as we are working diligently to improve it daily.
	</p>
	<p class="col-sm-11 col-md-offset-3 col-md-6"><b>Thanks for using GNQA!</b> </p>

    </div>

</section>

{% endblock %}

{% block js %}
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>

<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function() {
     $("#btn-hist-gnqa").on("click",function() {
	 $("#exampleModal").modal("show")
     });

     $(".search-hist-btn-form").each(function(){
	 let item = $(this);
	 item.on("click", (e) => {
	     item.attr("action", `/gnqna/hist/search/${item.data("link")}`).submit();
	 })
     });
     $("#gnqna_search").keypress(function(event) {
	 if (event.keyCode === 13) {
	     $('#gnqna_form').submit();
	     let spinner = $("#loader")
	     spinner.show()
	 }
     });
     $('footer').hide()
     $("#gnqna_search_home_input").keypress(function(event) {
	 if (event.keyCode === 13) {
	     $('#gnqna_search_home').submit();
	     let spinner = $("#loader")
	     spinner.show();
	 }
     })
 });
</script>
{% endblock %}