{% extends "eventum_admin.html" %}
{% import "eventum_macros.html" as macros %}

{% block title %}Create a New Event{% endblock %}
{% block pagetitle %}<span class="no-mobile">New Event</span>{% endblock %}
{% block pagelink %}{{ url_for('events.index') }}{% endblock %}
{% set active_page = "Events" %}

{% block js %}
{{ super() }}
<script type="text/javascript" src="{{ url_for('eventum.static', filename='js/events/create.js') }}"></script>
<script type="text/javascript" src="{{ url_for('eventum.static', filename='js/lib/bootstrap-datepicker.js') }}"></script>
<script type="text/javascript" src="{{ url_for('eventum.static', filename='js/lib/jquery.timepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('eventum.static', filename='js/lib/jquery.datepair.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('eventum.static', filename='js/media/upload.js') }}"></script>
<script src="//yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{% endblock %}

{% block barleft %}
<i class="fa fa-arrow-left fa-2x"></i>
{{ super() }}
{% endblock %}

{% block barright %}
<div class="create-barright">
    <a class="text-button save-button" href="#save">
        <span class="no-mobile">Save Draft</span>
        <span class="only-mobile">Save</span>
    </a>
    {% if current_user.can("publish") %}
        {% if event and event.published %}
            {{ macros.toggle("Publish", "Unpublish")}}
        {% else %}
            {{ macros.toggle("Publish", "Unpublish", start_on=False)}}
        {% endif %}
    {% endif %}
</div>
{% endblock %}

{% block main %}
{% call macros.modal(modal="repeat") %}
<h3>Set Repeat Frequency</h3>
<form class="m-repeat-form">
    <div class="form-control">
        <label for="m-frequency">Repeats:</label>
        <select name="m-frequency" id="m-frequency">
            <option value="Weekly" data-enumerable="weeks">Weekly</option>
        </select>
    </div>
    <div class="form-control">
        <label for="m-every">Repeat every:</label>
        <select name="m-every" id="m-every">
            {% for i in range(1,31) %}
            <option value="{{i}}">{{i}}</option>
            {% endfor %}
        </select>
        <span class="enumerable">weeks</span>
    </div>
    <div class="form-control">
        <label for="m-starts">Starts:</label>
        <input type="text" name="m-starts" id="m-starts" value="" readonly>
    </div>
    <div class="form-control">
        <label></label>
        <input type="radio" name="m-ends" id="m-ends-after" value="after"
            required>
        <label for="m-num_occurrences">After</label>
        <input type="number" name="m-num_occurrences" id="m-num_occurrences" value="25">
        <label for="m-num_occurrences">occurrences</label>
    </div>
    <div class="form-control">
        <label></label>
        <input type="radio" name="m-ends" id="m-ends-on" value="on">
        <label for="m-recurrence_end_date">On</label>
        <input type="text" class="date" name="m-recurrence_end_date" id="m-recurrence_end_date">
    </div>
    <hr>
    <div>
        <label for="m-recurrence_summary">Summary:</label>
        <span class="summary"></span>

    </div>
    <input type="submit" value="Save">
</form>
{% endcall %}
{% call macros.modal(modal="image") %}
<h3>Add an Image</h3>
{{ macros.upload_form(upload_form, uploaded_from=url_for('posts.new')) }}
<div id='images-ajax-loadpoint'>
</div>
{% endcall %}
{{ super() }}
{% endblock %}

{% block content %}
<form class="create-event-form"
    {% block action %}
    action="{{ url_for('events.create') }}"
    {% endblock %}
    method="POST">
    {{ form.csrf_token }}
    <div class="title-wrapper">
        {{ macros.render_field(form.title, placeholder="Event Title", autofocus="") }}
    </div>
    <div class="permalink-wrapper small">
        <h6 class="permalink-title">Permalink:</h6>
        <p class="permalink-base">{{ url_for('client.event', slug="", _external=True) }}</p>
        {{ macros.render_field(form.slug, required="", label=False, placeholder="cookies-and-code")}}
        {% if event and event.is_recurring %}
        <p class="permalink-base">/{{ event.index }}</p>
        {% endif %}
    </div>
    <div class="with-icon">
        <i class="fa fa-map-marker fa-2x"></i>
        {{ macros.render_field(form.location, placeholder="Location", class="location") }}
    </div>
    <div class="with-icon">
        <i class="fa fa-calendar fa-2x"></i>
        <div class="datetime input-daterange">
            <div class="start-wrapper">
                {{ macros.render_field(form.start_date, class="start date") }}
                {{ macros.render_field(form.start_time, type="text", class="start time") }}
            </div>
            <span class="to">to</span>
            <div class="end-wrapper">
                {{ macros.render_field(form.end_date, class="end date") }}
                {{ macros.render_field(form.end_time, type="text", class="end time") }}
            </div>
        </div>
    </div>
    <div class="with-icon">
        <i class="fa fa-facebook fa-2x"></i>
        {{ macros.render_field(form.facebook_url, placeholder="Facebook Event URL", class="location") }}
    </div>
    <div class="with-icon">
        <i class="fa fa-repeat fa-2x"></i>
        <div class="repeat">
            {{ macros.render_field(form.is_recurring) }}
            {% if event and event.is_recurring %}
            <label for="is_recurring">Repeat:</label>
            <span class="summary"></span>
            <a href="#show-modal" data-modal="repeat">Edit</a>
            {% else %}
            <label for="is_recurring">Repeat...</label>
            <span class="summary hidden"></span>
            <a href="#show-modal" data-modal="repeat"></a>
            {% endif %}
        </div>
    </div>
    <div class="event-image-and-descriptions">
        <div class="descriptions">
            <div id="epiceditor-short-description">
            </div>
            <div id="epiceditor-long-description">
            </div>
        </div>
        <div {% if event and event.image %}
             class="set-image event-image hidden"
             {% else %}
             class="set-image event-image"
             {% endif %}>
            <a href="#show-modal" data-modal="image">
                <i class="fa fa-plus fa-3x"></i>
            </a>
        </div>
        {% if event and event.image %}
        <div class="display-image image event-image">
            <a href="#remove-image">
                <i style="background-image:url({{ event.image.url() }});"></i>
            </a>
        {% else %}
        <div class="display-image event-image image hidden">
            <a href="#remove-image">
                <i></i>
            </a>
        {% endif %}
        </div>
    </div>
    <div class="hidden">
        {{ macros.render_field(form.event_image) }}
        {{ macros.render_field(form.published) }}
        {{ macros.render_field(form.frequency) }}
        {{ macros.render_field(form.every) }}
        {% for subfield in form.ends %}
            <ul>
                <li>{{ subfield }}</li>
                <li>{{ subfield.label }}</li>
            </ul>
        {% endfor %}
        {{ macros.render_field(form.short_description, label=True, class="short", placeholder="A catchy, one sentence description of the event.") }}
        {{ macros.render_field(form.long_description, label=True, class="long", placeholder="A three to five sentence description that goes into more detail.") }}
        {{ macros.render_field(form.num_occurrences) }}
        {{ macros.render_field(form.recurrence_end_date) }}
        {{ macros.render_field(form.recurrence_summary) }}

        {% if event %}
        {{ macros.render_field(form.update_all) }}
        {% endif %}
        <input type="submit" id="save-event" value="Add">
    </div>
</form>
{% endblock %}
