 <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 info"><span x-text="match.date"></span></label> -->
     </div>

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

         <div>

             <div class="match-result">
                <div class="player bold">
                    <template x-for="name in match.teams[i-1].names">
                        <div :class="match.teams[i-1].is_winner ? 'winner' : ''">
                            <span x-text="name === '' ? '\u00A0' : name"></span>
                        </div>
                    </template>
                </div>
                <div class="scores">
                    <template x-for="score in match.teams[i-1].scores">

                        <span class="score bold w30px" :class="match.teams[i-1].is_winner ? 'winner' : ''" x-text="score"></span>

                    </template>

                    <span x-data="{
                        showWalkOut(match, team) {
                            let html = ``

                            if (match.has_walk_out) {
                                html += `<span class='score bold w60px'>`
                                if (team.walk_out) html += `WO`
                                html += `</span>`
                            }

                            return html
                        },
                        }" x-html="showWalkOut(match, match.teams[i-1])">
                    </span>
                </div>
            </div>

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

         </div>
     </template>

     <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.court"></span></label>
     </div>

 </div>
