{% extends 'layout.html' %}

{% block content %}
  <!-- <div class="center"> -->
    <div id="form1" class="container-fluid">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="container-fluid">
              <p class="lead"><h2>Enter Gene Expression Data of Patient</h2></p>
            </div>
            <form action = "{{ url_for('predict') }}" method = "POST" enctype = "multipart/form-data">
              <input class="form-control flex" type = "file" name = "file" accept=".xlsx" required /><br>
              <button type="submit" class="btn btn-success btn-lg"value='predict'>Predict</button>
              <p style="color: black;">If you want to enter data manually <button type="button" class="btn btn-info" id="manual">click here</button></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  
    <div id="form2" class="container-fluid">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="container-fluid">
              <p class="lead"><h2>Enter Gene Expression Data of Patient</h2></p><br>
            </div>
        
            <form method="POST", action="{{ url_for('predict1') }}">
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='a', placeholder="MCM2", required="required", class="form-control" width="20px"/>
                </div>
                <div class="col mb-2">
                  <input type="text", name='b', placeholder="DEK", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='c', placeholder="H2AFZ", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='d', placeholder="METRN", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='e', placeholder="NFIB", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='f', placeholder="TPX2", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='g', placeholder="MCM6", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='h', placeholder="TOPBP1", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='i', placeholder="FEN1", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='j', placeholder="TTK", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='k', placeholder="ESR1", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='l', placeholder="MELK", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='m', placeholder="E2F3", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='n', placeholder="CYP2B7P", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='o', placeholder="TP53TG1", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='p', placeholder="RARRES1", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='q', placeholder="ROPN1B", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='r', placeholder="PLCH1", required="required", class="form-control" />
                </div>
              </div>
              <div class="row g-3">
                <div class="col mb-2">
                  <input type="text", name='s', placeholder="SLC7A8", required="required", class="form-control" />
                </div>
                <div class="col mb-2">
                  <input type="text", name='t', placeholder="MLPH", required="required", class="form-control" />
                </div>
              </div><br>
              <!-- <div class="container-fluid"><br> -->
                <button type="submit" class="btn btn-success btn-lg"value='predict'>Predict</button>
              <!-- </div> -->
              <p style="color: black;">If you want to enter excel file <button type="button" class="btn btn-info" id="excel">click here</button></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  <!-- </div> -->
  <script>
    $(document).ready(function() {
        $("#manual").click(function() {
            $("#form1").hide();
            $("#form2").show();
        });
        $("#excel").click(function() {
            $("#form1").show();
            $("#form2").hide();
        });
    });
  </script>
{% endblock %}