<div class="plans" [class.has-recommended]="hasRecommendedPlan">
    <div class="plan" *ngFor="let plan of getAllPlans(); last as last; first as first" [class.recommended]="plan.recommended" [class.last]="last" [class.first]="first">
        <div class="name">{{plan.name}}</div>
        <div class="price-box" *ngIf="!plan.free">
            <span class="number">{{plan.amount | currency:plan.currency}}</span>
            <span class="interval"> / {{plan.interval | trans}}</span>
        </div>
        <div class="price-box" *ngIf="plan.free" trans>Free</div>
        <plan-features-list [plan]="plan"></plan-features-list>
        <button class="select-plan-button" (click)="selectPlan(plan)" mat-raised-button *ngIf="plan.recommended" [disabled]="plan.free || userSubscribedToPlan(plan)" color="accent">
            {{ (userSubscribedToPlan(plan) ? 'Your Current Plan' : 'Choose Plan') | trans }}
        </button>
        <button class="select-plan-button" (click)="selectPlan(plan)" mat-stroked-button color="accent" *ngIf="!plan.recommended" [disabled]="plan.free || userSubscribedToPlan(plan)">
            {{ (userSubscribedToPlan(plan) ? 'Your Current Plan' : 'Choose Plan') | trans }}
        </button>
    </div>
</div>
