<window id="13001">
    <controls>
        <!-- #region TEMPORARY ALL SPORTS LABEL -->
        <control type="label" id="allsportstemplabel">
            <left>0</left>
            <top>30</top>
            <width>100%</width>
            <height>0</height>
            <visible>true</visible>
            <align>center</align>
            <label>All Sports Page</label>
            <font>arial.ttf</font>
        </control>
        <!-- #endregion -->

        <!-- All Sports Grid -->
        <control type="grid">
            <!-- Define properties of the grid -->
            <columns>4</columns>  <!-- Number of columns in the grid -->
            <rows>3</rows>  <!-- Number of rows in the grid -->
            <colwidth>300</colwidth>  <!-- Width of each column -->
            <rowheight>300</rowheight>  <!-- Height of each row -->
            <colspacing>20</colspacing>  <!-- Spacing between columns -->
            <rowspacing>20</rowspacing>  <!-- Spacing between rows -->

            <!-- Add buttons for each sport dynamically using a loop -->
            <loop condition="sports">
                <control type="button">
                    <!-- Position of the button in the grid -->
                    <pos>(loop.index-1)%3, (loop.index-1)//3</pos>
                    <!-- Size of the button -->
                    <width>300</width>
                    <height>300</height>
                    <!-- Other properties of the button -->
                    <label>$(INFO[sports].name)</label>  <!-- Label for the sport -->
                    <texture>$(INFO[sports].icon)</texture>  <!-- Icon for the sport -->
                    <!-- Event handler for button click -->
                    <onclick>RunScript(special://path/to/OnClickScript.py, show_sport_details, '$(INFO[sports].name)')</onclick>
                </control>
            </loop>
        </control>
    </controls>
</window>