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 23.0% </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;in.png" alt=""></td>
                            <td class="c-table__cell"> India 22.7%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> India 7.7% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;in.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;cn.png" alt=""></td>
                            <td class="c-table__cell"> China 21.8%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> United Kingdom 6.5% </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>3</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;ae.png" alt=""></td>
                            <td class="c-table__cell"> United Arab Emirates 7.5%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Germany 5.7% </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>4</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;sg.png" alt=""></td>
                            <td class="c-table__cell"> Singapore 5.6%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Italy 5.1% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;it.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;my.png" alt=""></td>
                            <td class="c-table__cell"> Malaysia 4.7%</td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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