<div class="position-relative">
    <app-overlay [isActive]="isLoading"></app-overlay>

    <h4 class="tab-heading" *ngIf="!careerProfile?.Template">Select the design template for your Career Profile</h4>

    <div class="selected-template" *ngIf="careerProfile?.Template">
        <img [src]="apiBase + careerProfile.Template.FullImageURI" alt="">
    </div>


    <div class="text-center mt-3">
        <button pButton [label]="careerProfile?.Template ? 'Choose another template' : 'Please choose a profile template'" class="ui-button-info rounded-btn"
                (click)="showTemplates()"></button>
    </div>
</div>




<div class="template-picker-wrapper" [ngClass]="{show: templatesShown}">

    <div class="close-templates" (click)="templatesShown = false;">
        <div class="fa fa-times"></div>
    </div>

    <div class="templates">

        <p-carousel [value]="careerProfile?.Candidate?.AllTempletes" [numVisible]="2" styleClass="template-picker">

            <ng-template let-template pTemplate="item">
                <div class="template-wrapper">

                    <div class="template-img-wrapper">
                        <div class="template-img">
                            <img [src]="template.ImgPath" alt="">
                        </div>
                        <div class="template-actions">
                            <button pButton [label]="template.CanUse ? 'Select this template' : 'Upgrade to premium'"
                                    class="ui-button-info rounded-btn" (click)="selectTemplate(template)">
                            </button>
                        </div>
                    </div>

                    <div class="template-info">
                        <div class="template-title">{{template.Name}}</div>
                        <div class="template-description">{{template.Description}}</div>
                    </div>

                </div>
            </ng-template>
        </p-carousel>

    </div>
</div>
