<!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%;
            }
            .question-field{
                font-weight: bold;
                font-size: 18px;
                width: 40%;
            }
            .form-step-title {
              font-size: 35px;
              font-weight: bold;
            }
            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;
            }
            .stars{
                color: rgb(243, 219, 43);
                font-size: 25px;
            }
            .flow-title{
                font-size: 40px;
                text-align: center;
                font-weight: bold;
            }
            .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; }
            .link{
                display: inline-block;
                overflow-wrap: break-word;
                word-wrap: break-word;
                width: 450px;
            }
            .attachment-title{
              font-size: 30px;
              font-weight: bold;
              color: rgb(81, 135, 222);
              padding: 5px 0 0 0;
            }
            .autocomplete-field{
                font-size: 14px;
                font-weight: 200;
                color: rgb(49, 49, 49);
                padding: 0 0 0 0;
            }
            .lock-image {
                width: 15px;
                vertical-align: top;
            }
    </style>
</head>
<body>
    <table style="justify-content: center;">
        <thead>
            <tr>
                <td>{{generalData}}</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="first-field">{{formId}}:</td>
                <td>{{formIdNumber}}</td>
            </tr>
            <tr>
                <td class="first-field">{{filledBy}}:</td>
                <td>{{userFullName}}</td>
            </tr>
            <tr>
                <td class="first-field">{{username}}:</td>
                <td>{{userEmployeeInternalId}}</td>
            </tr>
            <tr>
                <td class="first-field">{{email}}:</td>
                <td>{{userEmail}}</td>
            </tr>
            <tr>
                <td class="first-field">{{completionDate}}:</td>
                <td>{{formCreatedAt}}</td>
            </tr>
            <tr>
                <td class="first-field">{{community}}:</td>
                <td>{{instanceName}}</td>
            </tr>
            <tr>
                <td class="first-field">{{hasApprovalWorkflow}}:</td>
                <td>{{#hasApproval}}{{yes}}{{/hasApproval}}{{^hasApproval}}{{no}}{{/hasApproval}} {{#amountOfSteps}}({{amountOfSteps}} {{steps}}){{/amountOfSteps}}</td>
            </tr>
        </tbody>
    </table>
    {{#formSteps}}
      <div class="form-step-title">{{title}}</div>
      <br>
      <table style="justify-content: center;">
        <thead>
            <tr>
                <td>{{question}}</td>
                <td>{{answer}}</td>
            </tr>
        </thead>
        <tbody>
          {{#questions}}
              <tr>
                  <td class="question-field">{{description}}<b style="color: #ff5500;">{{#required}}*{{/required}}</b>
                      <br>{{#answerIsAutocomplete}}<div class="autocomplete-field">{{autocompletedAnswer}} <img class="lock-image" src="data:image;base64,{{{lockIconBase64}}}" alt="lockIcon"/></div>{{/answerIsAutocomplete}}
                  </td>
                  <td class="{{#answerIsRate}}stars{{/answerIsRate}}">
                    {{#attachments}}
                      {{#isImage}}
                        <a class="link">
                          {{attachment}} {{order}}
                        </a>
                      {{/isImage}}
                      {{^isImage}}
                        <br><br><p><a href="{{url}}" target="_blank">Link</a></p>
                      {{/isImage}}
                      <br><br>
                    {{/attachments}}
                    {{#signature}}<img src="data:image;base64,{{{base64Image}}}" alt="{{{altText}}}" width="150" height="100"/>{{/signature}}
                      <div style="white-space: pre-line;">{{answerText}}</div>
                  </td>
              </tr>
          {{/questions}}
        </tbody>
    </table>
    {{/formSteps}}
   {{#hasApproval}}
    <h1 style="page-break-before: always; 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}}
{{#formSteps}}
  {{#questions}}
    {{#attachments}}
      {{#isImage}}
        <div style="page-break-before: always" class="attachment-title">{{attachment}} {{order}} ({{description}})</div>
        <img src="data:image;base64,{{{base64}}}" alt="{{{url}}}"/>
      {{/isImage}}
    {{/attachments}}
  {{/questions}}
{{/formSteps}}
</body>
</html>
