{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout">
        <div class="md-layout-item" md-card>
            <md-card id="main-card">
                <md-card-header>
                    <div class="md-title">
                        <md-button href="/" class="md-icon-button md-primary">
                            <md-icon>home</md-icon>
                        </md-button>
                        Diffido - ${schedule && schedule.title} history
                    </div>
                </md-card-header>
                
                <md-card-content>
                    <md-table id="history-table" v-model="filtered_history">
                        <md-table-toolbar>
                            <md-switch v-model="show_empty" @change="toggleShowEmpty">show entries with no changes</md-switch>
                            <br />
                            <md-button class="md-button md-primary" @click="compareSelected()" :disabled="!(oldid && diff)">
                                Compare selected revisions
                            </md-button>
                        </md-table-toolbar>
                        <md-table-row slot="md-table-row" slot-scope="{item}">
                            <md-table-cell>
                                <div class="md-layout md-alignment-center-center">
                                    <div class="md-layout-item">
                                        (<a v-if="item.seq > 1" :href="'/diff.html?id=' + id + '&oldid=' + item.id + '&diff=' + last_id">cur</a><span v-if="item.seq == 1">cur</span>&nbsp;|&nbsp;<a :href="'/diff.html?id=' + id + '&diff=' + item.id">prev</a>)&nbsp;
                                    </div>
                                    <div class="md-layout-item">
                                        <md-radio name="oldid" v-model="oldid" :value="item.id" v-if="item.seq > 1" :seq="item.seq"></md-radio><span class="placeholder" v-if="item.seq == 1"></span>
                                    </div>
                                    <div class="md-layout-item">
                                        <md-radio name="diff" v-model="diff" :value="item.id" :seq="item.seq"></md-radio>
                                    </div>
                                </div>
                            </md-table-cell>
                            <md-table-cell md-label="info" md-sort-by="id">
                                Commit: <strong>${ prettifyCommitID(item) }</strong>
                                <md-tooltip md-direction="bottom">${ item.id }</md-tooltip>
                                <br />
                                Changes: +${ item.insertions || 0 },-${ item.deletions || 0 }
                            </md-table-cell>
                            <md-table-cell md-label="date" md-sort-by="date">${ prettifyDate(item.message) }</md-table-cell>
                        </md-table-row>
                    </md-table>
                </md-card-content>
            </md-card>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        show_empty: false,
        schedule: {},
        history: [],
        filtered_history: [],
        oldid: null,
        diff: null,
        last_id: null,
        {% if isinstance(id, str) %}
        id: "{{id}}",
        {% else %}
        id: null,
        {% end %}
    },
    mounted: function() {
        this.getHistory();
    },
    methods: {
        getHistory: function() {
            self = this;
            var data = axios.get('/api/schedules/' + this.id + '/history').then(function(response) {
                self.history = response.data.history;
                self.updateFilter();
                self.schedule = response.data.schedule;
                self.last_id = response.data.last_id;
            });
        },
        prettifyCommitID: function(item) {
            var cid = item.id || '';
            return cid.substring(0, 7);
        },
        prettifyDate: function(date) {
            if (!date) {
                return '';
            }
            return date.substring(0, date.indexOf('.'));
        },
        updateFilter: function() {
            if (this.show_empty) {
                this.filtered_history = this.history;
                return;
            }
            self = this;
            this.filtered_history = _.filter(self.history, 'changes');
        },
        toggleShowEmpty: function() {
            this.updateFilter();
        },
        compareSelected: function() {
            if (!(this.oldid && this.diff)) {
                return;
            }
            window.location = '/diff.html?id=' + this.id + '&oldid=' + this.oldid + '&diff=' + this.diff;
        }
    }
});

</script>
{% end %}

{% block style %}

.placeholder {
    width: 36px;
    display: inline-block;
}

{% end %}