<!--<app-nav-parrain *ngIf="role==='Parrain'"></app-nav-parrain>-->
<!--<app-nav-commercant *ngIf="role==='Commercant'"><app-nav-commercant>-->
<div *ngIf="(user | async)?.displayName === 'Parrain'" >
  <app-nav-parrain></app-nav-parrain>
  <div class="container" style="padding-top: 10%">
    <!--<p>
      Profil
    </p>

    <div> ID: {{ (user | async)?.uid }} </div>
    <div> Email: {{ (user | async)?.email }} </div>
    <div> Statut: {{ (user | async)?.displayName }} </div> -->


  <!--Grid row-->


    <!--Grid column-->
    <div class="col-md-12" style="padding-right: 2%; padding-left: 2%;">

      <!--Card-->
      <div class="card testimonial-card">

        <!--Bacground color-->
        <div class="card-up aqua-gradient">
        </div>

        <!--Avatar-->
        <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
        </div>

        <div class="card-body">
          <!--Name-->

            <h4 class="card-title wow fadeInDown"><p>{{localUser.firstname}} {{localUser.familyname}}</p></h4>
            <hr>
          <ul class="list-group wow fadeInLeft">
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Statut :</label> {{localUser.status}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Email :</label> {{localUser.email}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Sexe :</label> {{localUser.sex}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Date de naissance :</label> {{localUser.birthday  | date:'dd/MM/yyyy'}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Téléphone :</label> {{localUser.telephone}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Code Secret :</label>  {{localUser.secretCode}}</li>
          </ul>



            <!--<div *ngFor="let user of opCommData | async">
              User is {{user.firstname}}
            </div>-->

          <div class="btn-block">
            <button class="btn btn-orange btn-rounded waves-light" (click)="goToEditProfile()"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Editer profil</button>
            <button class="btn btn-default btn-rounded waves-light" (click)="goToCarte()">Retour</button>
          </div>

        </div>

      </div>
      <!--/.Card-->

    </div>
    <!--Grid column-->


  <!--Grid row-->

  </div>
</div>

<div *ngIf="(user | async)?.displayName === 'Commercant'" >
  <app-nav-commercant></app-nav-commercant>
  <div class="container" style="padding-top: 10%">
    <!--<p>
      Profil
    </p>

    <div> ID: {{ (user | async)?.uid }} </div>
    <div> Email: {{ (user | async)?.email }} </div>
    <div> Statut: {{ (user | async)?.displayName }} </div> -->


    <!--Grid row-->


    <!--Grid column-->
    <div class="col-md-12" style="padding-right: 2%; padding-left: 2%;">

      <!--Card-->
      <div class="card testimonial-card">

        <!--Bacground color-->
        <div class="card-up aqua-gradient">
        </div>

        <!--Avatar-->
        <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
        </div>

        <div class="card-body">
          <!--Name-->
            <h4 class="card-title wow fadeInDown"><p>{{localUser.commercialName}}</p></h4>
            <hr>

          <ul class="list-group wow fadeInLeft">
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Raison sociale :</label> {{localUser.raisonSociale}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Numéro de siret :</label> {{localUser.siret}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Email :</label> {{localUser.email}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Date d'inscription :</label> {{localUser.dateInscription | date:'dd/MM/yyyy'}}</li>
            <li class="list-group-item text-left"><label class="h5-responsive mt-1 font-bold">Statut :</label> {{localUser.status}}</li>
          </ul>


            <!--<div *ngFor="let user of profileData | async">
              User is {{user.commercialName}}
            </div>-->
            <!--Quotation-->
            <!--<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>-->

          <div class="btn-block">
            <button class="btn btn-orange btn-rounded waves-light" (click)="goToEditProfile()"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Editer votre profil</button>
            <button class="btn btn-default btn-rounded waves-light" (click)="goToOpCom()">Retour</button>
          </div>

        </div>

      </div>
      <!--/.Card-->

    </div>
    <!--Grid column-->


    <!--Grid row-->

  </div>
</div>









