<div class="container p-4">
    <div class="card">
        <div class="card-header">
            <h2>Crear item agenda</h2>
        </div>
        <div class="card-body">
            <form [formGroup]="form" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <!-- <label for="exampleInputEmail1">Titulo item (*)</label> -->
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Titulo Item (*)" formControlName="title" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
                    <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                        <div *ngIf="f.title.errors.required">El título es requerido.</div>
                    </div>
                </div>
                <div class="form-group">
                    <!-- <label for="exampleFormControlTextarea1">Example textarea</label> -->
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Descripción (*)" formControlName="description" [ngClass]="{ 'is-invalid': submitted && f.description.errors }"></textarea>
                    <div *ngIf="submitted && f.description.errors" class="invalid-feedback">
                        <div *ngIf="f.description.errors.required">La descripción es requerida.</div>
                    </div>
                </div>
                <hr>
                <h4>Votación</h4>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio1" value=false formControlName="votable" [ngClass]="{ 'is-invalid': submitted && f.votable.errors }">
                    <label class="form-check-label" for="inlineRadio1">Sin votación</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio2" value=true formControlName="votable" [ngClass]="{ 'is-invalid': submitted && f.votable.errors }">
                    <label class="form-check-label" for="inlineRadio2">Con votación</label>
                </div>
                <div *ngIf="submitted && f.votable.errors" class="invalid-feedback">
                    <div *ngIf="f.votable.errors.required">La descripción es requerida.</div>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Especial de Clase</label>
                </div>
                <div class="form-group" *ngIf="displayItemType">
                    <select class="form-control" id="exampleFormControlSelect1" formControlName="ItemType" [ngClass]="{ 'is-invalid': submitted && f.ItemType.errors }">
                        <option disabled selected value>Tipo de votación</option>
                        <option value="1">Simple</option>
                        <option value="2">Acumulativa</option>
                    </select>
                    <div *ngIf="submitted && f.ItemType.errors" class="invalid-feedback">
                        <div *ngIf="f.ItemType.errors.required">El tipo de votación es requerido.</div>
                    </div>
                </div>
                <h4>
                    Opciones:
                    <button class="btn btn-primary btn-sm rounded-circle" (click)="addOption()" type="button">
                        <i class="fa fa-plus"></i>
                    </button>
                </h4>
                <div *ngFor="let option of votingOptions; let i = index" class="form-group" formControlName="votingOptions">
                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Opción (*)">
                </div>
                <button type="submit" class="btn btn-primary">Crear</button>
            </form>
        </div>
    </div>
</div>