<html>
<head>
    <title>ReportTask Reports</title>
    <style type="text/css">
        .tab-wrapper>input {
            display: block;
            position: absolute;
            left: -100%; /* hide element outside of view port */
        }

        .tab-wrapper>ul {
            position: relative;
            z-index: 999;
            list-style: none;
            display: flex;
        }

        .tab-wrapper>ul label,
        .tab-wrapper>div {
            border: 1px solid #000000;
        }

        .tab-wrapper>ul label {
            display: inline-block;
            padding: 5px 10px;
            background: #ffffff;
            border-right-width: 0;
        }

        .tab-wrapper>ul li:first-child label {
            border-radius: 0 0 0 0;
        }

        .tab-wrapper>ul li:last-child label {
            border-right-width: 1px;
            border-radius: 0 0 0 0;
        }

        .tab-wrapper>div {
            position: relative;
            background: #ffffff;
        }

        {% for i in range(tabCount) %}.tab-wrapper>input:nth-child({{loop.index1}}):focus~ul li:nth-child({{loop.index1}}) label{%if not loop.is_last %},{% endif %}{% endfor %}
        {
            text-decoration: underline;
        }

        {% for i in range(tabCount) %}.tab-wrapper>input:nth-child({{loop.index1}}):checked~ul li:nth-child({{loop.index1}}) label{%if not loop.is_last %},{% endif %}{% endfor %}
        {
            background: #ebebeb;
            border-bottom-color: #ffffff;
        }

        .tab-wrapper>div>section {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .tab-wrapper>div>section {
            padding: 5px 5px 0;
        }

        {% for i in range(tabCount) %}.tab-wrapper>input:nth-child({{loop.index1}}):checked~div>section:nth-child({{loop.index1}}){%if not loop.is_last %},{% endif %}{% endfor %}
        {
            position: Static;
        }

        /* no padding/margin below tabbed content header */
        .no-margin{
            margin: 0;
            padding: 0;
        }

        .content {
            flex: 1 0 auto;
            margin: 0 auto;
            padding: 5px;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ffffff;
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: normal;
            justify-content: normal;
            overflow: hidden;
        }

        .table-wrapper {
            background-color: #ffffff;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
        }

        .table-entity {
            width: 100%;
            height: 100%;
            max-height: 100%;
            overflow: auto;
            box-sizing: border-box;
        }

        .table-entity .table-radio {
            display: none;
        }

        .table-entity .table-radio:checked+.table-display {
            display: block;
        }

        .table-entity .table-radio:checked+.table-display+table {
            width: 100%;
            display: table;
        }

        .table-entity .table-radio:checked+.table-display+table+.pagination {
            display: flex;
        }

        .table-entity .table-radio:checked+.table-display+table+.pagination>label.active {
            color: #ffffff;
            background-color: #337ab7;
            cursor: default;
        }

        .table-entity .table-radio:checked+.table-display+table+.pagination>label.disabled {
            color: #337ab7;
            background-color: #ffffff;
            cursor: default;
        }

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

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

        .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;
            position: sticky;
            top: 0;
            max-width: 450px;
        }

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

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

        .table-entity table tbody tr:hover {
            background-color: #ebebeb;
        }

        .table-entity .pagination {
            background-color: #ffffff;
            width: 100%;
            display: none;
            position: sticky;
            bottom: 0;
            left: 0;
        }

        .table-entity .pagination>label {
            background-color: #ffffff;
            color: #337ab7;
            padding: 5px;
            cursor: pointer;
        }

        .table-entity .pagination>label:hover {
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="tab-wrapper">
            {% for pipeline in pipelineReports %}
                {% for job in pipeline.jobReports %}
                    <input type="radio" name="pipelinetabs" id="{{job.jobId}}" hidden aria-hidden="true" {% if loop.is_first and loop.parent.is_first %}checked{% endif %}>
                {% endfor %}
            {% endfor %}
            <ul class="no-margin" hidden aria-hidden="true">
            {% for pipeline in pipelineReports %}
                {% for job in pipeline.jobReports %}
                    <li><label for="{{job.jobId}}">{{pipeline.pipelineId}} ({{job.started}})</label></li>
                {% endfor %}
            {% endfor %}
            </ul>
            <div>
            {% for pipeline in pipelineReports %}
                {% for job in pipeline.jobReports %}
                    <section>
                        <div class="table-wrapper">
                            <div class="table-entity">
                                {% for pageReports in job.reportItemsPages %}
                                    <input class="table-radio" type="radio" name="table_{{job.jobId}}" id="table_{{job.jobId}}_{{loop.index}}" {% if loop.is_first %}checked="checked" {% endif %}/>
                                    <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 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 %}
                                        </tbody>
                                    </table>
                                    <div class="pagination">
                                    {% if pageReports.pageCount < 30 %}
                                        {% for pageIdx in range(pageReports.pageCount) %}
                                            <label{% if loop.index == loop.parent.index %} class="active"{% endif %} for="table_{{job.jobId}}_{{pageIdx}}" id="table_page_tab_{{job.jobId}}_{{pageIdx}}">{{loop.index1}}</label>
                                        {% endfor %}
                                    {% else %}
                                    {% set minPageC = int(paginationMin(loop.index)) %}
                                    {% set maxPageC = int(paginationMax(loop.index, pageReports.pageCount)) %}
                                    {% if minPageC != 0 %}<label for="table_{{job.jobId}}_0" id="table_page_tab_{{job.jobId}}_0">1</label><label id="spacer">...</label>{% endif %}
                                    {% for pageIdx in range(20) %}
                                    {% set currentIdx = int(paginationCurrent(pageIdx, minPageC)) %}
                                    {% if currentIdx < maxPageC %}<label{% if currentIdx == loop.parent.index %} class="active"{% endif %} for="table_{{job.jobId}}_{{currentIdx}}" id="table_page_tab_{{job.jobId}}_{{currentIdx}}">{% set currentVis = paginationCurrent(currentIdx, 1) %}{{currentVis}}</label>{% endif %}
                                    {% endfor %}
                                    {% if maxPageC != pageReports.pageCount %}<label id="spacer">...</label>{% set lastPageIdx = int(paginationCurrent(pageReports.pageCount, -1)) %}</label><label for="table_{{job.jobId}}_{{lastPageIdx}}" id="table_page_tab_{{job.jobId}}_{{lastPageIdx}}">{{pageReports.pageCount}}</label>{% endif %}
                                    {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </section>
                {% endfor %}
            {% endfor %}
            </div>
        </div>
    </div>
</body>
</html>