<div class="conteneur">

    <!-- Navbar -->
    <div style="margin-bottom: 50px">
        <app-nav-bar pour="user"></app-nav-bar>
    </div>

    <!-- ---------------------------------------------------------------------------------------------------------- -->

    <!-- bloc du milieu: niveau 1 -->
    <div class="row blocMilieu1">

        <!-- pub de gauche -->
        <div class="col-2">
            <div class="conteneurPubGauche">
                <app-pub></app-pub>
            </div>
        </div>

        <!-- ------------------------- -->

        <!-- bloc du milieu: niveau 2 -->
        <div class="col-8">

            <!-- Search bar -->
            <div class="row" style="margin-bottom: 10px">
                <div>
                    <input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
                    <button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
                </div>
            </div>

            <!-- Site de streaming -->
            <div class="row" style="margin-bottom: 10px">
                <div>
                    <span *ngFor="let plateforme of tabPlateform">
                        &nbsp;
                        <input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
                        <img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
                        <label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
                        &nbsp;
                    </span>
                </div>
            </div>

            <!-- Grille des videos -->
            <div class="row">
                <app-video-grid [tabVideo]="tabVideo"></app-video-grid>
            </div>

        </div>

        <!-- ------------------------- -->

        <!-- pub de droite -->
        <div class="col-2">
            <div class="conteneurPubDroite">
                <app-pub></app-pub>
            </div>
        </div>

    </div>

    <!-- ---------------------------------------------------------------------------------------------------------- -->

    <!-- pub du bas
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <div class="conteneurPubBas">
                <app-pub></app-pub>
            </div>
        </div>
        <div class="col-2"></div>
    </div>
    -->

</div>

