<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> 

								pertinence: <ins>{{ tag.new_relevancy }}</ins>

							</template>

							<template v-if="tag.action=='add'">

								<li>

									<ins>++</ins> <ins>{{ tag.tag_label }}</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">

									</template>

									<template v-if="tag.accuracy == tag.new_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>