<neu-container class="dialog">
    <h2>Nueva suscripción</h2>

    <div class="section">
        <label>Selecciona usuario:</label>
        <neu-autocomplete   
            placeholder="Busca un usuario"
            [(ngModel)]="user_id"
            (onInputChanged)="searchUsers($event)"
            [filterMinLength]="2">
            <neu-option *ngFor="let u of filtered_users" [value]="u.id">
                {{ u.name + ' ' + u.surnames + ' - ' + u.email }}
            </neu-option>
        </neu-autocomplete>
    </div>

    <div class="section">
        <label>Seleccionar tarifa:</label>
        <neu-select [(ngModel)]="pricing_id">
            <neu-option *ngFor="let p of pricings" [value]="p.id">{{ p.name + ' - ' + (p.price | currency) }}</neu-option>
        </neu-select>
        <div class="extra" *ngIf="pricing_id">
            <neu-checkbox #matricula="ngModel" ngModel>Añadir matrícula</neu-checkbox>
            <neu-input [(ngModel)]="matricula_amount" *ngIf="matricula.value==true" type="number" placeholder="Matrícula en €" min="1" step="1"></neu-input>
        </div>
        <div class="extra" *ngIf="discounts">
            <neu-checkbox #discount="ngModel" ngModel>Añadir descuento</neu-checkbox>
            <neu-select [(ngModel)]="discount_id" *ngIf="discount.value === true" placeholder="Selecciona un descuento">
                <neu-option *ngFor="let d of discounts" [value]="d.id">{{ d.description + ' (' + (d.price ? (d.price | currency) : ('-' + d.percentage + '%')) +')' }}</neu-option>
            </neu-select>
        </div>
    </div>

    <div class="section">
        <label *ngIf="roles">Seleccionar rol:</label>
        <neu-select [(ngModel)]="role_id" *ngIf="roles">
            <neu-option *ngFor="let r of roles" [value]="r.id">{{ r.name }}</neu-option>
        </neu-select>
    </div>

    <div style="margin-bottom: 20px">
        <neu-checkbox [(ngModel)]="accept">El usuario acepta los <a target="_blank" routerLink="/politica-de-privacidad" [queryParams]="{company_id: company_id}">Términos y Condiciones</a> de Hit a Wod
        </neu-checkbox><br>
    </div>

    <div class="buttons">
        <neu-button (click)="close.emit(null)">Cancelar</neu-button>
        <neu-button color="primary" [disabled]="!role_id || !pricing_id || !user_id || !box_id || !accept" (neu_click)="createSubscription()">Crear suscripción</neu-button>
    </div>
</neu-container>