<html>
<head>
    <title>ReportTask Reports</title>
    <style>
        /* no padding/margin below tabbed content header */
        .no-margin{
            margin: 0;
            padding: 0;
        }

        .content {
            margin: 0 auto;
            padding: 5px;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ffffff;
            width: 90%;
        }

        .table-wrapper {
            background-color: #ffffff;
        }

        .table-entity {
            width: 100%;
        }

        .table-entity .table-display {
            background-color: #ffffff;
            text-align: right;
            padding: 5px;
            left: 0;
        }

        .table-entity table {
            background-color: #ffffff;
            font-size: 16px;
            border-collapse: collapse;
        }

        .table-entity table tr:last-child td {
            border-bottom: 0;
        }

        .table-entity table tr th,
        .table-entity table tr td {
            text-align: left;
            padding: 5px;
            box-sizing: border-box;
        }

        .table-entity table tr th {
            color: #000000;
            font-weight: normal;
            background-color: #ffffff;
            border-bottom: solid 2px #d8d8d8;
            top: 0;
        }

        .table-entity table tr td {
            border: solid 1px #ddd;
            border-left: 0;
            border-right: 0;
            overflow-wrap: anywhere;
        }

        .table-entity table tbody tr:nth-child(2n) {
            background-color: #f5f5f5;
        }

        .table-entity table tbody tr:hover {
            background-color: #ebebeb;
        }
    </style>
</head>

<body>
    <p>
        Dear Sir or Madam,
        <br>
        New Reports have been generated and can be viewed in the table(s) below.
        <br><br>
        This is an auto generated email.
        <br><br>
    </p>
    <div class="content">
        <div>
        {% for pipeline in pipelineReports %}
            {% for job in pipeline.jobReports %}
                <div class="table-wrapper">
                <label for="{{job.jobId}}">{{pipeline.pipelineId}} ({{job.started}})</label>
                <div class="table-entity">
                    <div class="table-display"></div>
                    <table>
                        <thead>
                            <tr>
                                <th>CauseID</th>
                                <th>Status</th>
                                <th>Name</th>
                                <th>Details</th>
                                <th>Time</th>
                                <th>Host</th>
                                <th>Retryable</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pageReports in job.reportItemsPages %}
                            {% for reportItem in pageReports.reportItems %}
                                <tr>
                                    <td>{{reportItem.causeId}}</td>
                                    <td>{{reportItem.status}}</td>
                                    <td>{{reportItem.displayName}}</td>
                                    <td>{{reportItem.errorInfo}}</td>
                                    <td>{{reportItem.timestamp}}</td>
                                    <td>{{reportItem.host}}</td>
                                    <td>{{reportItem.retryable}}</td>
                                </tr>
                            {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <p><br><br></p>
        <p><br><br></p>
        {% endfor %}
        {% endfor %}
    </div>
</body>
</html>