<style id="idMFOTM_slipStyle">
    .selectedEntry {
        width: 576px;
        height: fit-content;
        border: 1px solid black;
        margin: 5px;
        position: relative;
    }

    #idMTardySlip {
        width: 100%;
        font-size: 10pt;
    }

    .selectedEntry td {
        padding-top: 3px;
        padding-left: 10px;
        padding-right: 25px;
        white-space: nowrap;
    }

    #idMTardySlip tr:first-child td {
        padding-top: 25px;
    }

    #idMTardySlip tr td:first-child {
        width: 130px;
        padding-left: 28px;
    }

    #idMTardySlip tr:last-child td {
        padding-bottom: 28px;
    }

    .idMLogoImage {
        position: absolute; 
        width: 85pt;
        height: 85pt;
        top: 10pt;
        left: 310pt;
    }

    .selectedEntry .bold {
        font-weight: bold;
    }
</style>

<div id="idMFOTMDialogHolder" class="hide">
    <div id="viewTardySlip" data-pss-message-prefixes="psx.htmlc.idmFOTM">
        <div data-ng-repeat="selectedEntry in ctrlData.selectedEntries" class="selectedEntry">
            <div data-ng-bind-html="ctrlData.args.logoHTML"></div>
            <table id="idMTardySlip">
                <tr>
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_hall_pass'|translate}}</td>
                    <td>{{'psx.htmlc.idmFOTM.slip_date'|translate}}: {{selectedEntry.scanDate}} {{selectedEntry.scanTime}}</td>
                </tr>
                <tr>
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_name'|translate}}:</td>
                    <td>{{selectedEntry.lastfirst}}</td>
                </tr>
                <tr data-ng-if="selectedEntry.course_name != 'Daily' && ctrlData.args.shouldIncludeClass == '1'">
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_class'|translate}}:</td>
                    <td>{{selectedEntry.expression}} - {{selectedEntry.course_name}}</td>
                </tr>
                <tr data-ng-if="attType == 'Meeting' && ctrlData.args.shouldIncludeClass == '1' && selectedEntry.course_name == 'Daily'">
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_class'|translate}}:</td>
                    <td>{{selectedEntry.course_name}}</td>
                </tr>
                <tr data-ng-if="ctrlData.args.shouldIncludeAttCode == '1'">
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_code'|translate}}:</td>
                    <td style="white-space:normal;">{{selectedEntry.attCodeDetails.att_code}} - {{selectedEntry.attCodeDetails.description}}</td>
                </tr>
                <tr data-ng-if="ctrlData.args.shouldPrintComment == '1'">
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_status'|translate}}:</td>
                    <td>{{selectedEntry.attCodeDetails.codeCategories.join(", ")}}</td>
                </tr>
                <tr data-ng-if="ctrlData.args.shouldPrintComment == '1'">
                    <td colspan="2" style="white-space:wrap;">{{selectedEntry.att_comment}}</td>
                </tr>
                <tr data-ng-if="ctrlData.args.shouldIncludeTotalCount == '1' && selectedEntry.attCodeDetails.totalCountOnHallPass == '1'">
                    <td class="bold">{{'psx.htmlc.idmFOTM.slip_tardy_count'|translate}}:</td>
                    <td>
                        <span>{{selectedEntry.typeCount}} {{ctrlData.map.codeTypesInverted[selectedEntry.codeType]}}, {{selectedEntry.overallCount}} Overall</span>
                    </td>
                </tr>
                <tr data-ng-if=
                    "ctrlData.args.shouldIncludePreset == '1' && 
                    selectedEntry.attCodeDetails.presetCommentonHallPass == '1' && 
                    selectedEntry.typeCount <= ctrlData.args.tardyComments[selectedEntry.codeType].Maximum"
                >
                    <td colspan="2" style="white-space:normal;">{{ctrlData.args.tardyComments[selectedEntry.codeType][selectedEntry.typeCount]}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>