<h2>Seleccionar plan</h2>
<p>Ha llegado el momento de elegir tu plan. Elige el plan que más se ajuste a tu empresa. Recuerda que siempre estás a tiempo de cambiarlo.</p>

<div id="loading" *ngIf="loadingPlans || loadingLegal" style="display:flex; justify-content: center; align-items: center;">
    <img src="../../../../assets/svg/loading.svg" alt="loading" width="60"/>
</div>

<p *ngIf="error">{{ error_text }}</p>

<div id="content" *ngIf="!(loadingPlans && loadingLegal) && !error && plans && basic_legal">
    <h3>Escoge tu suscripción</h3>
    <div id="subscriptions">
        <div>
            <neu-select [ngModel]="selected_plan" (ngModelChange)="selectPlan($event)" placeholder="Seleccionar plan">
                <neu-option *ngFor="let p of plans" [value]="p">
                    <b>{{ p.name }}</b> - {{ p.total | currency }}/mes
                </neu-option>
            </neu-select>
        </div>
        <ul *ngIf="selected_plan">
            <li>
                <svg class="check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
                <span>Todas las características</span>
            </li>
            <li>
                <svg class="check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
                <span>
                    {{ 
                        (selected_plan.n_athletes) ? 
                        'Hasta ' + selected_plan.n_athletes + ' atletas' :
                        'Atletas ilimitados'
                    }}
                </span>
            </li>
            <li>
                <svg class="check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
                <span>
                    {{ 
                        selected_plan.n_coaches ? 
                        'Hasta ' + selected_plan.n_coaches + ' coaches' :
                        'Coaches ilimitados'
                    }}
                </span>
            </li>
            <li>
                <svg class="check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
                <span>
                    {{ 
                        selected_plan.n_admins ? 
                        'Hasta ' + selected_plan.n_admins + ' administradores' :
                        'Administradores ilimitados'
                    }}
                </span>
            </li>
            <li>
                <svg class="check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>
                <span>
                    {{ 
                        selected_plan.n_boxes ? 
                        'Hasta ' + selected_plan.n_boxes + ' boxes' :
                        'Boxes ilimitados'
                    }}
                </span>
            </li>
        </ul>
    </div>

    <h3>Política de protección de datos</h3>
    <p>Tus datos están seguros con Hit a Wod. Aquí tienes un resumen de nuestra política de protección de datos.</p>
    <table class="pdp">
        <tr><th colspan="2">Información básica sobre protección de datos</th></tr>
        <tr *ngFor="let opt of basic_legal">
            <th>{{ opt.header }}</th>
            <td [innerHTML]="opt.data + ' <a href=\'' + opt.link + '\'>+Info</a>'"></td>
        </tr>
    </table>
    <div class="field checkbox" style="width: 100%; text-align: left;">
        <neu-checkbox [(ngModel)]="accept_legal" name="accept_legal">Acepto el tratamiento de mis datos personales y corporativos de conformidad con la <a [routerLink]="['/politica-de-privacidad']">Política de Privacidad</a>.</neu-checkbox>
    </div>

    <div class="field submit" *ngIf="!finish">
        <neu-button type="button" [routerLink]="['/register', 'box']">Atrás</neu-button>
        <neu-button type="button" color="primary" (neu_click)="register()" [disabled]="!accept_legal || !selected_plan">Registrar y pagar</neu-button>
    </div>

    <div class="field submit" *ngIf="finish">
        <p>Has iniciado tu suscripción correctamente. Ya puedes iniciar sesión.</p>
        <neu-button type="button" color="primary" (neu_click)="login()">Iniciar sesión</neu-button>
    </div>
</div>


<div id="payment-wrapper" *ngIf="registering">
    <div id="payment">
        <div *ngIf="registering_company || registering_paying" id="loading" style="display:flex; justify-content: center; align-items: center; flex-direction: column;">
            <p *ngIf="registering_company">Registrando...</p>
            <p *ngIf="registering_paying">Realizando pago...</p>
            <img src="../../../../assets/svg/loading.svg" alt="loading" width="60"/>
        </div>
        <iframe *ngIf="registering_payment_method" [src]="(register_payment_method_url + '/secure/' + registerResponse.company.id + '/payment-methods?token=' + registerResponse.token) | safe" style="width: 100%; height: 100%;"></iframe>
        <div id="error" *ngIf="registering_error">
            <p>{{ registering_error_text }}</p>
        </div>
    </div>
</div>