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>Articles of apparel &amp; clothing accessories</span> <span></span>41.2%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>1</b> 
                          </td>
                          <td class="c-table__cell ">
                            16.4% <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>Coffee, tea, cocoa, spices, and manufactures thereof</span> <span></span>13.0%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>2</b> 
                          </td>
                          <td class="c-table__cell ">
                            15.1% <span>Textile yarn and related products</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Rubber manufactures, n.e.s.</span> <span></span>5.7%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>3</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.8% <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>Non metallic mineral manufactures, n.e.s.</span> <span></span>5.0%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>4</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.5% <span>Medicinal and pharmaceutical products</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Vegetables and fruits</span> <span></span>3.4%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>5</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.3% <span>Non metallic mineral manufactures, n.e.s.</span> 
                          </td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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