{% extends "layout.html" %}

{% block title %}Edit Event - DotaNoobs {% endblock %}

{% block content %}
<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-1-1">
        {% if event.name == None %}
            <h2 class="uk-float-left"><i class="uk-icon-calendar uk-icon-large"></i> New Event</h2>
        {% else %}
            <h2 class="uk-float-left"><i class="uk-icon-calendar uk-icon-large"></i> {{ event.name }}</h2>
        {% endif %}
    </div>
    <!--Main content area -->
    <div class="uk-width-large-2-3 uk-width-medium-1-1 uk-panel">
        <form class="uk-form uk-form-width-large" action="" method="post" name="settings">
            {{ form.hidden_tag() }}
            <fieldset data-uk-margin>
                <div class="uk-form-row">
                    <label class="uk-form-label">Event Name: </label><br/>
                    {{ form.name(placeholder="e.g. Tuesday Tango", class="uk-form-width-medium") }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Type: </label>
                    {{ form.type }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Points: </labeb>
                    {{ form.points(placeholder="e.g. 20") }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Time To Earn: </label>
                    {{ form.reward_threshold(placeholder="e.g. 30 (minutes)") }}
                </div>
                <br/>
                <div class="uk-form-row">
                    <label class="uk-form-label">Starts</label><br/>
                    <input id="start_d" placeholder="01.01.2015" data-uk-datepicker />
                    <input id="start_t" placeholder="14:30" data-uk-timepicker />
                    {{ form.start_time(class="datepicker uk-hidden") }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Ends</label><br/>
                    <input id="end_d" placeholder="01.01.2015" data-uk-datepicker />
                    <input id="end_t" placeholder="09:30" data-uk-timepicker />
                    {{ form.end_time(class="datepicker uk-hidden") }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Description</label><br/>
                    {{ form.desc(rows="10", class="uk-width-1-1", placeholder="A brief description of the event your planning; convince people to come!") }}
                </div>
                <div class="uk-form-controls uk-margin-top">
                    <button class="uk-button uk-button-success" type="submit">Save</button>
                    <a class="uk-button" href="{{ url_for('user_profile', userid=g.user.id) }}">Cancel</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
{% endblock %}

{% block pagescripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.4.0/addons/datepicker/datepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.4.0/addons/timepicker/timepicker.min.js"></script>
<link rel=stylesheet href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.4.0/addons/datepicker/datepicker.gradient.css"></link>
<script>
    $(document).ready(function(){
        var tz = new Date().getTimezoneOffset();
        var s = moment.utc($("#start_time").val(), "DD.MM.YYYY HH:mm").zone(tz);
        var e = moment.utc($("#end_time").val(), "DD.MM.YYYY HH:mm").zone(tz);

        $("#start_d").val(s.format("DD.MM.YYYY"));
        $("#start_t").val(s.format("HH:mm"));
        $("#end_d").val(e.format("DD.MM.YYYY"));
        $("#end_t").val(e.format("HH:mm"));
    });

    $(".uk-form").submit(function(event) {
        var s = moment($("#start_d").val() + ' ' + $("#start_t").val(), "DD.MM.YYYY HH:mm");
        var e = moment($("#end_d").val() + ' ' + $("#end_t").val(), "DD.MM.YYYY HH:mm");

        $("#start_time").val(s.utc().format("DD.MM.YYYY HH:mm"));
        $("#end_time").val(e.utc().format("DD.MM.YYYY HH:mm"));

        return true;
    });
</script>
{% endblock %}