{% extends "iconolab_base.html" %}


{% block content %}

		<div id="compareApp">
			<p>I'm here </p>
			<diffviewer ref="diffviewer"></diffviewer>
			<a @click="showTextDiff">Show Text diff</a>|<a @click="showTagDiff">Tag</a>|<a @click="showFragmentDiff">Fragment diff</a>
		</div>

	</div>
{% endblock %}

{% block footer_js %}
	<script>
		new Vue({
			el: "#compareApp",
			components: { "diffviewer": iconolab.VueComponents.DiffViewer },
			
			mounted () {
			},

			methods: {

				showFragmentDiff: function () {
					this.$refs.diffviewer.showFragmentDiff();
					this.$refs.diffviewer.show();
				},
				
				showTextDiff: function () {
					this.$refs.diffviewer.showTextDiff();
					this.$refs.diffviewer.show();
				},

				showTagDiff: function () {
					this.$refs.diffviewer.showTagDiff();
					this.$refs.diffviewer.show();
				}
			}
		});	
	</script>
{% endblock %}