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.7% </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;us.png" alt=""></td>
                            <td class="c-table__cell"> United States 26.8%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> China 18.2% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;cn.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 20.7%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Panama 14.3% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;pa.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;co.png" alt=""></td>
                            <td class="c-table__cell"> Colombia 7.4%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Chile 3.1% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;cl.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;br.png" alt=""></td>
                            <td class="c-table__cell"> Brazil 4.0%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Peru 3.1% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;pe.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;pe.png" alt=""></td>
                            <td class="c-table__cell"> Peru 3.5%</td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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