{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout">
        <div class="md-layout-item">
            <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} diff
                    </div>
                </md-card-header>

                <md-card-content id="diffpanel-container">
                    <div id="diffpanel"></div>
                </md-card-content>
            </md-card>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        schedule: {},
        history: [],
        difftext: '',
        id: "{{id}}",
        {% try %}
          {% if diff %}
        diff: "{{diff}}",
          {% end %}
        {% except %}
        diff: null,
        {% end %}
        {% try %}
          {% if oldid %}
        oldid: "{{oldid}}",
          {% end %}
        {% except %}
        oldid: null,
        {% end %}
    },
    mounted: function() {
        this.getDiff();
    },
    methods: {
        getDiff: function() {
            self = this;
            var data = axios.get('/api/diff/' + this.id + '/' + this.diff + '/' + (this.oldid || '')).then(function(response) {
                self.schedule = response.data.schedule;
                self.difftext = response.data.diff;
                var current_size = document.getElementById('diffpanel').offsetWidth;
                var pretty_diff = Diff2Html.getPrettyHtml(self.difftext, {showFiles: true, matching: 'none'});
                document.getElementById('diffpanel').innerHTML = pretty_diff;
                document.getElementById('diffpanel').style['max-width'] = (current_size - 20) + 'px';
            });
        }
    }
});

</script>
<style>

body {
    background-color: white;
    padding: 6px;
}

.md-table {
    height: 80%;
}

</style>
{% end %}