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>48.2%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>1</b> 
                          </td>
                          <td class="c-table__cell ">
                            8.7% <span>Iron and steel</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>42.6%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>2</b> 
                          </td>
                          <td class="c-table__cell ">
                            6.7% <span>Other industrial machinery and parts</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Crude fertilizers other than division 56, and crude minerals</span> <span></span>2.5%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>3</b> 
                          </td>
                          <td class="c-table__cell ">
                            6.1% <span>Cereals and cereal preparations</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>1.8%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>4</b> 
                          </td>
                          <td class="c-table__cell ">
                            5.5% <span>Road vehicles</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Inorganic chemicals</span> <span></span>1.5%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>5</b> 
                          </td>
                          <td class="c-table__cell ">
                            4.7% <span>Manufactures of metal, n.e.s.</span> 
                          </td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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