{% extends "base.html" %}
{% block title %}Recommendation{% endblock %}
{% block content %}
  <h2>Your Recommended Movie</h2>
  {% if movie %}
    <div class="card movie-card">
      <div class="row no-gutters">
        {% if movie.poster %}
          <div class="col-md-4">
            <img src="{{ movie.poster }}" class="card-img movie-poster" style="height:400px;" alt="{{ movie.title }}">
          </div>
        {% endif %}
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">{{ movie.title }} ({{ movie.year }})</h5>
            <p class="card-text">{{ movie.description }}</p>
          </div>
        </div>
      </div>
    </div>
    <p class="mt-3">Have you seen this movie? If yes, rate it from 1 (disliked) to 5 (loved); otherwise select "Not Seen".</p>
    <form method="post" action="{{ url_for('feedback') }}">
      <input type="hidden" name="movie_title" value="{{ movie.title }}">
      <div class="btn-group btn-group-lg" role="group">
        <button type="submit" name="rating" value="0" class="btn btn-secondary">Not Seen</button>
        <button type="submit" name="rating" value="1" class="btn btn-danger">1</button>
        <button type="submit" name="rating" value="2" class="btn btn-warning">2</button>
        <button type="submit" name="rating" value="3" class="btn btn-info">3</button>
        <button type="submit" name="rating" value="4" class="btn btn-primary">4</button>
        <button type="submit" name="rating" value="5" class="btn btn-success">5</button>
      </div>
    </form>
  {% else %}
    <div class="alert alert-info mt-4" role="alert">
      No more recommendations available. Thank you for your feedback!
    </div>
    <a href="{{ url_for('survey') }}" class="btn btn-outline-primary mt-3">Restart Survey</a>
  {% endif %}
{% endblock %}