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

{% block css %}
<style>
 .htmx-indicator{
     display:none;
     opacity: 0;
     transition: opacity 500ms ease-in;
     width: 50px;
 }
 .htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
     opacity: 1;
     display: block;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 19;
 }
 .search-header {
     font-size: 3.5em;
     color:#808080;
     font-family: sans serif;
 }
 .search-header small {
     font-size: 14px;
 }

 .search-header sup {
     top: -2em;
 }
 .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;
     margin: 1.5em 0;
 }
 #gnqna_search_home {
     field-sizing: normal;
 }

</style>
{% endblock %}

{% block search %}{% 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">
    <header class="row">
	<h1 class="col-sm-12 text-center search-header">
	    AI Search
	    <small>
		<sup><a href="#">[Search History]</a></sup>
	    </small>
	</h1>
    </header>
    <form class="col-sm-12" id="gnqna_search_home"
	  hx-post="/gnqna"
	  hx-target=".gnqa-copy"
	  hx-swap="outerHTML"
	  hx-indicator="#indicator">
    <!--- init gnqa codebase here -->
	<div class="col-sm-6">
	    <button type="submit" class="btn btn-default btn-sm">
		<i class="fa fa-search fa-2x" aria-hidden="true" title="Search History"></i>
	    </button>
            <input
		class="text-center"
		id="gnqna_search_home_input"
		type="text" autocomplete="off"
		required
		placeholder="Ask More Questions or Topics (E.g Genes)"
		value=''
		name="querygnqa"
	    />
	</div>
	<img id="indicator" class="htmx-indicator" src="/static/gif/loader.gif"/>
    </form>
    <div class="row gnqa-copy">
	<p class="col-sm-10 col-sm-offset-1 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 language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.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();
	 })
     });
     $('footer').hide()
 });
</script>
{% endblock %}