event_details.html

{% extends "base.html" %}
{% load guardian_tags %}

{% block content %}
    <h1> Event Name: {{ event.name }} </h1>
    <hr/>
    {{ event.description}}
    <hr/>

    {% if event.starts_at %}
        <h3> Event starts on </h3>
        {{ event.starts_at }}
        <hr/>
    {% endif %}

    <h3>Event created by: {{ event.creator }} </h3>
    {% if user.is_authenticated %}
    <h3>RSVP</h3>
    <p id="rsvpMessage">{{ attendee_rsvp }}</p>
    <div id="changeRsvpModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">rsvp</h4>
                </div>
                <div class="modal-body">
                    <div class="btn-group">
                        <button type="button" onclick="change_rsvp('{{ event.id }}', 'yes')" id="rsvp-yes" class="rsvp btn btn-default">Yes</button>
                        <button type="button" onclick="change_rsvp('{{ event.id }}', 'no')" id="rsvp-no" class="rsvp btn btn-default">No</button>
                        <button type="button" onclick="change_rsvp('{{ event.id }}', 'maybe')" id="rsvp-maybe" class="rsvp btn btn-default">May be</button>
                    </div>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
    <button class="btn btn-default" id="rsvpButton" data-toggle="modal" data-target="#changeRsvpModal">{% if attendee %}Change{% else %}Add{% endif %} rsvp</button>

    {% if attendee %}
    <div id="deleteRsvpModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Are you sure?</h4>
                </div>
                <div class="modal-body">
                    <form action="{% url 'delete_rsvp' attendee.pk %}" method="POST">
                        {% csrf_token %}
                        <button class="btn btn-default" type="submit">Yes</button>
                        <button class="btn btn-default" type="button" class="close" data-dismiss="modal">No</button>
                    </form>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
    <button class="btn btn-danger" data-toggle="modal" data-target="#deleteRsvpModal">Remove my rsvp</button>
    {% endif %}

    {% endif %}
    <hr/>
    <h1> Event Attendees </h1>
    <ol>
        {% for attendee in event_attendees %}
            <li>{{ attendee.user.first_name }}</li>
            {% empty %}
            <li style="list-style:None;">Be the first attendee.</li>
        {% endfor %}
    </ol>
    {% if editable %}
        {% get_obj_perms request.user for event as "event_perms" %}
        {% if "change_event" in event_perms %}
        <a class="btn btn-default" href="{% url 'tavern_event_update' event.slug %}">Edit Event</a>
        {% endif %}

        {% if "delete_event" in event_perms %}
        <div id="deleteEventModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Are you sure?</h4>
                    </div>
                    <div class="modal-body">
                        <form action="{% url 'delete_event' event.slug %}" method="POST">
                            {% csrf_token %}
                            <button class="btn btn-default" type="submit">Yes</button>
                            <button class="btn btn-default" type="button" class="close" data-dismiss="modal">No</button>
                        </form>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteEventModal">Delete</button>
        {% endif %}
    {% endif %}
{% endblock content %}

{% block javascript %}
    <script>
        function change_rsvp(event_id, rsvp) {
            var url = "/rsvp/" + event_id + "/" + rsvp + "/";
            $.get(url, function(data) {
                    $(".rsvp").removeClass("active");
                    $("#rsvp-"+rsvp).addClass("active");
                    $("#rsvpMessage").html(data);
                    $("#rsvpButton").html("Change rsvp");
                    $("#changeRsvpModal").modal('hide');
                    });
        }
    </script>
{% endblock %}