{% extends "oneevent/base.html" %}
{% load crispy_forms_tags %}

{% block navbar_breadcrumbs %}
    <li class="active">{% if event.id %}Edit{% else %}New{% endif %} Event</li>
{% endblock %}

{% block heading_action %}{% if event.id %}Edit{% else %}New{% endif %} Event{% endblock %}

{% block heading_title %}{{ event.title }}
    <small>{{ event.start|date:"D, d N Y H:i" }}</small>
{% endblock %}

{% block content %}

{% if event.pk %}
<div class="row form-inline bottom-separation">
<div class='col-sm-4'>
    <a href="{% url 'event_manage' event_id=event.id %}"
       class="btn btn-primary">Manage the event</a>
</div>
<div class='col-sm-8 pull-right' align="right">
    <div class="form-group">
        <label for="regristrationAddress">URL to register to this event:</label>
        <div class="input-group">
            <input type="text" class="form-control" id="regristrationAddress" size="40"
                   value="{{ registration_url }}"></input>
            <div class="input-group-addon" onClick="copyToClipboard(document.getElementById('regristrationAddress').value)">
                <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
            </div>
        </div>
    </div>
</div>
</div>
{% endif %}

<div class="row">
<div class="panel panel-info collapsible-caret">
    <div class="panel-heading collapsible-toggle" data-toggle="collapse" data-target="#collapseEvent">
        <strong>Details</strong>
    </div>

    <div id="collapseEvent" class="panel-collapse collapse in">
    <div class="panel-body">
        {% crispy event_form %}
    </div>
    </div>
</div>

{% if event.pk %}
<div class="panel panel-info collapsible-caret">
    <div class="panel-heading collapsible-toggle collapsed" data-toggle="collapse" data-target="#collapseCategories">
        <strong>Categories</strong>
    </div>

    <div id="collapseCategories" class="panel-collapse collapse">
    <div class="panel-body">
        {% if category_formset.non_form_errors %}
        <ul><strong>
            {{ category_formset.non_form_errors|unordered_list }}
        </strong></ul>
        </div>
        {% endif %}

        {% crispy category_formset category_helper %}
    </div>
    </div>
</div>

<div class="panel panel-info collapsible-caret">
    <div class="panel-heading collapsible-toggle collapsed" data-toggle="collapse" data-target="#collapseSessions">
        <strong>Sessions</strong>
    </div>

    <div id="collapseSessions" class="panel-collapse collapse">
    <div class="panel-body">
        {% crispy session_formset session_helper %}
    </div>
    </div>
</div>

<div class="panel panel-info collapsible-caret">
    <div class="panel-heading collapsible-toggle collapsed" data-toggle="collapse" data-target="#collapseChoices">
        <strong>Choices</strong>
    </div>

    <div id="collapseChoices" class="panel-collapse collapse">
    <div class="panel-body">
        <table class="table">
        {% for choice in event.choices.all %}
            {% if forloop.first %}
            <thead>
                <tr><th>Choice</th><th>Options</th><th><!--Actions--></th></tr>
            </thead>
            <tbody>
            {% endif %}
            <tr>
                <th>{{ choice.title }}</th>
                <td>
                {% for option in choice.options.all %}
                    <p>
                        {{ option.title }}
                        {% if option.default %}<span class="label label-default">default</span>{% endif %}
                    </p>
                {% endfor %}
                </td>
                <td>
                    <p><a href="{% url 'choice_update' choice_id=choice.id %}"
                        class="btn btn-sm btn-warning">Edit</a></p>
                    <p><a href="{% url 'choice_delete' choice_id=choice.id %}"
                        class="btn btn-sm btn-danger">Delete</a></p>
                </td>
            </tr>
            {% if forloop.last %}
            </tbody>
            {% endif %}
        {% empty %}
        <tr><th>No choice defined for this event</th></tr>
        {% endfor %}
        </table>
        <div>
            <a href="{% url 'choice_create' event_id=event.id %}" class="btn btn-success">Add a choice</a>
        </div>
    </div>
    </div>
</div>
{% endif %}

</div>
{% endblock %}