<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 {{config.views[2]}} views</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.views / config.views[2] * 100" [striped]="true"
                    *ngIf="statistics?.views <= config.views[2]">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > config.views[2]" 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 {{config.views[1]}} views</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.views / config.views[1] * 100" [striped]="true"
                    *ngIf="statistics?.views <= config.views[1]">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > config.views[1]" 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 {{config.views[0]}} views</div>
            <div id="wide">
                <ngb-progressbar *ngIf="statistics?.views <= config.views[0]" type="success" [value]="statistics?.views / config.views[0] * 100" [striped]="true">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.views > config.views[0]" 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 {{config.downloads[2]}} downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[2] * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= config.downloads[2]">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[2]" 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 {{config.downloads[1]}} downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[1] * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= config.downloads[1]">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[1]" 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 {{config.downloads[0]}}downloads</div>
            <div id="wide">
                <ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[0] * 100" [striped]="true"
                    *ngIf="statistics?.downloads <= config.downloads[0]">
                </ngb-progressbar>
                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[0]" class="greeniconcolor"></fa-icon>
            </div>
        </div>
    </li>
</ul>

<!-- <button (click) = "buildAchievements()" 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> -->