{% block content %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Pandas AI</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
      </head>
<body>

<div class="container">
  <h2>Pandas AI</h2>
  <br>
  <form class="form-horizontal" action="/pandasai" method="POST" enctype="multipart/form-data">
    <div class="form-group">
      <label class="control-label col-sm-2" for="query">Input:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="query" placeholder="Enter Query" name="query" required>
      </div>
    </div>
    <br>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" value="Submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
  {% if response %}
  <div class="card border-info mb-3" style="max-width: 18rem;">
    <div class="card-header">
      Pandas AI Discovery
    </div>
    <div class="card-body text-info">
      <p class="card-text">{{ response }}</p>
    </div>
  </div>
  {% endif %}
</div>

</body>
</html>

{% endblock %}