class TradeStructureProductTable extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<table class="c-table js-toggle-text-container js-table-sortable" style="margin-top: 0;">
                <tbody class="c-table__content">
                    <tr class="c-table__row">
                      <td class="c-table__cell " style="text-align: right;">
                        <b>Exports</b> 
                      </td>
                      <td class="c-table__cell " style="text-align: center;">
                        Rank 
                      </td>
                      <td class="c-table__cell " style="text-align: left;">
                        <b>Imports</b> 
                      </td>
                    </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Telecommunication and sound recording apparatus</span> <span></span>17.7%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>1</b> 
                          </td>
                          <td class="c-table__cell ">
                            23.7% <span>Electrical machinery, apparatus and appliances, n.e.s.</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Office machines and automatic data processing machines</span> <span></span>12.5%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>2</b> 
                          </td>
                          <td class="c-table__cell ">
                            8.0% <span>Office machines and automatic data processing machines</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Electrical machinery, apparatus and appliances, n.e.s.</span> <span></span>11.3%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>3</b> 
                          </td>
                          <td class="c-table__cell ">
                            5.6% <span>Textile yarn and related products</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Articles of apparel &amp; clothing accessories</span> <span></span>9.5%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>4</b> 
                          </td>
                          <td class="c-table__cell ">
                            4.5% <span>Petroleum, petroleum products and related materials</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Footwear</span> <span></span>6.0%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>5</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.7% <span>Iron and steel</span> 
                          </td>
                        </tr>
                </tbody>
            </table>`;
  }
}

customElements.define("trade-structure-product-table", TradeStructureProductTable);