{% extends "base.html" %}

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

{% block content %}

<div class="card">
    <h1>{{ event.title }}</h1>

    {% if event.description %}
        <div class="subcard">
        {{ event.markdown|safe }}
        </div>
    {% endif %}

</div>

{% if event.image %}
<div class="card">
    <img src="/media/{{ event.image }}" alt="{{ event.title }} image">
</div>
{% endif %}

{% if response %}
<div class="card  {% if response.joining %}bg-green{% elif response.not_coming %}bg-red{% elif response.in_progress %}bg-orange{% endif %}">
    <h3>Hello {{ response.rsvp.name }}!</h3>
    {% if response.not_started %}

        You have been invited! Please let us know if you are coming!
        </br></br>
        <a href="{% url 'events:rsvp-start' response.rsvp.id %}" class="button bg-accent hover">Respond now!</a>
        <a href="{% url 'events:rsvp-decline' response.rsvp.id %}" class="button bg-red hover">I am not coming</a>

    {% elif response.in_progress %}

        You have not finished responding! Please let us know if you are coming!
        </br></br>
        <a href="{% url 'events:rsvp-start' response.rsvp.id %}" class="button bg-accent hover">Continue responding now!</a>
        <a href="{% url 'events:rsvp-decline' response.rsvp.id %}" class="button bg-red hover">I am not coming</a>

    {% elif response.not_coming %}

        Sad that you are not coming?
        </br></br>
        <a href="{% url 'events:rsvp-restart' response.rsvp.id %}" class="button bg-accent hover">I changed my mind!</a>

    {% elif response.joining %}

        You have responded!
        </br></br>
        <a href="{% url 'events:rsvp-update' response.rsvp.id %}" class="button bg-accent hover">Update response!</a>
        <a href="{% url 'events:rsvp-decline' response.rsvp.id %}" class="button bg-red hover">I can no longer come</a>

    {% endif %}
    
</div>
{% else %}
<div class="card">
    <h3>Want to come?</h3>
    Use your invite link, or the one in your inbox to respond!
</div>
{% endif %}

<div class="card">
    <h3>Activities</h3>
    {% for group, activities in groups.items %}
        <h4 class="group-title">
            {{ group.title }}
            {% if group.single_choice %}
                <span class="badge">Only one</span>
            {% endif %}
        </h4>

        {% for activity in activities %}
            {% include "event/event_activity_details.html" %}
        {% endfor %}
    {% endfor %}

    {% if ungrouped_activities %}
        <h4 class="group-title">Other activities</h4>

        {% for activity in ungrouped_activities %}
            {% include "event/event_activity_details.html" %}
        {% endfor %}
    {% endif %}

</div>
{% endblock %}