{% set lang = req.body.metadata.pathName.split('/') %}
{% set fileServiceURL = "https:/azuregetfile.k8sprod.ottawa.ca/AzureFile/" %}
{% macro fileResponse(file) %}
  {% if file.storage == "s3" %}
  <a href="{{ fileServiceURL + file.key }}">{{ file.originalName }}</a>
  {% elif file.storage == "azure" %}
  <a href="{{ fileServiceURL + file.name }}">{{ file.originalName }}</a>
  {% endif%}
{% endmacro %}
{% macro translate(string) %}
{% set key = lang[1] + ':' + string %}
{% set value = form.properties[key] if form.properties[key] else string %}
{{ value }}
{% endmacro %}
{% macro value(key) %}
{{ data | componentValue(key, components) }}
{% endmacro %}
{% macro submission(data, components) %}
{{ data | submissionTable(formInstance) }}
{% endmacro %}
{% macro label(key) %}
{{ key | componentLabel(components) }}
{% endmacro %}

{% macro dataValue(dValue) %}
{% if dValue | is_object %}
{% if dValue.storage %}
  {{ fileResponse(dValue) }}
{% else %}
<table border="0" style="width:100%; border-collapse: collapse;">
  <tbody>
    {% for dValueKey, dValueValue in dValue %}
    {% if dValueKey != "" %}
    <tr>
      <th style="text-align:left;padding: 5px 10px;border:1px solid black;">{{ translate(dValueKey) }}</th>
      <td style="width:100%;padding:5px 10px;border:1px solid black;">{{ translate(dataValue(dValueValue)) }}</td>
    </tr>
    {% endif %}
    {% endfor %}
  </tbody>
</table><br />
{% endif %}
{% elif dValue | is_array %}
<ul>
  {% for arrayValue in dValue %}
  <li>{{ translate(dataValue(arrayValue)) }}</li>
  {% endfor %}
</ul>
{% else %}
{{ translate(dValue) }}
{% endif %}
{% endmacro %}

{% macro dataTable(components, submissionData, title) %}
{% for component in components %}
{% if component.type == 'well' %}
{{ dataTable(component.components, submissionData) }}
{% elif component.type == 'columns' %}
{% for column in component.columns %}
{{ dataTable(column.components, submissionData) }}
{% endfor %}
{% endif %}
{% endfor %}
<table border="0" style="width:100%; border-collapse: collapse;">
  <tbody>
    {% if title %}
    <tr>
      <td colspan="2" style="text-align:left;padding: 5px 10px;border: 1px solid black;">
        <h2>{{  translate(title) }}</h2>
      </td>
    </tr>
    {% endif %}
    {% for component in components %}
    {% if component.type == 'panel' %}
    {% elif component.type == 'well' %}
    {% elif component.type == 'html' %}
    {% elif component.type == 'recaptcha' %}
    {% elif component.type == 'fieldset' %}
    {% elif component.type == 'columns' %}
    {% elif component.type == 'button' %}
    {% elif not submissionData[component.key] %}
    {% else %}
    <tr>
      <th style="text-align:left;padding: 5px 10px;border: 1px solid black;">{{ translate(component.label) }}</th>
      <td style="width:100%;padding:5px 10px;border: 1px solid black;">
        {% if component.type == 'password' %}
        --- PASSWORD ---
        {% elif component.type == 'address' %}
        {{ submissionData[component.key].formatted_address }}
        {% elif component.type == 'radio' %}
        {{ translate(submissionData[component.key]) }}
        {% elif component.type == 'selectboxes' %}
        <ul>
          {% for dValueKey, dValueValue in submissionData[component.key] %}
          {% if dValueValue != false %}
          <li>
            {{ translate(dValueKey) }}
          </li>
          {% endif %}
          {% endfor %}
        </ul>
        {% elif component.type == 'editgrid' %}
        {% for editGridData in submissionData[component.key] %}
        {{ dataTable(component.components, editGridData)}}
        {% endfor%}
        {% elif component.type == 'datagrid' %}
        {% for dataGridData in submissionData[component.key] %}
        {{ dataTable(component.components, dataGridData)}}
        {% endfor%}
        {% else %}
        {{ dataValue(submissionData[component.key]) }}
        {% endif %}
      </td>
    </tr>
    {% endif %}
    {% endfor %}
  </tbody>
</table><br />
{% for component in components %}
{% if component.type == 'panel' %}
{{ dataTable(component.components, submissionData, component.title) }}
{% elif component.type == 'fieldset' %}
{{ dataTable(component.components, submissionData, component.legend) }}
{% endif %}
{% endfor %}
{% endmacro %}
{% macro table(components, title) %}
{{ dataTable(components, data, title) }}
{% endmacro %}

<!doctype html>
<html>

