<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="main">
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/app_info.css" />

    <!-- dataTables -->
    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" />
    <!-- Select2 -->
    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/select2/dist/css/select2.min.css"  />
</head>
<body>
<th:block layout:fragment="sidebar">
    <li>
        <a th:href="'/final_reports?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
            <i class="fa fa-calendar-check-o"></i>
            <span>预交付报告</span>
        </a>
    </li>
    <li class="treeview">
        <a href="#">
            <i class="fa fa-list"></i>
            <span>Reports</span>
            <span class="pull-right-container">
			<i class="fa fa-angle-left pull-right"></i>
		</span>
        </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <i class="fa fa-circle-o"></i>
                    <span>全部报告</span>
                    <span class="badge pull-right all-number" th:text="${task.numOfTotalBug}">199</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-check-circle-o text-success"></i>
                    <span>已审核报告</span>
                    <span class="badge badge-success pull-right assigned-number" th:text="${task.numOfTotalBug - task.numOfUndeal}">50</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-clock-o text-danger"></i>
                    <span>未审核报告</span>
                    <span class="badge badge-danger pull-right unassign-number" th:text="${task.numOfUndeal}">149</span>
                </a>
            </li>
        </ul>
    </li>
</th:block>

<th:block layout:fragment="maincontent">
    <section class="content-header">
        <h1>Dashboard<small th:text="${task.name}">{{ app.name }}</small></h1>

        <ol class="breadcrumb">
            <li>
                <a href="/home">
                    <i class="fa fa-dashboard"></i>
                    全部任务
                </a>
            </li>
            <li class="active" th:text="|${task.name} Dashboard|">
            </li>
        </ol>
    </section>

    <section class="content container-fluid">
        <!-- Today Summary -->
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box bg-aqua all">
				<span class="info-box-icon">
				</span>
                    <div class="info-box-content">
                        <span class="info-box-text">全部报告</span>
                        <span class="info-box-number" th:text="${task.numOfTotalBug}">{{ count_all }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box bg-green assigned">
				<span class="info-box-icon">
				</span>
                    <div class="info-box-content">
                        <span class="info-box-text">已审核</span>
                        <span class="info-box-number">
						<b th:text="${task.numOfTotalBug - task.numOfUndeal}">{{ count_assigned }} </b>
						(<span th:text="${#numbers.formatDecimal((1 - task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100, 1, 0)}">40</span>%)
					</span>

                        <!-- Progress Bar -->
                        <div class="progress">
                            <div class="progress-bar" th:style="'width: '+${(1 - task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100}+'%;'"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="info-box bg-red unassign">
				<span class="info-box-icon">
				</span>
                    <div class="info-box-content">
                        <span class="info-box-text">未审核</span>
                        <span class="info-box-number">
						<b th:text="${task.numOfUndeal}"></b>
						(<span class="" th:text="${#numbers.formatDecimal((task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100, 1, 0)}"></span>%)
					</span>

                        <!-- Progress Bar -->
                        <div class="progress">
                            <div class="progress-bar" th:style="'width: '+${(task.numOfUndeal * 1.0 / task.numOfTotalBug) * 100}+'%;'"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- Report List Table -->
        <div class="assign-div pull-right">
            <button th:if="${!aggregated}" id="assign-btn" class="btn btn-sm btn-assign pull-right">
                <i class="fa fa-coffee" style="margin-right: 3px;"></i>
                <span>自动融合</span>
            </button>
            <a th:if="${aggregated}" id="agg-view" class="btn btn-sm btn-assign pull-right" th:href="'/agg_report_list?examId=' + ${examId} + '&amp;caseId=' + ${caseId}">
                <i class="fa fa-eye" style="margin-right: 3px;"></i>
                <span>聚合视图</span>
            </a>
            <button  id="deliver-btn" class="btn btn-sm btn-assign pull-right">
                <i class="fa fa-coffee" style="margin-right: 3px;"></i>
                <span>全部交付</span>
            </button>
        </div>
        <table id="report-list" class="table table-striped table-bordered" cellpadding="0" width="100%">
            <thead>
            <tr>
                <th>ID</th>
                <th>可复现程度</th>
                <th>分类</th>
                <th>严重程度</th>
                <th>描述</th>
                <!-- <th>Aggregated Report</th> -->
                <th>审核状态</th>
                <th>审核人</th>
                <th>所属聚合报告</th>
            </tr>
            </thead>
            <tbody>
            <th:block th:each="report : ${allReports}">

                <tr th:class="|row-${report.id}|">
                    <td class="report-id" th:value="${report.id}" th:text="|ML-${report.id.substring(10)}|"></td>
                    <td>
                        <span th:text="${recurrent2String.get(report.recurrent)}"></span>
                    </td>
                    <td>
                        <!--<i class="fa fa-square" style="color: {{ report.print_bug_category_color  }};"></i>-->
                        <span th:text="${report.bugCategory}"></span>
                    </td>
                    <td>
                        <img th:alt="|${severity2String.get(report.severity)} Image|" height="14" th:src="'/static/images/icons/priorities/' + ${report.severity} + '.png'" />
                        <span th:text="${severity2String.get(report.severity)}"></span>
                    </td>
                    <td style="width: 300px;">
                        <div th:id="'ab-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#full-content-' + ${report.id}" class="trunc collapse in" th:text="${report.description}">
                        </div>
                        <div th:id="'full-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#ab-content-' + ${report.id}" class="full-content collapse">
                            <span th:text="${report.description}"></span>
                            <br/>
                            <!--<img class="my-img-thumbnail pointer" th:src="${imgUrl}"-->
                                 <!--th:each="imgUrl,iterStat : ${report.getImgUrls()}"-->
                                 <!--th:onclick="'javascript:showimage(\''+${imgUrl}+'\');'"/>-->

                        </div>
                    </td>
                    <td>
                        <label class="label label-warning" th:if="${report.status == 0}">待审核</label>
                        <label class="label label-success" th:if="${report.status == 1}">已审核</label>
                    </td>

                    <td class="report-assignee">
                        <span th:if="${report.reviewerId != null}" th:text="${reviewMap.get(report.reviewerId)}"></span>
                    </td>
                    <td class="report-aggregator">
                        <span th:if="${!aggregated}">暂无</span>
                        <a th:if="${aggregated}" th:text="|ML-AG-${report.masterId.substring(10)}|" th:href="'/report?masterId='+${report.masterId}+'&amp;examId='+${examId}+'&amp;caseId='+${caseId}"></a>
                    </td>
                </tr>
            </th:block>
            </tbody>
        </table>
    </section>

    <!-- section howModal -->
    <div id="howModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #3c8dbc;">
                    <span style="color: #fff;" class="pull-left"><b>How does system aggregate report <span id="reportId"></span> to <span id="aggReportId"></span>?</b></span>
                    <button class="close pull-right" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <img src="" class="img-responsive" />
                </div>
            </div>
        </div>
    </div>
</th:block>

</body>
</html>

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" style="display: inline-block; width: 300px;">
        <div class="modal-content">
            <img id="imgInModalID"
                 class="carousel-inner img-responsive img-rounded"
                 onclick="closeImageViewer()"
                 onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
                 onmouseout="this.style.cursor='default'"
            />
        </div>
    </div>
</div>
<script src="/static/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/static/AdminLTE/bower_components/select2/dist/js/select2.min.js"></script>

<script src="/static/js/app_info.js"></script>