 <div class="bubble">

     <div class="flex-row">
         <label class="left-label matchtitle">
             <span x-text="match.group_stage_name"></span>
             <span x-show="match.group_stage_name"> :</span>
             <span x-text="match.title"></span>
         </label>
         <label class="right-label minor-info bold" x-show="match.ended === false">
                 <span x-text="match.court"></span>
             </label>
     </div>

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

         <div>

             <div class="match-result">
                 <div class="player" :class="{
                     'single-player': match.teams[i-1].names.length === 1,
                     'two-players': match.teams[i-1].names.length === 2
                 }">
                    <!-- Show lucky loser or walkout status -->
                    <template x-if="match.teams[i-1].is_lucky_loser">
                        <div class="overlay-text right-label minor-info semibold">(LL)</div>
                    </template>
                    <template x-if="match.teams[i-1].walk_out === 1">
                        <div class="overlay-text right-label minor-info semibold">(WO)</div>
                    </template>

                    <template x-for="name in match.teams[i-1].names">
                        <div :class="{
                                'bold': true,
                                'strikethrough': match.teams[i-1].walk_out === 1,
                                'winner': match.teams[i-1].is_winner
                            }">
                            <span x-text="name === '' ? ' ' : name"></span>
                        </div>
                    </template>
                </div>
                <div class="scores">
                    <template x-for="score in match.teams[i-1].scores">
                        <template x-if="match.has_walk_out === false ">
                        <span class="score ws"
                              :class="{
                                  'w35px': score.tiebreak,
                                  'w30px': !score.tiebreak,
                                  'winner': match.teams[i-1].is_winner
                              }"
                        >
                            <span x-text="score.main"></span>
                            <template x-if="score.tiebreak">
                                <sup x-text="score.tiebreak"></sup>
                            </template>
                        </span>
                        </template>
                    </template>

                    <span x-data="{
                        showWalkOut(match, team) {
                            let html = ``
                            if (match.has_walk_out) {
                                html += `<span class='score bold w60px'>`
                                if (team.walk_out == 0) html += `WO`
                                html += `</span>`
                            }
                            return html
                        },
                    }" x-html="showWalkOut(match, match.teams[i-1])">
                    </span>

                    <template x-if="!match.tournament?.hide_weight && match.teams[i-1].weight && !match.has_walk_out && match.teams[i-1].scores.length === 0">
                        <span class="score ws numbers" x-text="match.teams[i-1].weight"></span>
                    </template>

                </div>
            </div>

             <div x-show="i === 1">
                 <hr/>
             </div>

         </div>
     </template>
     <div class="status-container" :class="{'running': !match.ended && match.started}">
     <div class="top-margin flex-row">
         <label class="left-label minor-info bold"><span x-text="match.time_indication"></span></label>
         <label class="right-label minor-info semibold"><span x-text="match.format"></span></label>
     </div>
     </div>

 </div>
