{% extends "base.html" %}
{% block content %}
<div class="container py-5">
  <h1 class="mb-4">Welcome, {{ username }}!</h1>

  {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
  {% if prediction %}<div class="alert alert-success">The predicted flower species is: <strong>{{ prediction }}</strong></div>{% endif %}

  <section id="predictor" class="card p-4 mb-4">
    <h2>Iris Flower Predictor</h2>
    <form method="POST" action="{{ url_for('predict') }}">
      <div class="row g-3">
        <div class="col-md-3"><input type="number" step="0.1" name="sepal_length" class="form-control" placeholder="Sepal Length" required></div>
        <div class="col-md-3"><input type="number" step="0.1" name="sepal_width" class="form-control" placeholder="Sepal Width" required></div>
        <div class="col-md-3"><input type="number" step="0.1" name="petal_length" class="form-control" placeholder="Petal Length" required></div>
        <div class="col-md-3"><input type="number" step="0.1" name="petal_width" class="form-control" placeholder="Petal Width" required></div>
      </div>
      <button type="submit" class="btn btn-gradient mt-3">Predict</button>
    </form>
  </section>

  <a href="{{ url_for('logout') }}" class="btn btn-danger">Logout</a>
</div>
{% endblock %}