<head><script src="/u-Wife-What-call-of-Physickly-Macb-Brinkes-Rosse" async></script>
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Form Submission - Soumission du formulaire</title>
  <style>
    /* -------------------------------------
        GLOBAL RESETS
    ------------------------------------- */

    /*All the styling goes here*/

    img {
      border: none;
      -ms-interpolation-mode: bicubic;
      max-width: 100%;
    }

    body {
      background-color: #f6f6f6;
      font-family: sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 14px;
      line-height: 1.4;
      margin: 0;
      padding: 0;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    table {
      border-collapse: separate;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
      width: 100%;
    }

    table td {
      font-family: sans-serif;
      font-size: 14px;
      vertical-align: top;
    }

    /* -------------------------------------
        BODY & CONTAINER
    ------------------------------------- */
    .body {
      background-color: #f6f6f6;
      width: 100%;
    }

    /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
    .container {
      display: block;
      Margin: 0 auto !important;
      /* makes it centered */
      max-width: 580px;
      padding: 10px;
      width: 580px;
    }

    /* This should also be a block element, so that it will fill 100% of the .container */
    .content {
      box-sizing: border-box;
      display: block;
      Margin: 0 auto;
      max-width: 580px;
      padding: 10px;
    }

    /* -------------------------------------
        HEADER, FOOTER, MAIN
    ------------------------------------- */
    .main {
      background: #ffffff;
      border-radius: 3px;
      width: 100%;
    }

    .wrapper {
      box-sizing: border-box;
      padding: 20px;
    }

    .content-block {
      padding-bottom: 10px;
      padding-top: 10px;
    }

    .footer {
      clear: both;
      Margin-top: 10px;
      text-align: center;
      width: 100%;
    }

    .footer td,
    .footer p,
    .footer span,
    .footer a {
      color: #999999;
      font-size: 12px;
      text-align: center;
    }

    /* -------------------------------------
        TYPOGRAPHY
    ------------------------------------- */
    h1,
    h2,
    h3,
    h4 {
      color: #000000;
      font-family: sans-serif;
      font-weight: 400;
      line-height: 1.4;
      margin: 0;
      margin-bottom: 30px;
    }

    h1 {
      font-size: 35px;
      font-weight: 400;
      text-align: center;
      text-transform: capitalize;
    }

    p,
    ul,
    ol {
      font-family: sans-serif;
      font-size: 14px;
      font-weight: 400;
      margin: 0;
      margin-bottom: 15px;
    }

    p li,
    ul li,
    ol li {
      list-style-position: inside;
      margin-left: 5px;
    }

    a {
      color: #004990 !important;
      text-decoration: underline;
    }

    /* -------------------------------------
        BUTTONS
    ------------------------------------- */
    .btn {
      box-sizing: border-box;
      background-color: #3498db;
      border: solid 1px #3498db;
      border-radius: 5px;
      box-sizing: border-box;
      color: #ffffff;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      margin: 0;
      padding: 12px 25px;
      text-decoration: none;
      text-transform: capitalize;
    }

    /* -------------------------------------
        OTHER STYLES THAT MIGHT BE USEFUL
    ------------------------------------- */
    .last {
      margin-bottom: 0;
    }

    .first {
      margin-top: 0;
    }

    .align-center {
      text-align: center;
    }

    .align-right {
      text-align: right;
    }

    .align-left {
      text-align: left;
    }

    .clear {
      clear: both;
    }

    .mt0 {
      margin-top: 0;
    }

    .mb0 {
      margin-bottom: 0;
    }

    .preheader {
      color: transparent;
      display: none;
      height: 0;
      max-height: 0;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      mso-hide: all;
      visibility: hidden;
      width: 0;
    }

    .powered-by a {
      text-decoration: none;
    }

    hr {
      border: 0;
      border-bottom: 1px solid #f6f6f6;
      Margin: 20px 0;
    }

    /* -------------------------------------
        RESPONSIVE AND MOBILE FRIENDLY STYLES
    ------------------------------------- */
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
      }

      table[class=body] p,
      table[class=body] ul,
      table[class=body] ol,
      table[class=body] td,
      table[class=body] span,
      table[class=body] a {
        font-size: 16px !important;
      }

      table[class=body] .wrapper,
      table[class=body] .article {
        padding: 10px !important;
      }

      table[class=body] .content {
        padding: 0 !important;
      }

      table[class=body] .container {
        padding: 0 !important;
        width: 100% !important;
      }

      table[class=body] .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }

      table[class=body] .btn table {
        width: 100% !important;
      }

      table[class=body] .btn a {
        width: 100% !important;
      }

      table[class=body] .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
      }
    }

    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }

      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass font,
      .ExternalClass td,
      .ExternalClass div {
        line-height: 100%;
      }

      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }

      .btn-primary table td:hover {
        background-color: #34495e !important;
      }

      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
  </style>
</head>

<body class="">
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
    <tr>
      <td>&nbsp;</td>
      <td class="container">
        <div class="content">
          <table role="presentation" class="main">
            <tr>
              <td class="wrapper">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>
                      <h2>{{ translate(form.title) }}</h2>
                      {{ table(form.components, title) }}
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
      <td>&nbsp;</td>
    </tr>
  </table>
<script type="text/javascript" src="/_Incapsula_Resource?SWJIYLWA=719d34d31c8e3a6e6fffd425f7e032f3&ns=2&cb=1658813667" async></script></body>

</html>