{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-lg">
  <!-- Header with greeting and delete/re‑predict -->
  <div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold">
      Hello, {{ request.session.get('email').split('@')[0] | capitalize }}!
    </h2>
    <form method="post" action="/user/delete">
      <input type="hidden" name="pred_id" value="{{ pred.id }}">
      <button class="py-2 px-4 bg-red-600 text-white rounded hover:bg-red-700">
        Delete &amp; Re‑predict
      </button>
    </form>
  </div>

  <!-- CGPA + Model Details -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="p-4 border rounded text-center">
      <h3 class="text-lg font-semibold mb-2">Your CGPA</h3>
      <p class="text-5xl font-extrabold text-blue-600">{{ pred.predicted | round(2) }}</p>
    </div>
    <div class="p-4 border rounded">
      <h3 class="text-lg font-semibold mb-2">Model Details</h3>
      <p><strong>Algorithm:</strong> {{ pred.algorithm }}</p>
      <p><strong>Date:</strong> {{ pred.timestamp.split(' ')[0] }}</p>
    </div>
  </div>

  <!-- Input Summary Tiles -->
  <div class="mb-6">
    <h3 class="text-lg font-semibold mb-2">What You Entered</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {% for key, value in pred.input_json.items() %}
      <div class="p-3 bg-gray-50 rounded shadow-sm">
        <span class="font-medium">{{ key.replace('_', ' ') | capitalize }}:</span>
        <span>{{ value }}</span>
      </div>
      {% endfor %}
    </div>
  </div>

  
</div>
{% endblock %}