@use('App\Enums\Attributes')
<div class="grade_key_table_content">
    <table class="grade-key-table">
        <thead>
            <tr>
                <th colspan="{{ $type == Attributes::GL_HIGH_SCHOOL ? '4' : '3' }}" class="grade-key-header">Academic
                    Grade Key</th>
            </tr>
            <tr>
                <th>Grade</th>
                <th>Percentage</th>
                <th>GPA</th>

                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <th>WGPA</th>
                @endif
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>90% - 100%</td>
                <td>4.0</td>
                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <td>5.0</td>
                @endif
            </tr>
            <tr>
                <td>B</td>
                <td>80% - 89%</td>
                <td>3.0</td>
                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <td>4.0</td>
                @endif
            </tr>
            <tr>
                <td>C</td>
                <td>80% - 79%</td>
                <td>2.0</td>
                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <td>3.0</td>
                @endif
            </tr>
            <tr>
                <td>D</td>
                <td>60% - 69%</td>
                <td>1.0</td>
                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <td>2.0</td>
                @endif
            </tr>
            <tr>
                <td>F</td>
                <td>0% - 59%</td>
                <td>0.0</td>
                @if ($type == Attributes::GL_HIGH_SCHOOL)
                    <td>0.0</td>
                @endif
            </tr>
        </tbody>
    </table>

    <div class="body-note">
        <p class="title">ACADEMIC GRADE KEY/CÓDIGO DE CALIFICACIÓN</p>
        <ul class="custom-list">
            <li><span class="grade">A - </span>Outstanding Progress/Progreso sobresaliente</li>
            <li><span class="grade">B - </span>Above Average Progress/Progreso que supera al promedio</li>
            <li><span class="grade">C - </span>Average Progress/Progreso promedio</li>
            <li><span class="grade">D - </span>Lowest Acceptable Progress/Progreso mínimo aceptable</li>
            <li><span class="grade">F - </span>Failure/Reprobado</li>
        </ul>
    </div>
</div>

<style>
    .grade_key_table_content{
        /* margin-top: 20px; */

    }
    .grade-key-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .grade-key-table th {
        border: 2px solid black;
        padding: 8px 12px;
        text-align: center;
        font-size: 13px;
        color: rgb(35, 50, 87);
    }

    .grade-key-table td {
        border: 2px solid black;
        padding: 8px 12px;
        text-align: center;
        font-size: 12px;
        color: rgb(85, 97, 128);
    }

    .grade-key-header {
        font-weight: bold;
        font-size: 13px;
        color: rgb(35, 50, 87);
        /* background-color: #f5f5f5; */
    }

    .grade-key-table th {
        font-weight: bold;
    }

    .grade-key-table tbody td {
        text-align: center;
    }

    .body-note {
        margin-top: 20px;
        font-size: 13px;
        padding-left: 10px;
        text-align: left;
    }

    .body-note p {
        text-align: left;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .body-note .title {
        color: rgb(35, 50, 87);
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    ul.custom-list {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
    }

    ul.custom-list li {
        font-size: 11px;
        line-height: 1.2;
        margin-bottom: 5px;
        font-weight: 10px;
        color: rgb(85, 97, 128);
    }

    ul.custom-list .grade {
        color: rgb(35, 50, 87);
        font-weight: bold;
        font-size: 13px;
        font-weight: 14px;
    }
</style>