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>Meat and meat preparations</span> <span></span>26.2%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>1</b> 
                          </td>
                          <td class="c-table__cell ">
                            13.9% <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>Cereals and cereal preparations</span> <span></span>13.8%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>2</b> 
                          </td>
                          <td class="c-table__cell ">
                            12.2% <span>Road vehicles</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Cork and wood</span> <span></span>12.0%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>3</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.9% <span>Specialised machinery</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Dairy products and birds&#39; eggs</span> <span></span>8.8%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>4</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.8% <span>Other industrial machinery and parts</span> 
                          </td>
                        </tr>
                        <tr class="c-table__row">
                          <td class="c-table__cell " style="text-align: right;">
                            <span>Oil seeds and oleaginous fruits</span> <span></span>6.7%<br> 
                          </td>
                          <td class="c-table__cell " style="text-align: center;">
                            <b>5</b> 
                          </td>
                          <td class="c-table__cell ">
                            3.8% <span>Electrical machinery, apparatus and appliances, n.e.s.</span> 
                          </td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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