<template>
  <div class="preview">
    <table width="100%">
      <tr v-for="sectionName in ['header', 'body', 'footer']" :key="sectionName">
        <td align="center" :style="document[sectionName].style()">

          <table width="600">
            <tr>
              <td>

                <table width="100%">
                  <tr v-for="row in document[sectionName].children" :id="row.id" :key="row.id" :style="row.style()">
                    <td>

                      <table width="100%">
                        <tr>
                          <td
                            v-for="col in row.children"
                            :id="col.id"
                            :style="col.style()"
                            :width="col.attributes.width"
                            :key="col.id"
                          >
                            <img v-if="constructorName(col.children[0]) === 'ContentImage'" :src="col.children[0].url" :style="col.children[0].style()">
                            <span v-if="constructorName(col.children[0]) === 'ContentText'" v-html="markdownToHtml(col.children[0].text)"></span>
                            <hr v-if="constructorName(col.children[0]) === 'ContentHorizontalRule'" />
                            <div v-if="constructorName(col.children[0]) === 'ContentSpacer'" :style="col.children[0].style()" /></div>
                            <a v-if="constructorName(col.children[0]) === 'ContentButton'" :href="col.children[0].url" target="_blank" :style="col.children[0].style()" />{{col.children[0].text}}</a>
                          </td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>

              </td>
            </tr>
          </table>

        </td>
      </tr>
    </table>
  </div>
</template>