{% extends "base.html" %}
{% block title %}Movie Survey{% endblock %}
{% block content %}
  <h2>Initial Movie Survey</h2>
  <p>Please rate the following movies on a scale from 1 (disliked) to 5 (loved), or choose "Not Seen".</p>
  <form method="post">
    {% for movie in movies %}
      <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:300px;" 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 class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating_{{ movie.title }}" id="{{ movie.title }}_0" value="0" checked>
                <label class="form-check-label" for="{{ movie.title }}_0">Not Seen</label>
              </div>
              {% for i in range(1, 6) %}
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="rating_{{ movie.title }}" id="{{ movie.title }}_{{ i }}" value="{{ i }}">
                  <label class="form-check-label" for="{{ movie.title }}_{{ i }}">{{ i }}</label>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
    <button type="submit" class="btn btn-success btn-lg btn-block">Submit Survey</button>
  </form>
{% endblock %}