{% extends "base.html" %}
{% load static %}

{% block title %}Jokes App{% endblock %}

{% block content %}
<div class="hero">
  <div class="container">
    <h1 class="display-4">AI Generated Jokes</h1>
    <p class="lead">Fresh, funny, and unapologetically Gen Z.</p>
  </div>
</div>

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card joke-card">
        <div class="card-body">
          <p class="card-text joke-text-style" id="joke-text">Why don't scientists trust atoms? Because they make up everything!</p>
        </div>
      </div>
      <div class="text-center mt-4">
        <button class="btn btn-primary btn-lg" id="generate-joke-btn">Generate New Joke</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.getElementById('generate-joke-btn').addEventListener('click', function() {
    fetch('/generate-joke/')
      .then(response => response.json())
      .then(data => {
        document.getElementById('joke-text').innerText = data.joke;
      });
  });
</script>
{% endblock %}