<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <style>
            body {
                background-color:white;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
                padding-top: 2rem;
                margin-bottom: 300px;
            }      
            @media print {
                body {-webkit-print-color-adjust: exact;}
            }
            .first-field{
                font-weight: bold;
                color: rgb(73, 114, 219);
                width: 40%;
            }
            table {
                border-collapse: collapse;
                font-family: Tahoma, Geneva, sans-serif;
                border: none;
                box-shadow: 0 0 6px 6px rgb(236, 236, 236);
                width: 100%;
                margin: 0 0 50px 0;
            }
            table td {
                padding: 8px 20px 8px 30px;
            }
            table td a {
                color: rgb(81, 135, 222);
                text-decoration: none;
            }
            table thead { display: table-row-group; }
            table thead td {
                background-color: #ffffff;
                color: #3c3c3c;
                font-weight: bold;
                font-size: 20px;
                padding-left: 30px;
                border: 0.5px solid #e1e1e1;
            }
            table tbody td {
                color: #636363;
                font-size: 18px;
                width: 500px;
            }
            table tbody tr {
                background-color: #ffffff;
            }
            table tbody tr:nth-child(odd) {
                background-color: #ffffff;
            }
            .chip {
                display: inline-block;
                padding: 0 10px;
                height: 40px;
                font-size: 20px;
                line-height: 40px;
                border-radius: 25px;
                color: white;
            }
            .approved{
                background-color: #82dd87 !important;
            }
            .pending{
                background-color: #f2de79 !important;
            }
            .rejected{
                background-color: #dd8282 !important;
            }
            .step {
                background-color: rgb(216, 216, 216);
                position: relative; 
                margin-left: 30px;
                border-radius: 50%; 
                width: 70px; 
                height: 70px;
                line-height: 0px; 
                text-align: center; 
                z-index: 2;
                line-height: 70px;
                text-align: center;
                font-size: 35px;
                font-weight: bolder;
            }
            .step:first-child {margin-top: 500px;}
            .first-child:before {display: none;}
            .row {
                display: -webkit-box;
                display: flex;
                -webkit-box-pack: center;
                justify-content: center;
                padding-bottom: 20px;
                margin-bottom: 50px;
            }
            .row > div {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            .row > div:last-child {
                margin-right: 0;
            }
            .flow-table{
                width: auto;
                margin: 0 0 80px 120px;
            }
            .step-div{
                height: auto; 
                width: 50px; 
                padding: 0; 
                margin-top: 100px;
            }
            .number-steps{
                position: absolute; 
                text-align: center;
                font-size: 18px;
                margin-left: 15px;
                margin-top: 10px;
                display: flex;
                height: 100%;
                width: 100px;
            }
            html{ height: 0; }
    </style>
</head>
<body>
   {{#hasApproval}}
    <h1 style="text-transform: uppercase; text-align: center; font-weight: bolder; font-size: 30px; margin-bottom:40px; position: relative; top: 20px;"> {{stateOfApprovalWorkflow}} </h1>
    {{#approvalSteps}}
    <div class="row" style="{{divRowStyleValue}}">
        {{#first}}
            <div style="height: auto; width: 0px; padding: 0;">
            <h2 class="number-steps">{{totalSteps}} {{#manySteps}}{{upperSteps}}{{/manySteps}}{{#onlyOneStep}}{{upperStep}}{{/onlyOneStep}} {{onTotal}}</h2>
        </div>
        {{/first}}
        <div class="step-div">
            <div class="step">{{position}}</div>
        </div>
        <div>
            <table class="flow-table" style="justify-content: center;">
                <thead>
                    <tr>
                        <td>{{title}}</td>
                        <td><div class="chip {{#isPending}}pending{{/isPending}}{{#isApproved}}approved{{/isApproved}}{{#isRejected}}rejected{{/isRejected}}">{{#isPending}}{{pending}}{{/isPending}}{{#isApproved}}{{approved}}{{/isApproved}}{{#isRejected}}{{rejected}}{{/isRejected}}</div></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="first-field">{{agent}}:</td>
                        <td>{{#responsibleFullName}}{{responsibleFullName}}{{/responsibleFullName}}</td>
                    </tr>
                    <tr>
                        <td class="first-field">{{username}}:</td>
                        <td>{{#responsibleEmployeeInternalId}}{{responsibleEmployeeInternalId}}{{/responsibleEmployeeInternalId}}</td>
                    </tr>
                    <tr>
                        <td class="first-field">{{email}}:</td>
                        <td>{{#responsibleEmail}}{{responsibleEmail}}{{/responsibleEmail}}</td>
                    </tr>
                    <tr>
                        <td class="first-field">{{dateAndTime}}:</td>
                        <td>{{#timestamp}}{{timestamp}}{{/timestamp}}</td>
                    </tr>
                    <tr>
                        <td class="first-field">{{comments}}:</td>
                        <td>{{#feedback}}{{feedback}}{{/feedback}}</td>
                    </tr>
                </tbody>
            </table>  
        </div>
      </div>
    {{/approvalSteps}}
   {{/hasApproval}}
</body>
</html>
