<div class="container-fluid" style="padding-left: 3%; padding-right: 3%; max-width: 1700px;">
    <h2>{{ 'achievements.title' | translate}}</h2>

    <h3>{{ 'achievements.toComplete' | translate}}</h3>
    <p></p>
    <ul class="list-group" *ngIf="statistics">
        <li *ngIf="statistics?.views > config.views[1] && statistics?.views <= config.views[2]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{
                        'achievements.views' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success" [value]="statistics?.views / config.views[2] * 100"
                                    [striped]="true">{{statistics?.views}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="goldiconcolor"></fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li *ngIf="statistics?.views > config.views[0] && statistics?.views <= config.views[1]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[1]}} {{
                        'achievements.views' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success" [value]="statistics?.views / config.views[1] * 100"
                                    [striped]="true">{{statistics?.views}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="silvericoncolor"></fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li *ngIf="statistics?.views <= config.views[0]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{
                        'achievements.views' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success" [value]="statistics?.views / config.views[0] * 100"
                                    [striped]="true">{{statistics?.views}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="bronzeiconcolor"></fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li *ngIf="statistics?.downloads > config.downloads[1] && statistics?.downloads <= config.downloads[2]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} {{
                        'achievements.downloads' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success"
                                    [value]="statistics?.downloads / config.downloads[2] * 100" [striped]="true">
                                    {{statistics?.downloads}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="goldiconcolor"></fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li *ngIf="statistics?.downloads > config.downloads[0] && statistics?.downloads <= config.downloads[1]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[1]}} {{
                        'achievements.downloads' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success"
                                    [value]="statistics?.downloads / config.downloads[1] * 100" [striped]="true">
                                    {{statistics?.downloads}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="silvericoncolor">
                                </fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li *ngIf="statistics?.downloads <= config.downloads[0]"
            class="list-group-item justify-content-between align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} {{
                        'achievements.downloads' |
                        translate}}</div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-11">
                                <ngb-progressbar type="success"
                                    [value]="statistics?.downloads / config.downloads[0] * 100" [striped]="true">
                                    {{statistics?.downloads}}
                                </ngb-progressbar>
                            </div>
                            <div class="col-1">
                                <fa-icon icon="trophy" class="bronzeiconcolor">
                                </fa-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div  *ngIf="statistics?.downloads > config.downloads[2] &&  statistics?.views > config.views[2]" >  {{ 'achievements.finished' | translate}} </div>

    <p></p>
    <h3>{{ 'achievements.completed' | translate}}</h3>
    <p></p>
    <div class="grid-container" *ngIf="statistics">

        <div class=" justify-content-between align-items-center">

            <fa-icon *ngIf="statistics?.views > config.views[0] || statistics?.downloads > config.downloads[0]"
                [ngbTooltip]="helpViewsBronze" icon="trophy" class="bronzeiconcolor big-icon"></fa-icon>


            <ng-template #helpViewsBronze> Bronce achievements </ng-template>

            <div class="justify-content-between align-items-center">

                <div class="badge" *ngIf="statistics?.views > config.views[0]">
                    {{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{ 'achievements.views' |
                    translate}}
                </div>

                <br>

                <div class="badge" *ngIf="statistics?.downloads > config.downloads[0]">
                    {{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} {{ 'achievements.downloads' |
                    translate}}
                </div>

            </div>

        </div>

        <div class="justify-content-between align-items-center">

            <fa-icon *ngIf="statistics?.views > config.views[1] || statistics?.downloads > config.downloads[1]"
                [ngbTooltip]="helpViewsSilver" icon="trophy" class="silvericoncolor big-icon"></fa-icon>

            <ng-template #helpViewsSilver> Silver Achievements </ng-template>

            <div class="justify-content-between align-items-center">

                <div class="badge" *ngIf="statistics?.views > config.views[1]">
                    {{ 'achievements.moreThan' | translate}} {{config.views[1]}} {{ 'achievements.views' |
                    translate}}
                </div>

                <br>

                <div class="badge" *ngIf="statistics?.downloads > config.downloads[1]">
                    {{ 'achievements.moreThan' | translate}} {{config.downloads[1]}} {{ 'achievements.downloads' |
                    translate}}
                </div>

            </div>



        </div>


        <div class=" justify-content-between align-items-center">

            <fa-icon *ngIf="statistics?.views > config.views[2] || statistics?.downloads > config.downloads[2]"
                [ngbTooltip]="helpViewsGold" icon="trophy" class="goldiconcolor big-icon"></fa-icon>

            <ng-template #helpViewsGold> Gold Achievements</ng-template>
            <div class="justify-content-between align-items-center">


                <div class="badge" *ngIf="statistics?.views > config.views[2]">
                    {{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{ 'achievements.views' |
                    translate}}
                </div>

                <br>

                <div class="badge" *ngIf="statistics?.downloads > config.downloads[2]">
                    {{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} {{ 'achievements.downloads' |
                    translate}}
                </div>

            </div>
        </div>

    </div>
    <div  *ngIf="statistics?.downloads < config.downloads[0] &&  statistics?.views < config.views[0]" >  {{ 'achievements.none' | translate}} </div>
</div>