{% extends "base.html" %}

{% block title %}{{ event.title }}{% endblock %}

{% block content %}

{% if is_locked %}

<div class="card locked">
   It is not possible to respond to this event.
</div>

{% else %}

<h2 class="group-title">
    Hello {{ rsvp.name }}
    {% if rsvp.allow_bring_guests %}
        <span class="badge bg-green">Allowed to bring guests</span>
    {% endif %}
</h2>

<div id="rsvp-flow"
     hx-get="{% url 'events:rsvp-pages' rsvp.id page %}"
     hx-trigger="load">
</div>

<div class="button-row">

   <a class="button bg-orange hover"
      hx-get="{% url 'events:rsvp-page-change' rsvp.id "previous" %}"
      hx-target="#rsvp-flow"
   >Previous</a>

   <a class="button bg-blue hover"
      hx-get="{% url 'events:rsvp-page-change' rsvp.id "next" %}"
      hx-target="#rsvp-flow"
   >Next</a>

   <div class="button-row-right">

      <a class="button bg-red hover"
         href="{% url 'events:rsvp-decline' rsvp.id %}" >Not coming</a>

      <a class="button bg-green hover"
         href="{% url 'events:event' event.slug %}" >Back to event</a>
   </div>
</div>

{% endif %}

{% endblock %}

{% block scripts %}
{% load static %}
<script>
   const eventId = "{{ event.id }}";
   const rsvpId = "{{ rsvp.id }}";
   var guestCount = "{{ rsvp.guest_count }}";
</script>
<script src="{% static 'js/rsvp.js' %}"></script>
{% endblock %}