<table class="m-0" style="width: 100%;">
  {% if (ctx.components.length) { %}
    {% for (const [index, c] of Object.entries(ctx.components)) { %}
      {% if (c.component.type === 'panel' && c.component.title && !c.component.hideLabel) { %}
        <tr>
          <th colspan="3" class="px-0 py-1 border-0{% if (index > 0) { %} border-top-1 border-grey-3{% } %}">
            <h3>{{ ctx.t(c.component.title) }}</h3>
          </th>
        </tr>
      {% } else if (c.component.type !== 'panel') { %}
        <tr>
          <th class="px-0 py-1 border-0 align-left">
            {% const required = c.component.validate && c.component.validate.required %}
            <div class="fg-light-slate small{% if (required) { %} field-required{% } %}">
              {{ ctx.t(c.label) }}
            </div>
          </th>
          <td class="px-2 py-1 border-0 align-left">
            {% const value = c.getValue() %}
            {% if (value && typeof value === 'object') { %}
              <ul>
                {% for (const [key, val] in Object.entries(value)) { %}
                  {% if (val) { %}
                    <li>{{ k }}</li>
                  {% } %}
                {% } %}
              </ul>
            {% } else if (value) { %}
              <span class="fg-slate">{{ value }}</span>
            {% } else { %}
              <span class="fg-light-slate small">No value</span>
            {% } %}
          </td>
          <td class="pl-1 py-1 pr-0 border-0 align-right">
            <button type="button"
              class="btn bg-none text-blue-bright hover:text-slate font-regular text-right"
              ref="focusInput"
              data-key="{{ c.key }}">
              {{ ctx.t('Edit', { context: 'review' }) }}
            </button>
          </td>
        </tr>
      {% } %}
    {% } %}
  {% } else { %}
    <tr>
      <td>{{ ctx.t('No data found') }}</td>
    </tr>
  {% } %}
</table>
