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;"> Spain 25.8% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;es.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;es.png" alt=""></td>
                            <td class="c-table__cell"> Spain 33.8%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> France 13.0% </td>
                            <td class="c-table__cell" style="text-align: left;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;fr.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;de.png" alt=""></td>
                            <td class="c-table__cell"> Germany 11.6%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Germany 10.8% </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 7.0%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> United States 6.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>4</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;nl.png" alt=""></td>
                            <td class="c-table__cell"> Netherlands 5.3%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> United Kingdom 4.7% </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>5</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 5.0%</td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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