<material-navbar></material-navbar>

<div class="bg-wrapper" [style.background-image]="getBackground()">
    <mat-horizontal-stepper class="container main-content" [linear]="true">
        <ng-template matStepperIcon="edit">
            <mat-icon svgIcon="edit" class="size-16"></mat-icon>
        </ng-template>

        <mat-step [label]="'Subscription plan' | trans" [completed]="state.initialPlan">
            <select-plan-panel (selected)="nextStep()"></select-plan-panel>
            <contact-widget></contact-widget>
        </mat-step>

        <mat-step [label]="'Subscription interval' | trans" [completed]="state.selectedPlan">
            <select-plan-period-panel [showSidebar]="true" (selected)="nextStep()"></select-plan-period-panel>
        </mat-step>

        <mat-step [label]="'Payment' | trans" [completed]="false">
            <div class="step-container payment-step">
                <div class="left-col">
                    <create-subscription-panel [plan]="state.selectedPlan" (loading)="loading = $event" (completed)="onCompleted()"></create-subscription-panel>
                </div>

                <upgrade-page-aside [plan]="state.selectedPlan" class="right-col"></upgrade-page-aside>
            </div>

            <p class="legal-info" trans>You authorise {{settings.get('branding.site_name')}} to charge you automatically every month, until you cancel your subscription. You consent to get access to your {{settings.get('branding.site_name')}} subscription immediately, and acknowledge that refunds are only available within 14 days and provided you haven't accessed {{settings.get('branding.site_name')}}. You will be able to cancel your subscription at any time from your profile page.</p>
        </mat-step>
    </mat-horizontal-stepper>
</div>

<loading-indicator class="overlay" [isVisible]="loading"></loading-indicator>