<section class="relative bg-cover bg-center bg-no-repeat bg-[url('https://res.cloudinary.com/duukclzsd/image/upload/v1767338075/seltrix/templates/sports-template/table/background.jpg')]" data-component-type="Content" data-component-slug="sports-template-table">
    <div class="absolute inset-0 bg-black/60"></div>

    <div class="hidden md:block absolute right-0 top-0 bottom-0">
        <img data-node="table_side_image" data-node-type="file" data-node-label="Side Player Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338077/seltrix/templates/sports-template/table/man.png" src="{{table_side_image}}" class="h-full object-contain" alt="Player">
    </div>

    <div class="relative lg:max-w-[86%] md:max-w-[98%] max-w-[90%] mx-auto py-16 md:py-24 overflow-hidden grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-10">
        <div class="text-white">
            <h2 class="text-2xl md:text-3xl font-bold uppercase tracking-wide" data-node="table_title" data-node-type="text" data-node-label="Table Title" data-node-default="PRIMARY LEAGUE STANDING">
                {{table_title}}
            </h2>

            <p class="text-sm text-gray-300 mt-2 max-w-md leading-tight" data-node="table_desc" data-node-type="text" data-node-label="Table desc" data-node-default=" Lorem ipsum dolor sit amet consectetur. Justo enim diam massa aliquam condimentum et mauris leo.">
                {{table_desc}}
            </p>

            <div class="mt-10 overflow-x-auto">
                <div class="min-w-[780px]">
                    <!-- TABLE HEADER -->

                    <!-- <div class=" grid grid-cols-13 bg-red-700"> -->

                    <div class="grid grid-cols-[80px_100px_repeat(9,1fr)] bg-[#940F0F] text-white text-xs font-semibold py-3 px-2">
                        <span data-node="head_pos" data-node-type="text" data-node-label="Header POS" data-node-default="POS">
                            {{head_pos}}
                        </span>

                        <span data-node="head_team" data-node-type="text" data-node-label="Header Team" data-node-default="TEAM">
                            {{head_team}}
                        </span>

                        <span class="text-center" data-node="head_w" data-node-type="text" data-node-label="Header Wins" data-node-default="W">
                            {{head_w}}
                        </span>

                        <span class="text-center" data-node="head_l" data-node-type="text" data-node-label="Header Loss" data-node-default="L">
                            {{head_l}}
                        </span>

                        <span class="text-center" data-node="head_pct" data-node-type="text" data-node-label="Header Percentage" data-node-default="PCT">
                            {{head_pct}}
                        </span>

                        <span class="text-center" data-node="head_gb" data-node-type="text" data-node-label="Header Games Behind" data-node-default="GB">
                            {{head_gb}}
                        </span>

                        <span class="text-center" data-node="head_rs" data-node-type="text" data-node-label="Header Runs Scored" data-node-default="RS">
                            {{head_rs}}
                        </span>

                        <span class="text-center" data-node="head_ra" data-node-type="text" data-node-label="Header Runs Allowed" data-node-default="RA">
                            {{head_ra}}
                        </span>

                        <span class="text-center" data-node="head_home" data-node-type="text" data-node-label="Header Home" data-node-default="HOME">
                            {{head_home}}
                        </span>

                        <span class="text-center" data-node="head_road" data-node-type="text" data-node-label="Header Road" data-node-default="ROAD">
                            {{head_road}}
                        </span>

                        <span class="text-center" data-node="head_streak" data-node-type="text" data-node-label="Header Streak" data-node-default="STRK">
                            {{head_streak}}
                        </span>
                    </div>

                    <!-- TABLE ROW -->
                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] text-white text-xs py-3 px-4 bg-[#111111CC] shadow-lg backdrop-blur">
                        <span data-node="row1_pos" data-node-type="text" data-node-label="Row 1 Position" data-node-default="1">
                            {{row1_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">
                            <img data-node="row1_team_logo" data-node-type="file" data-node-label="Row 1 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338083/seltrix/templates/sports-template/table/table%20Svg/dragons.png" src="{{row1_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row1_team_name" data-node-type="text" data-node-label="Row 1 Team Name" data-node-default="DRAGONS">
                                {{row1_team_name}}
                            </span>
                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row1_wins" data-node-type="text" data-node-label="Row 1 Wins" data-node-default="9">
                            {{row1_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row1_losses" data-node-type="text" data-node-label="Row 1 Losses" data-node-default="2">
                            {{row1_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row1_pct" data-node-type="text" data-node-label="Row 1 Percentage" data-node-default="0.912">
                            {{row1_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row1_gb" data-node-type="text" data-node-label="Row 1 Games Behind" data-node-default="5">
                            {{row1_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row1_rs" data-node-type="text" data-node-label="Row 1 Runs Scored" data-node-default="50">
                            {{row1_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row1_ra" data-node-type="text" data-node-label="Row 1 Runs Allowed" data-node-default="20">
                            {{row1_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row1_home" data-node-type="text" data-node-label="Row 1 Home Record" data-node-default="6-0">
                            {{row1_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row1_road" data-node-type="text" data-node-label="Row 1 Road Record" data-node-default="2-1">
                            {{row1_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row1_streak" data-node-type="text" data-node-label="Row 1 Streak" data-node-default="W3">
                            {{row1_streak}}
                        </span>
                    </div>

                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] bg-white/10 text-white text-xs py-3 px-4">
                        <!-- POSITION -->
                        <span data-node="row2_pos" data-node-type="text" data-node-label="Row 2 Position" data-node-default="2">
                            {{row2_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">
                            <img data-node="row2_team_logo" data-node-type="file" data-node-label="Row 2 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338088/seltrix/templates/sports-template/table/table%20Svg/wesko.png" src="{{row2_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row2_team_name" data-node-type="text" data-node-label="Row 2 Team Name" data-node-default="WESTON">
                                {{row2_team_name}}
                            </span>
                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row2_wins" data-node-type="text" data-node-label="Row 2 Wins" data-node-default="9">
                            {{row2_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row2_losses" data-node-type="text" data-node-label="Row 2 Losses" data-node-default="2">
                            {{row2_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row2_pct" data-node-type="text" data-node-label="Row 2 Percentage" data-node-default="0.912">
                            {{row2_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row2_gb" data-node-type="text" data-node-label="Row 2 Games Behind" data-node-default="5">
                            {{row2_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row2_rs" data-node-type="text" data-node-label="Row 2 Runs Scored" data-node-default="50">
                            {{row2_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row2_ra" data-node-type="text" data-node-label="Row 2 Runs Allowed" data-node-default="20">
                            {{row2_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row2_home" data-node-type="text" data-node-label="Row 2 Home Record" data-node-default="6-0">
                            {{row2_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row2_road" data-node-type="text" data-node-label="Row 2 Road Record" data-node-default="2-1">
                            {{row2_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row2_streak" data-node-type="text" data-node-label="Row 2 Streak" data-node-default="W3">
                            {{row2_streak}}
                        </span>
                    </div>

                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] text-white text-xs py-3 px-4 bg-[#111111CC] shadow-lg backdrop-blur">
                        <!-- POSITION -->
                        <span data-node="row3_pos" data-node-type="text" data-node-label="Row 3 Position" data-node-default="3">
                            {{row3_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">

                            <img data-node="row3_team_logo" data-node-type="file" data-node-label="Row 3 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338082/seltrix/templates/sports-template/table/table%20Svg/bulls%20svg.png" src="{{row3_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row3_team_name" data-node-type="text" data-node-label="Row 3 Team Name" data-node-default="BULLS">
                                {{row3_team_name}}
                            </span>

                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row3_wins" data-node-type="text" data-node-label="Row 3 Wins" data-node-default="9">
                            {{row3_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row3_losses" data-node-type="text" data-node-label="Row 3 Losses" data-node-default="2">
                            {{row3_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row3_pct" data-node-type="text" data-node-label="Row 3 Percentage" data-node-default="0.912">
                            {{row3_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row3_gb" data-node-type="text" data-node-label="Row 3 Games Behind" data-node-default="5">
                            {{row3_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row3_rs" data-node-type="text" data-node-label="Row 3 Runs Scored" data-node-default="50">
                            {{row3_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row3_ra" data-node-type="text" data-node-label="Row 3 Runs Allowed" data-node-default="20">
                            {{row3_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row3_home" data-node-type="text" data-node-label="Row 3 Home Record" data-node-default="6-0">
                            {{row3_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row3_road" data-node-type="text" data-node-label="Row 3 Road Record" data-node-default="2-1">
                            {{row3_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row3_streak" data-node-type="text" data-node-label="Row 3 Streak" data-node-default="W3">
                            {{row3_streak}}
                        </span>

                    </div>

                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] bg-white/10 text-white text-xs py-3 px-4">
                        <!-- POSITION -->
                        <span data-node="row4_pos" data-node-type="text" data-node-label="Row 4 Position" data-node-default="4">
                            {{row4_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">

                            <img data-node="row4_team_logo" data-node-type="file" data-node-label="Row 4 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338086/seltrix/templates/sports-template/table/table%20Svg/manhunt.png" src="{{row4_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row4_team_name" data-node-type="text" data-node-label="Row 4 Team Name" data-node-default="MANHUNT">
                                {{row4_team_name}}
                            </span>

                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row4_wins" data-node-type="text" data-node-label="Row 4 Wins" data-node-default="9">
                            {{row4_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row4_losses" data-node-type="text" data-node-label="Row 4 Losses" data-node-default="2">
                            {{row4_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row4_pct" data-node-type="text" data-node-label="Row 4 Percentage" data-node-default="0.912">
                            {{row4_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row4_gb" data-node-type="text" data-node-label="Row 4 Games Behind" data-node-default="5">
                            {{row4_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row4_rs" data-node-type="text" data-node-label="Row 4 Runs Scored" data-node-default="50">
                            {{row4_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row4_ra" data-node-type="text" data-node-label="Row 4 Runs Allowed" data-node-default="20">
                            {{row4_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row4_home" data-node-type="text" data-node-label="Row 4 Home Record" data-node-default="6-0">
                            {{row4_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row4_road" data-node-type="text" data-node-label="Row 4 Road Record" data-node-default="2-1">
                            {{row4_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row4_streak" data-node-type="text" data-node-label="Row 4 Streak" data-node-default="W3">
                            {{row4_streak}}
                        </span>
                    </div>

                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] bg-white/10 text-white text-xs py-3 px-4">
                        <!-- POSITION -->
                        <span data-node="row5_pos" data-node-type="text" data-node-label="Row 5 Position" data-node-default="5">
                            {{row5_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">

                            <img data-node="row5_team_logo" data-node-type="file" data-node-label="Row 5 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338087/seltrix/templates/sports-template/table/table%20Svg/miland.png" src="{{row5_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row5_team_name" data-node-type="text" data-node-label="Row 5 Team Name" data-node-default="MILAND">
                                {{row5_team_name}}
                            </span>

                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row5_wins" data-node-type="text" data-node-label="Row 5 Wins" data-node-default="9">
                            {{row5_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row5_losses" data-node-type="text" data-node-label="Row 5 Losses" data-node-default="2">
                            {{row5_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row5_pct" data-node-type="text" data-node-label="Row 5 Percentage" data-node-default="0.912">
                            {{row5_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row5_gb" data-node-type="text" data-node-label="Row 5 Games Behind" data-node-default="5">
                            {{row5_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row5_rs" data-node-type="text" data-node-label="Row 5 Runs Scored" data-node-default="50">
                            {{row5_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row5_ra" data-node-type="text" data-node-label="Row 5 Runs Allowed" data-node-default="20">
                            {{row5_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row5_home" data-node-type="text" data-node-label="Row 5 Home Record" data-node-default="6-0">
                            {{row5_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row5_road" data-node-type="text" data-node-label="Row 5 Road Record" data-node-default="2-1">
                            {{row5_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row5_streak" data-node-type="text" data-node-label="Row 5 Streak" data-node-default="W3">
                            {{row5_streak}}
                        </span>
                    </div>

                    <div class="grid grid-cols-[40px_130px_repeat(9,1fr)] bg-white/10 text-white text-xs py-3 px-4">
                        <!-- POSITION -->
                        <span data-node="row6_pos" data-node-type="text" data-node-label="Row 6 Position" data-node-default="6">
                            {{row6_pos}}
                        </span>

                        <!-- TEAM -->
                        <div class="flex items-center gap-2">

                            <img data-node="row6_team_logo" data-node-type="file" data-node-label="Row 6 Team Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338084/seltrix/templates/sports-template/table/table%20Svg/interko.png" src="{{row6_team_logo}}" alt="Team Logo" class="h-5 w-5">

                            <span data-node="row6_team_name" data-node-type="text" data-node-label="Row 6 Team Name" data-node-default="INTERKO">
                                {{row6_team_name}}
                            </span>

                        </div>

                        <!-- WINS -->
                        <span class="text-center" data-node="row6_wins" data-node-type="text" data-node-label="Row 6 Wins" data-node-default="9">
                            {{row6_wins}}
                        </span>

                        <!-- LOSSES -->
                        <span class="text-center" data-node="row6_losses" data-node-type="text" data-node-label="Row 6 Losses" data-node-default="2">
                            {{row6_losses}}
                        </span>

                        <!-- PCT -->
                        <span class="text-center" data-node="row6_pct" data-node-type="text" data-node-label="Row 6 Percentage" data-node-default="0.912">
                            {{row6_pct}}
                        </span>

                        <!-- GB -->
                        <span class="text-center" data-node="row6_gb" data-node-type="text" data-node-label="Row 6 Games Behind" data-node-default="5">
                            {{row6_gb}}
                        </span>

                        <!-- RS -->
                        <span class="text-center" data-node="row6_rs" data-node-type="text" data-node-label="Row 6 Runs Scored" data-node-default="50">
                            {{row6_rs}}
                        </span>

                        <!-- RA -->
                        <span class="text-center" data-node="row6_ra" data-node-type="text" data-node-label="Row 6 Runs Allowed" data-node-default="20">
                            {{row6_ra}}
                        </span>

                        <!-- HOME -->
                        <span class="text-center" data-node="row6_home" data-node-type="text" data-node-label="Row 6 Home Record" data-node-default="6-0">
                            {{row6_home}}
                        </span>

                        <!-- ROAD -->
                        <span class="text-center" data-node="row6_road" data-node-type="text" data-node-label="Row 6 Road Record" data-node-default="2-1">
                            {{row6_road}}
                        </span>

                        <!-- STREAK -->
                        <span class="text-center" data-node="row6_streak" data-node-type="text" data-node-label="Row 6 Streak" data-node-default="W3">
                            {{row6_streak}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>