<div class="dark_bubble">

    <div class="flex-row">
        <label class="left-label matchtitle winner"><span x-text="group_stage.group_stage_name"></span> <span x-text="group_stage.title"></span></label>
    </div>

    <template x-for="i in group_stage.teams.length">

        <div>
             <div class="flex" :class="group_stage.teams[i-1].qualified ? 'qualified' : ''">
                 <div class="flex-left player" :class="{
                     'single-player': group_stage.teams[i-1].names.length === 1,
                     'two-players': group_stage.teams[i-1].names.length === 2
                 }">
                    <template x-for="name in group_stage.teams[i-1].names">

                        <div class="bold" x-text="name"></div>


                        <!-- <div class="semibold" x-data="{
                            showName(name, team) {
                                let html = `<span class='`
                                if (team.is_winner) html += `winner`
                                html += `'>`
                                html += name
                                html += `</span>`
                                return html
                            },
                            }" x-html="showName(name, group_stage.teams[i-1])">
                        </div> -->
                    </template>

                </div>
                <div class="flex-right">

                    <div x-show="group_stage.started === false">
                        <div class="score ws numbers" x-show="hide_weight === false && group_stage.teams[i-1].weight">
                            <span x-text="group_stage.teams[i-1].weight"></span>
                        </div>
                    </div>

                    <div x-show="group_stage.teams[i-1].match_count > 0 && group_stage.started === true">
                        <div class="score ws numbers"><span x-text="group_stage.teams[i-1].win_loss"></span></div>
                        <div class="ws numbers"><span x-text="group_stage.teams[i-1].diff"></span></div>
                    </div>

                </div>
            </div>

            <div x-show="i != group_stage.teams.length">
                <div class="dark-bottom-border"></div>
            </div>

        </div>
    </template>

    <div class="top-margin flex-row">
        <label class="left-label minor-info semibold"><span class="beige" x-text="group_stage.duration"></span></label>
        <!-- <label class="right-label minor-info"><span x-text="group_stage.court"></span></label> -->
    </div>

</div>
