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 15.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;de.png" alt=""></td>
                            <td class="c-table__cell"> Germany 18.1%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Germany 12.2% </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>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 9.0%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> China 10.8% </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>3</b> </td>
                            <td class="c-table__cell" style="text-align: right;"><img src="https:&#x2F;&#x2F;trade-tables.azhost.cloud&#x2F;flags&#x2F;it.png" alt=""></td>
                            <td class="c-table__cell"> Italy 7.8%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> Italy 6.4% </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>4</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 5.9%</td>
                        </tr>
                        <tr class="c-table__row">
                            <td class="c-table__cell" style="text-align: right;"> France 4.8% </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>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.6%</td>
                        </tr>
                </tbody>
            </table>`;
  }
}

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