<div>
    <br />
    <table width="100%" border="0" cellpadding="10px" >
        <thead>
        <tr>
            <th style="width: 39%;text-align: left;">Category & Name</th>
            <th style="width: 16%;text-align: center;">Severity level</th>
            <th style="width: 21%;text-align: center;">Compliance score</th>
            <th style="width: 24%;text-align: center;">Passing / All</th>
        </tr>
        </thead>
    <?php foreach ($savedConditions as $category => $conditions) { ?>
            <tbody>
            <tr style="background-color: #e6e9f3; opacity: 0.6; height: 30px;">
                <td style="text-align: left;"><h5 style="color: #0B132A; font-size: 12px; font-weight: bold;"><?= htmlspecialchars($category) ?></h5></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <?php foreach ($conditions as $condition) { ?>
                <tr>
                    <td style="width: 39%; text-align: left;"><?= htmlspecialchars($condition['name']) ?></td>
                    <td style="width: 16%; text-align: center;"><?= htmlspecialchars($condition['severity']) ?></td>
                    <td style="width: 21%; text-align: center">
                        <span class="<?= getComplianceColor($condition['score']) ?>">
                            &nbsp;<?= $condition['score'] ?>%&nbsp;
                        </span>
                    </td>
                    <td style="width: 24%; text-align: center;">
                        <span><?= $condition['pass'] ?> / <?= $condition['total'] ?>
                            (<a href="<?= site_url("reports/open_rule_report/all/{$condition['id']}/$reportId")  ?>"
                                target="_blank" style="text-decoration: none; color: #1F83E7;" >Details</a>)
                        </span>
                    </td>
                </tr>
            <?php } ?>
            </tbody>
    <?php } ?>
    </table>
</div>

<style>

    th {
        font-weight: 500;
        font-size: 11px;
        line-height: 15px;
        text-align: left;
        color: #767676;
    }

    td {
        color: #0B132A;
        font-weight: 500;
        font-size: 12px;
    }


    .red {
        background-color: #D74936;
        color: #fff;
        text-align: center;
    }

    .orange {
        background-color: #f89406;
        color: #fff;
        text-align: center;
    }

    .green {
        background-color: #079649;
        color: #fff;
        text-align: center;
    }
</style>
