<div id="register-layout">
    <div class="left">
        <div id="logo">
            <img class="logo" src="../../../assets/img/logo_hit_a_wod/haw_logo_250.png" alt="logo" />
            <img class="text" src="../../../assets/img/logo_hit_a_wod/haw_text_500.png" alt="logo" />
        </div>
        <div id="stepper">
            <div class="step" [ngClass]="{'active': step==1}">
                <span class="number">1.</span>
                <span class="title">Mi negocio</span>
            </div>
            <div class="step" [ngClass]="{'active': step==2}">
                <span class="number">2.</span>
                <span class="title">Mi usuario</span>
            </div>
            <div class="step" [ngClass]="{'active': step==3}">
                <span class="number">3.</span>
                <span class="title">Mi box</span>
            </div>
            <div class="step" [ngClass]="{'active': step==4}">
                <span class="number">4.</span>
                <span class="title">Mi plan</span>
            </div>
        </div>
        <router-outlet></router-outlet>
    </div>
    <div class="right">
        <div class="content" *ngIf="registerService.getPlans()">
            <div class="box plan-table">
                <div class="plan" *ngFor="let plan of registerService.getPlans()" [ngClass]="{'highlight': plan.is_highlighted}">
                    <h2>{{ plan.name }}</h2>
                    <p class="price-container">
                        <span class="price">
                            <span class="digits">{{ plan.total }}€</span>
                            <span class="month">/mes</span>
                        </span>
                        <span class="iva">IVA incluido</span>
                    </p>
                    <ul class="caracteristicas">
                        <li>
                            <div><img src="../../../assets/svg/{{ plan.is_highlighted ? 'checkmark-lila.svg' : 'checkmark-negro.svg' }}" /></div>
                            <span>Todas las características de Hit a Wod</span>
                        </li>
                        <li>
                            <div><img src="../../../assets/svg/{{ plan.is_highlighted ? 'checkmark-lila.svg' : 'checkmark-negro.svg' }}" /></div>
                            <span>{{ plan.n_athletes ? ('Hasta ' + plan.n_athletes + ' atletas') : 'Atletas ilimitados' }}</span>
                        </li>
                        <li>
                            <div><img src="../../../assets/svg/{{ plan.is_highlighted ? 'checkmark-lila.svg' : 'checkmark-negro.svg' }}" /></div>
                            <span>{{ plan.n_coaches ? ('Hasta ' + plan.n_coaches + ' coaches') : 'Coaches ilimitados' }}</span>
                        </li>
                        <li>
                            <div><img src="../../../assets/svg/{{ plan.is_highlighted ? 'checkmark-lila.svg' : 'checkmark-negro.svg' }}" /></div>
                            <span>{{ plan.n_admins ? ('Hasta ' + plan.n_admins + ' administradores') : 'Administradores ilimitados' }}</span>
                        </li>
                        <li>
                            <div><img src="../../../assets/svg/{{ plan.is_highlighted ? 'checkmark-lila.svg' : 'checkmark-negro.svg' }}" /></div>
                            <span>{{ plan.n_boxes ? ('Hasta ' + plan.n_boxes + ' boxes') : 'Boxes ilimitados' }}</span>
                        </li>
                    </ul>
                    <neu-button [routerLink]="[]" size="full-width" color="primary">Más información</neu-button>
                </div>
            </div>
        </div>
    </div>
</div>