<h2>Achievements</h2>

<ul class="list-group" *ngIf="statistics">
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 500 views</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.views / 500 * 100" [striped]="true"
                    *ngIf="statistics?.views <= 500">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 100 views</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.views / 100 * 100" [striped]="true"
                    *ngIf="statistics?.views <= 100">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 10 views</div>
            <div id="wide">
                <ngb-progressbar *ngIf="statistics?.views <= 10" type="success" [value]="statistics?.views / 10 * 100" [striped]="true">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 500 downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / 500 * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= 500">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 100 downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / 100 * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= 100">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
    <li class="list-group-item justify-content-between align-items-center">
        <div id="parent">
            <div id="narrow">More than 10 downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / 10 * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= 10">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
</ul>

<!-- <button (click) = "getTotalNumberOfViews()" class="btn btn-primary"> Get number of views </button> -->


<!-- <ul class="list-group" *ngIf="statistics">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 500 views
        <span *ngIf="statistics?.views <= 500" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
        <fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 100 views
        <span *ngIf="statistics?.views <= 100" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
        <fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 10 views
        <span *ngIf="statistics?.views <= 10" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
        <fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 500 downloads
        <span *ngIf="statistics?.downloads <= 500"
            class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
        <fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 100 downloads
        <span *ngIf="statistics?.downloads <= 100"
            class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
        <fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        More than 10 downloads
        <span *ngIf="statistics?.downloads <= 10"
            class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
        <fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
    </li>
</ul> -->