{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout">
        <div class="md-layout-item" md-card>
            <md-table id="history-table" v-model="history">
                <md-table-toolbar>
                    <h1 class="md-title">History</h1>
                </md-table-toolbar>
                <md-table-row slot="md-table-row" slot-scope="{item}">
                    <md-table-cell>
                        (<a v-if="item.seq > 1" :href="'/diff.html?id=' + id + '&oldid=' + item.id + '&diff=' + lastid">cur</a><span v-if="item.seq == 1">cur</span> | <a :href="'/diff.html?id=' + id + '&diff=' + item.id">prev</a>)
                        <md-radio name="oldid" v-model="oldid" :value="item.id" v-if="item.seq > 1" :seq="item.seq"></md-radio><span id="placeholder" v-if="item.seq == 1"> ---- </span>
                        <md-radio name="diff" v-model="diff" :value="item.id" :seq="item.seq"></md-radio>
                    </md-table-cell>
                    <md-table-cell md-label="commit ID" md-sort-by="id">${ item.id }</md-table-cell>
                    <md-table-cell md-label="message" md-sort-by="message">${ item.message }</md-table-cell>
                    <md-table-cell md-label="changes" md-sort-by="message">+${ item.insertions || 0 },-${ item.deletions || 0 }</md-table-cell>
                </md-table-row>
            </md-table>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        history: [],
        oldid: null,
        diff: null,
        lasstid: 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/history/' + this.id).then(function(response) {
                console.log(response);
                self.history = response.data.history;
                self.lastid = response.data.lastid;
            });
        }
    }
});

</script>
<style>

body {
    background-color: white;
}

.md-table {
    width: 60%;
    min-height: 800px;
    max-height: 800px;
}

</style>
{% end %}