<div class="diff-viewer-wrapper col-md-12">
	<modalpanel ref="panel">
		<h5 slot="header">Comparer les deux versions:</h5>

		<div slot="content">
			<div ref="modalcontent">
				
				<div v-show="fragmentMode">
					<svg>

					 <image xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:href="imagePath" x="0" y="0" v-bind:width="imageWidth" v-bind:height="imageHeight"></image>

						<g v-bind:transform='matrixTransform'>
							<path v-bind:d="originalPath" fill="red" stroke="blue" opacity="0.3"></path>
							<path v-bind:d="modifiedPath" fill="blue" stroke="red" opacity="0.3"></path>
						</g>
					</svg>
				</div>
				
				<div v-show="textMode">
					<div v-html="diffText"></div>
				</div>
				
				<div v-show='tagMode'>
					<ul>
						<li v-for="(tag, index) in tags">
							
							<template v-if="!tag.action">
								<li>
									<span>{{ tag.tag_label }}</span> | précision : {{ tag.accuracy }} 
									- 
									pertinence : {{ tag.relevancy }}
								</li>
							</template>

							<template v-if="tag.action=='replace'">
								<del>--</del> <del>{{ tag.tag_label }}</del> a été remplacé par
								<ins>++</ins> <strong><ins>{{ tag.new_label }}</ins></strong> 
								fiabilité : <ins>{{ tag.new_accuracy }}</ins> - 
								pertinence: <ins>{{ tag.new_relevancy }}</ins>
							</template>

							<template v-if="tag.action=='add'">
								<li>
									<ins>++</ins> <ins>{{ tag.tag_label }}</ins>
									fiabilité : <ins>{{ tag.accuracy }}</ins> - 
									pertinence : <ins>{{ tag.relevancy }}</ins>
								</li>
							</template>

							<template v-if="tag.action=='del'">
								<li><del>--</del> <del>{{ tag.tag_label }}</del> a été effacé</li> 
							</template>

							<template v-if="tag.action=='update'">
								<li>	
									<strong>{{ tag.tag_label }}</strong> 
									<template v-if="tag.accuracy != tag.new_accuracy">
										fiabilité: <del>{{ tag.accuracy }}</del> <ins>{{ tag.new_accuracy }}</ins> -	
									</template>
									<template v-if="tag.accuracy == tag.new_accuracy">
										fiabilité: {{ tag.accuracy }} -
									</template>
									<template v-if="tag.relevancy != tag.new_relevancy">
										pertinence: <del>{{ tag.relevancy }}</del> <ins>{{ tag.new_relevancy }}</ins>
									</template>
									<template v-if="tag.relevancy == tag.new_relevancy">
										pertinence: {{ tag.relevancy }}	
									</template>
										
								</li>
							</template>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</modalpanel>
</div>