{% extends "base.html" %}
{% load staticfiles %}
{%block page-content%}

<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
  <div class="container">
    <a class="navbar-brand" href="index.html">Anna & Dan</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<div class="rsvp-container section-container" id="rsvp">
  <div class="container">

    <div class="row">
      <div class="col rsvp section-description wow fadeIn">
        <h2>RSVP</h2>

        <p class="text-center">Kindly let us know if you will be able to attend our wedding!</p>

        <form action="{% url 'rsvp' %}?rsvp-code={{ rsvpCode }}" method="post">
          {% csrf_token %}
          {% for guest in guests %}
          <div class="form-group row justify-content-center">
            <label class="col-auto">{{ guest.name }} will be: </label>
            <div class="col-auto">
              <div class="form-check form-check-inline">
                <input name="attending_{{ guest.id }}" id="attending_{{ guest.id }}_yes" type="radio" class="form-check-input" value="attending" required="required">
                <label for="attending_{{ guest.id }}_yes" class="form-check-label">attending</label>
              </div>
              <div class="form-check form-check-inline">
                <input name="attending_{{ guest.id }}" id="attending_{{ guest.id }}_no" type="radio" class="form-check-input" value="not_attending" required="required">
                <label for="attending_{{ guest.id }}_no" class="form-check-label">sending their regrets</label>
              </div>
            </div>
          </div>
          {% endfor %}

          <div class="form-group row justify-content-center">
            <button name="submit" type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>

{%endblock%}