<div class="title">
  Profil
</div>
<div class="container-fluid bg-light" *ngIf="currentUser; else loggedOut">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-md-10 mt-5 pt-5">
        <div class="row z-depth-3 roundBorder" style="border-radius: 40px">
          <div class="col-sm-4 bg-info rounded-left">
            <div class="card-block text-center text-white">
              <i class="fas fa-user-tie fa-7x mt-5"></i>
              <h2 class="font-weight-bold mt-4">{{ currentUser.username }}</h2>
              <p>Rol acces: {{ currentUser.roles[0].name }}</p>
            </div>
          </div>
          <div class="col-sm-8 bg-white rounded-right">
            <h2 class="mt-3 text-center">Informatiile contului tau </h2>
            <hr class="bg-primary mt-0 w-25"/>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Prenume:</div>
                <div class="text">{{ currentUser.firstName }}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Nume:</div>
                <div class="text">{{currentUser.lastName }}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Email:</div>
                <div class="text">{{ currentUser.email }}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Articole active: {{userCountArticles}}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Articole favorite: {{userCountFavArticles}}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="font-weight-bold">Articole in asteptare: {{userCountPendingArticles}}</div>
              </div>
            </div>
            <div class="profile-actions">
              <button (click)="updateUser()" class="btn btn-info">
                Editeaza
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #loggedOut> Trebuie sa fii autentificat :).</ng-template>