<meta name="viewport" content="width=device-width,length=device-length, initial-scale=1">
<div class="row" style="margin-top: 100px; margin-bottom: 200px">
    <div class="column popup" onclick="openPopup('fireForm')">
        <div class="card" style="border-radius: 50%; opacity: 0.8; " [style.border]="fireForms.length > 10 ? '15px solid red' : fireForms.length > 0 ? '15px solid blue' : '15px solid greenyellow'">
            <div style="margin: auto">
                <h2>Fire Isolations</h2>
                <h4>{{fireForms.length}}</h4>
            </div>
        </div>
    </div>

    <div id="dd" class="column popup" onclick="openPopup('hotWorkPopup')">
        <div class="card" style="border-radius: 50%; opacity: 0.8; border: 15px solid greenyellow;">
            <div style="margin: auto">
                <h2>Hot Work Permits</h2>
                <h4>{{hotWorkPermits.length}}</h4>
            </div>
        </div>
    </div>

    <div class="column popup" onclick="openPopup('newForms')">
        <div class="card" style="border-radius: 50%; opacity: 0.8;" [style.border]="newForms.length > 0 ? '15px solid red' : '15px solid greenyellow'">
            <div style="margin: auto">
                <h2>New Fire Isolations</h2>
                <h4>{{newForms.length}}</h4>
            </div>
        </div>
    </div>

    <div class="column popup" onclick="openPopup('toBeReinstated')">
        <div class="card" style="border-radius: 50%; opacity: 0.8; border: 15px solid greenyellow;">
            <div style="margin: auto">
                <h2>Reinstated</h2>
                <h4>{{toBeReinstated.length}}</h4>
            </div>
        </div>
    </div>

</div>


<div class="popup" >
<div class="popuptext" id="fireForm">
    <a routerLink="/login" class="btn btn-link">close</a>
    <table id="customers">
        <tr>
            <th>Employee Name</th>
            <th>Hospital Name</th>
            <th>Site Name</th>
            <th>Level</th>
            <th>Fire System</th>
            <th>Shutdown Date</th>
            <th>Reinstated</th>
            <th>Reinstated Date</th>
            <th>Reason</th>
            <th>Comment</th>
            <th>HW Permit</th>
            <th>Action</th>
        </tr>
        <tr *ngFor="let fireForm of fireForms">
            <td>{{fireForm.employeeName}}</td>
            <td>{{fireForm.hospitalName}}</td>
            <td>{{fireForm.siteName}}</td>
            <td>{{fireForm.level}}</td>
            <td>{{fireForm.fireSystem}}</td>
            <td>{{fireForm.shutdownDate}}</td>
            <td>{{fireForm.reinstated}}</td>
            <td>{{fireForm.reinstatedDate}}</td>
            <td>{{fireForm.reason}}</td>
            <td>{{fireForm.comment}}</td>
            <td>{{fireForm.hotWorkPermits}}</td>
            <td><a (click)="loadForm(fireForm)" class="text-danger">open</a></td>
        </tr>
    </table>
</div>
</div>
<div class="popup" >
<div class="popuptext" id="hotWorkPopup">
    <a routerLink="/login" class="btn btn-link">close</a>
    <table id="hotWork">
        <tr>
            <th>Employee Name</th>
            <th>Hospital Name</th>
            <th>Site Name</th>
            <th>Level</th>
            <th>Fire System</th>
            <th>Shutdown Date</th>
            <th>Reinstated</th>
            <th>Reinstated Date</th>
            <th>Reason</th>
            <th>Comment</th>
        </tr>
        <tr *ngFor="let hotWork of hotWorkPermits">
            <td>{{hotWork.employeeName}}</td>
            <td>{{hotWork.hospitalName}}</td>
            <td>{{hotWork.siteName}}</td>
            <td>{{hotWork.level}}</td>
            <td>{{hotWork.fireSystem}}</td>
            <td>{{hotWork.shutdownDate}}</td>
            <td>{{hotWork.reinstated}}</td>
            <td>{{hotWork.reinstatedDate}}</td>
            <td>{{hotWork.reason}}</td>
            <td>{{hotWork.comment}}</td>
        </tr>
    </table>
</div>
</div>
<div class="popup" >
    <div class="popuptext" id="newForms">
        <a routerLink="/login" class="btn btn-link">close</a>
        <table id="newFormst">
            <tr>
                <th>Employee Name</th>
                <th>Hospital Name</th>
                <th>Site Name</th>
                <th>Level</th>
                <th>Fire System</th>
                <th>Shutdown Date</th>
                <th>Reinstated</th>
                <th>Reinstated Date</th>
                <th>Reason</th>
                <th>Comment</th>
                <th>Open</th>
                <th>Approve</th>
                <th>Disapprove</th>
            </tr>
            <tr *ngFor="let nForm of newForms">
                <td>{{nForm.employeeName}}</td>
                <td>{{nForm.hospitalName}}</td>
                <td>{{nForm.siteName}}</td>
                <td>{{nForm.level}}</td>
                <td>{{nForm.fireSystem}}</td>
                <td>{{nForm.shutdownDate}}</td>
                <td>{{nForm.reinstated}}</td>
                <td>{{nForm.reinstatedDate}}</td>
                <td>{{nForm.reason}}</td>
                <td>{{nForm.comment}}</td>
                <td><a (click)="loadForm(nForm)" class="text-danger">open</a></td>
                <td><a (click)="approve(nForm, true)" class="text-danger">Approve</a></td>
                <td><a (click)="approve(nForm, false)" class="text-danger">Disapprove</a></td>
            </tr>
        </table>
    </div>
</div>
<div class="popup" >
    <div class="popuptext" id="toBeReinstated">
        <a routerLink="/login" class="btn btn-link">close</a>
        <table id="toBeReinstatedt">
            <tr>
                <th>Employee Name</th>
                <th>Hospital Name</th>
                <th>Site Name</th>
                <th>Level</th>
                <th>Fire System</th>
                <th>Shutdown Date</th>
                <th>Reinstated</th>
                <th>Reinstated Date</th>
                <th>Reason</th>
                <th>Comment</th>
                <th>Open</th>
                <th>Approve</th>
            </tr>
            <tr *ngFor="let tBr of toBeReinstated">
                <td>{{tBr.employeeName}}</td>
                <td>{{tBr.hospitalName}}</td>
                <td>{{tBr.siteName}}</td>
                <td>{{tBr.level}}</td>
                <td>{{tBr.fireSystem}}</td>
                <td>{{tBr.shutdownDate}}</td>
                <td>{{tBr.reinstated}}</td>
                <td>{{tBr.reinstatedDate}}</td>
                <td>{{tBr.reason}}</td>
                <td>{{tBr.comment}}</td>
                <td><a (click)="loadForm(tBr)" class="text-danger">open</a></td>
                <td><a (click)="reinstatedForm(tBr)" class="text-danger">Reinstated</a></td>
            </tr>
        </table>
    </div>
</div>



