my_loans_form_outside_loop.html

{% extends "board_game_club_apps/base.html" %}
{% load bootstrap4 %}

{% block page_header %}
  <h1>My Loans</h1>
{% endblock page_header %}

{% block content %}
  <ul>
    <form action="{% url 'board_game_club_apps:return_loan' loan.id %}" method="post" class="form">
    {% for loan in loans %}
      <div class="card mb-3">
        <h5 class="card-header">
          Game Loned: {{ loan.game_loaned }} <br>
          Loan Date: {{ loan.loan_date|date:'d-m-Y D H:i'  }} <br>
          Return Date: {{ loan.return_time|date:'d-m-Y D H:i' }}
            {% csrf_token %}
            {% buttons %}
              <button name="submit" class="btn btn-primary">Return Game</button>
              <button type="submit" class="btn btn-primary" name="{{ loan.id }} value="{{ loan.id }}"">Return Game 1</button>
            {% endbuttons %}
        </h5>
      </div>
    {% empty %}
      <li><h5>Unfortunately, there is not any loaned game.</h5></li>
    {% endfor %}
    </form>
  </ul>
{% endblock content %}