{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout md-gutter">
        <div class="md-layout-item md-size-100">
            <div class="md-title">
                <span>
                <md-button href="/" class="md-icon-button md-primary home-icon">
                    <md-icon>home</md-icon>
                </md-button>
                Diffido: ${(schedule && schedule.title) || 'new'} schedule
                </span>
            </div>
        </div>

        <div class="md-layout-item md-size-60">
            <md-card id="main-card">
                <md-card-header>
                    <div class="md-title">
                        Settings
                    </div>
                </md-card-header>

                <md-card-content>
                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-size-50">
                            <md-field>
                                <label>title</label>
                                <md-input v-model="schedule.title" required></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-50">
                            <md-field>
                                <label>url</label>
                                <md-input v-model="schedule.url" required></md-input>
                            </md-field>
                        </div>
                    </div>

                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-size-33">
                            <md-field>
                                <label>notify email</label>
                                <md-input v-model="schedule.email" type="email"></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-33">
                            <md-field>
                                <label>XPath selector</label>
                                <md-input v-model="schedule.xpath"></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-33">
                            <md-field>
                                <label>minimum change</label>
                                <md-input v-model="schedule.minimum_change"></md-input>
                            </md-field>
                        </div>
                    </div>
                    <md-switch v-model="schedule.enabled">enabled</md-switch>
                </md-card-content>
            </md-card>
        </div>

        <div class="md-layout-item">
            <md-card id="trigger-card">
                <md-card-header>
                    <div class="md-title">
                        Trigger
                    </div>
                </md-card-header>
                <md-card-content>
                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-size-25">
                            <md-field>
                                <label>trigger</label>
                                <md-select v-model="schedule.trigger">
                                    <md-option value="interval">interval</md-option>
                                    <md-option value="cron">cron</md-option>
                                </md-select>
                            </md-field>
                        </div>
                    </div>
                    <div v-if="schedule.trigger == 'cron'" class="md-layout md-gutter">
                        <div class="md-layout-item md-size-50">
                            <md-field>
                                <label>crontab</label>
                                <md-input v-model="schedule.cron_crontab"></md-input>
                            </md-field>
                        </div>
                    </div>

                    <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
                        <div class="md-layout-item md-size-20">
                            <md-field>
                                <label>weeks</label>
                                <md-input v-model="schedule.interval_weeks" type="number"></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-20">
                            <md-field>
                                <label>days</label>
                                <md-input v-model="schedule.interval_days" type="number"></md-input>
                            </md-field>
                        </div>
                    </div>
                    <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
                        <div class="md-layout-item md-size-20">
                            <md-field>
                                <label>hours</label>
                                <md-input v-model="schedule.interval_hours" type="number"></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-20">
                            <md-field>
                                <label>minutes</label>
                                <md-input v-model="schedule.interval_minutes" type="number"></md-input>
                            </md-field>
                        </div>
                        <div class="md-layout-item md-size-20">
                            <md-field>
                                <label>seconds</label>
                                <md-input v-model="schedule.interval_seconds" type="number"></md-input>
                            </md-field>
                        </div>
                    </div>
                </md-card-content>
            </md-card>
        </div>

        <div class="md-layout-item md-size-100">
            <div class="md-title">
                <br />
                <md-button class="md-raised md-primary" @click="saveSchedule()">save</md-button>
                <md-button class="md-raised md-accent" :disabled="!hasID()" @click="deleteSchedule()">delete</md-button>
                <md-button href="/">back</md-button>
            </div>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        {% if isinstance(id, str) %}
        id: "{{id}}",
        {% else %}
        id: null,
        {% end %}
        schedule: {},
        empty_schedule: {enabled: true, trigger: 'interval'}
    },
    mounted: function() {
        this.getSchedule(this.id);
    },
    computed: {
    },
    methods: {
        hasID: function() {
            return !(this.id === undefined || this.id === null || this.id === '');
        },
        getSchedule: function() {
            if (!this.hasID()) {
                this.schedule = this.empty_schedule;
                return;
            }
            self = this;
            var data = axios.get('/api/schedules/' + this.id).then(function(response) {
                self.schedule = response.data.schedule || self.empty_schedule;
            });
        },
        saveSchedule: function() {
            var data = this.schedule;
            if (this.hasID()) {
                axios.put('/api/schedules/' + this.id, data).then(function(response) {
                    window.location = '/';
                });
            } else {
                axios.post('/api/schedules', data).then(function(response) {
                    window.location = '/';
                    /* window.location = '/schedule.html?id=' + response.data.id; */
                });
            }
        },
        deleteSchedule: function() {
            if (!this.hasID()) {
                return;
            }
            axios.delete('/api/schedules/' + this.id).then(function(response) {
                window.location = '/';
            });
        }
    }
});

</script>
<style>

body {
    background-color: white;
    padding: 12px 20px 12px 20px;
}

.md-table {
    height: 80%;
}

.home-icon {
    margin-top: -6px;
}

.md-card-content {
    padding: 20px;
}

#trigger-card, #main-card {
    min-height: 350px;
}

</style>
{% end %}