{% extends 'layout.html' %}

{% block script %}

<script>

  $(document).ready(function(){

    load_data();

    function load_data(query)

    {

     $.ajax({

      url:"/search",

      method:"POST",

      data:{query:query},

      success:function(data)

      {

        $('#result').html(data);

        $("#result").append(data.htmlresponse);

      }

     });

    }

    $('#text').keypress(function(e){

      var key = e.which;

      if(key == 13){

        var search = $(this).val();

        if(search != ''){

          load_data(search);

        }else{

          load_data();

        }

      }

    });

  });

</script>

{% endblock %}

{% block content %}

  <h1 class="text-center">Gene Tool</h1>

  <div class="container text-center">

    <div class="container-fluid">

      <div class="d-flex">

        <input class="form-control me-2" type="search" name="text" id="text" placeholder="Enter Gene Symbol here to search for details of the Genes matching and Press 'ENTER'" aria-label="Search">

      </div>

    </div>

  </div>

  <div class="container text-center" style="margin-top: 5%;" id="result" name="result"></div>

{% endblock %}