{% extends "seevooplay/base.html" %}
{% load add_to_calendar %}
{% load i18n static %}

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

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'seevooplay/css/event.css' %}">
{% endblock %}

{% block content %}
<div id="seevooplay">
    <h1>{{ event.name }}</h1>

    {% if messages %}
        <ul class="messages">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {% if event.image %}
        <div class="event-image">
            <img alt="" src="{{ event.image.url }}">
        </div>
    {% endif %}

    <p class="greeting">
        {% if guest %}
            {% blocktrans with name=guest.name %}Greetings, {{ name }}!{% endblocktrans %}
        {% else %}
            {% blocktrans with username=request.user.username %}Greetings, admin {{ username }}!{% endblocktrans %}
            <a class="admin-link" href="{% url 'admin:seevooplay_event_change' event.id %}">{% trans "Edit this event" %}</a>
        {% endif %}
    </p>
    <p>
        {% blocktrans %}You are invited to the following event. Please <a href="#rsvp">RSVP</a> below!{% endblocktrans %}
    </p>

    <table class="event-details">
        <tr><td>{% trans "Event:" %}</td><td>{{ event.name }}</td></tr>
        <tr>
            <td>
                {% if event.host2_name %}{% trans "Hosts:" %}{% else %}{% trans "Host:" %}{% endif %}
            </td>
            <td>
                {% if event.host1_email %}<a href="mailto:{{ event.host1_email }}">{% endif %}{{ event.host1_name }}{% if event.host1_email %}</a>{% endif %}
                {% if event.host2_name %}{% trans "and" %} {% if event.host2_email %}<a href="mailto:{{ event.host2_email }}">{% endif %}{{ event.host2_name }}{% if event.host2_email %}</a>{% endif %}{% endif %}
            </td>
        </tr>
        <tr>
            <td>{% trans "When:" %}</td>
            <td>{{ date_display }}</td>
        </tr>
        <tr>
            <td>{% trans "Where:" %}</td>
            <td>
                {{ event.location_name }}<br>
                <a target="_blank" href="https://duckduckgo.com/?q={{ event.location_address|urlencode }}&iaxm=maps">{{ event.location_address }}</a>
            </td>
        </tr>
        <tr><td>{% trans "Details:" %}</td><td>{{ event.details|safe }}</td></tr>
    </table>

    <div style="text-align: center;">
        {% url 'event_page' event_id=event.id guest_uuid=guest.short_uuid as event_page_path %}
        {% add_to_calendar event.name event.start_datetime event.end_datetime event.location_address request.scheme request.get_host event_page_path %}
    </div>

    <div class="bottom-container">
        <div id="rsvp" class="reply-form">
            <h2>{% trans "RSVP" %}</h2>
            <form method="post">
                {% csrf_token %}
                {% for field in form %}
                    <div class="field-wrapper {{ field.html_name }}">
                        {{ field.errors }}
                        {% if field.name != 'extra_guests' %}<label for="{{ field.id_for_label }}">{{ field.label }}</label>{% endif %}
                        {% if field.name == 'extra_guests' %}{% trans "I will bring" %} {% endif %}
                        {{ field }}
                        {% if field.name == 'extra_guests' %} {% trans "additional guest(s) with me." %}{% endif %}
                        {% if field.help_text %}<p class="help">{{ field.help_text|safe }}</p>{% endif %}
                    </div>
                {% endfor %}
                <input type="submit" value="{% trans "post my reply" %}">
            </form>
        </div>

        <div class="replies">
            <h2>{% trans "Replies" %}</h2>
            <div class="replycount">
                <div class="yes">{% blocktrans with count=yes_replies_count %}Yes: {{ count }}{% endblocktrans %}</div>
                <div class="maybe">{% blocktrans with count=maybe_replies_count %}Maybe: {{ count }}{% endblocktrans %}</div>
                <div class="no">{% blocktrans with count=no_replies.count %}No: {{ count }}{% endblocktrans %}</div>
                <div class="none">{% blocktrans with count=none_replies.count %}No Reply: {{ count }}{% endblocktrans %}</div>
            </div>
            {% if yes_replies_count > 0 %}
                <h3 class="yes">{% trans "Yes" %}</h3>
                {% with yes_replies as replies %}
                    {% include 'seevooplay/event_replies.html' %}
                {% endwith %}
            {% endif %}
            {% if maybe_replies_count > 0 %}
                <h3 class="maybe">{% trans "Maybe" %}</h3>
                {% with maybe_replies as replies %}
                    {% include 'seevooplay/event_replies.html' %}
                {% endwith %}
            {% endif %}
            {% if no_replies.count > 0 %}
                <h3 class="no">{% trans "No" %}</h3>
                {% with no_replies as replies %}
                    {% include 'seevooplay/event_replies.html' %}
                {% endwith %}
            {% endif %}
            {% if none_replies.count > 0 %}
                <h3>{% trans "No reply" %}</h3>
                {% with none_replies as replies %}
                    {% include 'seevooplay/event_replies.html' %}
                {% endwith %}
            {% endif %}
        </div>
    </div>
    <footer>
        {% trans "powered by" %}
        <a target="_blank" href="https://github.com/matthewn/seevooplay">Seevooplay</a>
    </footer>
</div>
{% endblock %}