{% extends "index_page.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: fixed;
     left: 50vw;
     top: 50vh;
     z-index: 19;
 }

 .search-header {
     font-size: 3.5em;
     color:#808080;
     font-family: sans serif;
 }

 .search-header small {
     font-size: 14px;
 }

 .search-hist-btn{
     background-color:transparent;
     color:#3071a9;
     border:none     
 }

 .search-header sup {
     top: -2em;
 }

 .gnqa-copy p {
     font-size: 16px;
     line-height: 1.5;
 }

 #gnqna_search_home .form-group {
     margin: 3em auto;
 }

 #gnqna_search_home_input {
     border-radius: 16px;
 }

 #gnqna_search_home button {
     margin-right: 10px;
     width: fit-content;
 }
 .answers {
     width: 75%;
 }

 details > summary {
     padding: 2px 6px;
     width: 15em;
     background-color: #ddd;
     border: none;
     box-shadow: 3px 3px 4px black;
     cursor: pointer;
 }

 details > p {
     border-radius: 0 0 10px 10px;
     background-color: #ddd;
     padding: 2px 6px;
     margin: 0;
     box-shadow: 3px 3px 4px black;
 }

 details[open] > summary {
     background-color: #ccf;
 }

.linux-libertine-font{
    font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro', 'serif'
}

    </style>
{% endblock %}
{% block search %}{% endblock %}
{% 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>
                        <button class="search-hist-btn"
                                hx-get="/gnqna/records"
                                hx-target="#swap"
                                hx-swap="innerHTML">[Search History]</button>
                    </sup>
                </small>
            </h1>
        </header>
        <form class="row form-horizontal"
              id="gnqna_search_home"
              action="/gnqna"
              method="post">
            <!--- init gnqa codebase here -->
            <div class="form-group form-group-lg col col-xs-12 col-sm-6 col-sm-offset-3">
                <button class="btn btn-default btn-sm col-xs-1 col-sm-1 col-sm-offset-3"
                        hx-post="/gnqna"
                        hx-target="#swap"
                        hx-swap="innerHTML"
                        hx-indicator="#indicator">
                    <i class="fa fa-search fa-3x" aria-hidden="true" title="Search"></i>
                    <img id="indicator" class="htmx-indicator" src="/static/gif/loader.gif" />
                </button>
                <input class="text-left input-lg col-sm-5"
                       id="gnqna_search_home_input"
                       type="text"
                       autocomplete="on"
                       required
                       placeholder="Ask More Questions or Topics (E.g Genes)"
                       {% if query %}
                       value='{{ query }}'
                       {% else %}
                       value=''
                       {% endif %}
                       name="querygnqa" />
            </div>
        </form>
        <article id="swap" class="row">
            {% if answer %}
                {% include 'gnqa_answer.html' %}
            {% else %}

                <div class="row gnqa-copy">
                    <div class="col-sm-10 col-sm-offset-1 col-md-offset-3 col-md-6">
                        <p>
                            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>
                            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>GNQA is not a finished product as we are working diligently to improve it daily.</p>
                        <p>
                            <b>Thanks for using GNQA!</b>
                        </p>
                    </div>
                </div>
            {% endif %}
        </article>
    </section>
    {% endblock %}
    {% block js %}
        <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
        <script src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}" type="text/javascript"></script>
        <script src="{{ url_for('js', filename='htmx.min.js') }}" type="text/javascript" ></script>
        <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
 $('footer').hide()
});
        </script>
    {% endblock %}