<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<ul class="list-group" style="max-width: 331px;">
	<li class="list-group-item" style="background-color: rgb(25, 149, 207); color: white;">
		<b th:text="|Sup-${supId}|"></b>
	</li>
	<!-- <li class="list-group-item">
		<b>Type:    </b>
		<label class="label" style="background-color: rgb(3, 64, 178);">
			<span class="glyphicon glyphicon-duplicate" style="margin-right: 5px;"></span>
			Supplementary
		</label>
	</li> -->
	<li class="list-group-item">
		<!-- <b>Content: </b><br> -->
		<ul class="list-group sup-list row" style="max-width: 290px;">
            <th:block th:each="report : ${supplement.bugs}">

                <li class="list-group-item">
                    <span class="glyphicon glyphicon-file" style="color: rgb(244, 172, 7); margin-right: 5px;"></span>
                    <a href="#" style="color: #F4AC07;" th:text="${report.id}"></a>
                    <br />

                    <!-- description -->

                    <th:block th:each="sent, iterStat : ${report.taggedSentences}">


                        <span th:if="${sent.isDiff()}" th:text="${sent.sentence}" style="color: red; font-weight: bold;"></span>
                        <span th:unless="${sent.isDiff()}" th:text="${sent.sentence}"></span>
                    </th:block>

                    <br/>

                    <!-- imgs -->
                    <th:block th:each="img, iterStat : ${report.taggedImgs}">

                        <img th:if="${img.isDiff()}" class="my-img-thumbnail pointer" style="border: 2px solid red;"
                             th:src="${img.imgUrl}" th:onclick="'javascript:showimage(\''+${img.imgUrl}+'\');'"/>
                        <img th:unless="${img.isDiff()}" class="my-img-thumbnail pointer"
                             th:src="${img.imgUrl}" th:onclick="'javascript:showimage(\''+${img.imgUrl}+'\');'"/>
                    </th:block>

                </li>
            </th:block>
		</ul>
	</li>
</ul>
</html>