<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト実行画面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            padding: 20px;
        }

        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
            color: #333;
        }

        /* 交互に色を変える */
        .even-row {
            background-color: #e9f7ef; /* ライトグリーン */
        }

        .odd-row {
            background-color: #fdfdfe; /* ライトブルー */
        }

        .ok {
            color: green;
            font-weight: bold;
        }

        .ng {
            color: red;
            font-weight: bold;
        }

        .execute-btn {
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .execute-btn:hover {
            background-color: #0056b3;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        /* ホスト名を右下に配置し、わかりづらくする */
        .hostname {
            bottom: 10px;
            left: 5%;
            opacity: 0.2; /* 半透明にする */
            font-size: 12px; /* 小さくする */
            color: #666; /* やや目立たない色にする */
        }
    </style>
</head>
<body>
<h1>フォームバリデーションテスト</h1>
<table>
    <thead>
    <tr>
        <th>難易度</th>
        <th>事項項目</th>
        <th>テスト内容</th>
        <th>テストケース</th>
        <th>結果</th>
        <th>実行</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="testResult, iterStat : ${testResults}"
        th:class="${iterStat.index % 2 == 0 ? 'even-row' : 'odd-row'}">
        <td th:text="${testResult.level}"></td>
        <td th:text="${testResult.itemName}"></td>
        <td th:text="${testResult.testContent}"></td>
        <td th:text="${testResult.testCase}"></td>
        <td th:text="${testResult.result}" th:classappend="${testResult.result == 'OK' ? 'ok' : 'ng'}">
            <p class="hostname"><span th:text="${hostName}"></span></p>
        </td>
        <td>
            <form th:action="@{/}" method="post">
                <input type="hidden" name="fieldName" th:value="${testResult.fieldName}"/>
                <button type="submit" class="execute-btn">実行</button>
            </form>
        </td>

    </tr>
    </tbody>
</table>


</body>
</html>
