{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/bootstrap/bootstrap-datetimepicker.min.css') }}">
<script src="{{ url_for('static', filename='assets/utils.js') }}"></script>
{% endblock %}

{% block app_content %}
<h1>{{ title }}</h1>

<div class="col-md-5 col-sm-6 col-xs-8">
    <hr>
    <form action="" method="post" class="form" role="form">
        {{ form.hidden_tag() }}
        {{ form.timezone }}
        {{ wtf.form_field(form.game_name, class='form-control') }}

        {{ form.start_time.label }}
        <div class="form-group row">
            <div class="col-sm-7">
                {{ form.start_time }}
            </div>
            <div class="col-sm-5 align-self-center">
                {{ wtf.form_field(form.start_time_disabled, class='form-control') }}
            </div>
        </div>

        {{ form.end_time.label }}
        <div class="form-group row">
            <div class="col-sm-7">
                {{ form.end_time }}
            </div>
            <div class="col-sm-5 align-self-center">
                {{ wtf.form_field(form.end_time_disabled, class='form-control') }}
            </div>
        </div>
        {{ wtf.form_field(form.submit, class='btn btn-primary', value="Update") }}
    </form>
    <hr>
    {% if game.hidden %}
    <a href="{{ url_for('game.publish_game', game_name=game.name) }}">
        <button class="btn btn-success">Publish Game</button>
    </a>
    {% else %}
    <a href="{{ url_for('game.hide_game', game_name=game.name) }}">
        <button class="btn btn-success">Hide Game</button>
    </a>
    {% endif %}
    {% if game.paused %}
    <a href="{{ url_for('game.resume_game', game_name=game.name) }}">
        <button class="btn btn-primary">Resume Game</button>
    </a>
    {% else %}
    <a href="{{ url_for('game.pause_game', game_name=game.name) }}">
        <button class="btn btn-primary">Pause Game</button>
    </a>
    {% endif %}
    
    <button class="btn btn-danger" onclick="deleteGame()">Delete Game</button>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<!-- TODO: Scripts downloaden naar repo? -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    // Datetime pickers
    $(function () {
        $('#timezone')[0].value = moment.tz.guess();
        var date = moment()
        createDateTimePicker('#datetimepicker_start', "#start_time_disabled", date)
        date.add(1, 'hour');
        createDateTimePicker('#datetimepicker_end', "#end_time_disabled", date)

        $("#datetimepicker_start").on("dp.change", function (e) {
            $('#datetimepicker_end').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker_end").on("dp.change", function (e) {
            $('#datetimepicker_start').data("DateTimePicker").maxDate(e.date);
        });
    });

    // Delete Game button
    function deleteGame() {
            if (confirm("Are you sure you want to delete this game?")) {
                window.location.href = "{{ url_for('game.delete_game', game_name=game.name) }}"
            }
        }
</script>
{% endblock %}