{% 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: 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;
 }

    </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)"
                       value=''
                       name="querygnqa" />
            </div>
        </form>
        <article id="swap" class="row">
            <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>
                </article>
            </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() {
     $('footer').hide()
 });
            </script>
        {% endblock %}