<section style="background-image: url('{{ glide:backdrop blur="20" fm="webp"}}');"
         class="has-text-centered"
         id="tournament-header"
>
    <img src="{{ glide:logo preset="logo_large" fm="webp"}}" class="my-6" alt="{{ logo:alt }}" />
</section>
<section class="section grid is-col-min-16 is-gap-4 container" id="tournament-info">
    <div class="cell">
        <div class="has-text-weight-bolder is-uppercase is-size-1 has-text-primary">
            {{ title }}
        </div>
        <div class="has-text-white block is-size-4 mb-6">
            Tournoi {{  type:label }}
        </div>
        <div class="block content mb-6">
            {{ description }}
        </div>

        {{ phases }}
        {{ if (phases | length) > 1 }}
            <h3 class="is-size-3 has-text-primary block has-text-weight-bolder">{{ phase_name }}</h3>
        {{ /if }}
        <div class="is-hidden-mobile">
            <div>
            <span class="tag is-medium is-primary has-text-weight-bolder is-uppercase block">
                Début des qualifications
            </span>
                <span class="has-text-primary has-text-weight-bold">{{ qualif_start  format="d/m/Y H:i" ?? 'TBA' }}</span>
            </div>
            <div>
            <span class="tag is-medium is-primary has-text-weight-bolder is-uppercase block">
                Début du tournoi
            </span>
                <span>{{ start format="d/m/Y H:i" ?? 'TBA' }}</span>
            </div>
            <div class="mb-6">
            <span class="tag is-medium is-primary has-text-weight-bolder is-uppercase block">
                Fin du tournoi
            </span>
                <span>{{ end format="d/m/Y H:i"?? 'TBA' }}</span>
            </div>
        </div>
        <div class="is-hidden-tablet">
            <div>
            <span class="tag is-primary has-text-weight-bolder is-uppercase block">
                Début des qualifications
            </span>
                <span class="has-text-primary has-text-weight-bold">{{ qualif_start  format="d/m/Y H:i" ?? 'TBA' }}</span>
            </div>
            <div>
            <span class="tag is-primary has-text-weight-bolder is-uppercase block">
                Début du tournoi
            </span>
                <span>{{ start format="d/m/Y H:i" ?? 'TBA' }}</span>
            </div>
            <div class="mb-6">
            <span class="tag is-primary has-text-weight-bolder is-uppercase block">
                Fin du tournoi
            </span>
                <span>{{ end format="d/m/Y H:i"?? 'TBA' }}</span>
            </div>
        </div>

        {{ /phases }}

    </div>

    <div class="cell">
        {{ if video }}
        <div class="has-text-weight-bolder is-uppercase is-size-3 has-text-primary block">
            Replay
        </div>
        <iframe src="{{ video | embed_url }}" class="is-fullwidth block mb-6" style="width:100%;aspect-ratio: 16/9;"></iframe>
        {{ /if }}

        {{ if guests }}
        <div class="has-text-weight-bolder is-uppercase is-size-3 has-text-primary block">
            Guests
        </div>
        <div class="fixed-grid has-2-cols is-gap-4">
            <div class="grid ">
                {{  guests  }}
                {{ partial:_guest  }}
                {{ /guests }}
            </div>
        </div>
        </div>
        {{ /if }}
    </div>
</section>




