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>Petroleum, petroleum products and related materials</span> <span></span>43.7%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>1</b> 
                          </td>
                          <td class="c-table__cell ">
                            14.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>Gas, natural and manufactured</span> <span></span>13.1%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>2</b> 
                          </td>
                          <td class="c-table__cell ">
                            9.2% <span>Road vehicles</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Iron and steel</span> <span></span>7.5%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>3</b> 
                          </td>
                          <td class="c-table__cell ">
                            6.5% <span>Iron and steel</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Fertilizers other than group 272</span> <span></span>6.1%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>4</b> 
                          </td>
                          <td class="c-table__cell ">
                            5.2% <span>Metalliferous ores and metal scrap</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Organic chemicals</span> <span></span>3.8%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>5</b> 
                          </td>
                          <td class="c-table__cell ">
                            5.1% <span>Other industrial machinery and parts</span> 
                          </td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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