class TradeStructureMarketTable 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 ">
                          &nbsp; 
                        </td>
                        <td class="c-table__cell " style="text-align: center;">
                          <b>Exports</b> 
                        </td>
                        <td class="c-table__cell " style="text-align: center;">
                          Rank 
                        </td>
                        <td class="c-table__cell " style="text-align: center;">
                          <b>Imports</b> 
                        </td>
                        <td class="c-table__cell ">
                           &nbsp; 
                        </td>
                    </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> United States 27.6% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;us.png" alt=""></td>
                            <td class="c-table__cell" style="text-align: center;"> <b>1</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;gb.png" alt=""></td>
                            <td class="c-table__cell"> United Kingdom 18.8%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> United Kingdom 11.4% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;gb.png" alt=""></td>
                            <td class="c-table__cell" style="text-align: center;"> <b>2</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;us.png" alt=""></td>
                            <td class="c-table__cell"> United States 16.5%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Germany 10.4% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;de.png" alt=""></td>
                            <td class="c-table__cell" style="text-align: center;"> <b>3</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;fr.png" alt=""></td>
                            <td class="c-table__cell"> France 12.3%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Belgium 9.4% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;be.png" alt=""></td>
                            <td class="c-table__cell" style="text-align: center;"> <b>4</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;cn.png" alt=""></td>
                            <td class="c-table__cell"> China 7.7%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Netherlands 8.5% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;nl.png" alt=""></td>
                            <td class="c-table__cell" style="text-align: center;"> <b>5</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;de.png" alt=""></td>
                            <td class="c-table__cell"> Germany 6.5%</td>
                        </tr>
                </tbody>
            </table>`;
  }
}

customElements.define(
  "trade-structure-market-table",
  TradeStructureMarketTable
);