<div>
  <h2 id="page-heading" data-cy="PlantillaHeading">
    <div class="d-flex flex-sm-row flex-column justify-content-between align-items-center">
      <div>
        <span class="ds-title" jhiTranslate="dataSurveyApp.plantilla.home.title">Encuestas</span>
        <p class="ds-subtitle">Administre las plantillas comprables de la tienda</p>
      </div>

      <div>
        <button class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
          <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
          <span jhiTranslate="dataSurveyApp.plantilla.home.refreshListLabel">Refresh List</span>
        </button>

        <button
          *ngIf="isAdmin() && isAuthenticated()"
          type="button"
          class="ds-btn ds-btn--primary"
          (click)="resetCreateTemplateForm()"
          data-toggle="modal"
          data-target="#crearPlantilla"
        >
          Crear plantilla
        </button>
      </div>
    </div>
  </h2>

  <!-- <jhi-alert-error></jhi-alert-error>

  <jhi-alert></jhi-alert> -->

  <div class="alert alert-warning" id="no-result" *ngIf="plantillas?.length === 0">
    <span jhiTranslate="dataSurveyApp.plantilla.home.notFound">No templates found</span>
  </div>

  <div class="table-responsive" id="entities" *ngIf="plantillas && plantillas.length > 0">
    <table class="table table-striped" aria-describedby="page-heading">
      <thead>
        <tr>
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.nombre">Nombre</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.descripcion">Descripcion</span></th>
          <!-- <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.fechaCreacion">Fecha Creacion</span></th> -->
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.fechaPublicacionTienda">Fecha Publicacion Tienda</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.estado">Estado</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.precio">Precio</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.plantilla.categoria">Categoria</span></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let plantilla of plantillas; trackBy: trackId" data-cy="entityTable">
          <td>{{ plantilla.nombre }}</td>
          <td>{{ plantilla.descripcion }}</td>
          <!-- <td>{{ plantilla.fechaCreacion | formatMediumDatetime }}</td> -->
          <td *ngIf="plantilla.fechaPublicacionTienda">{{ plantilla.fechaPublicacionTienda | formatShortDatetime | titlecase }}</td>
          <td *ngIf="!plantilla.fechaPublicacionTienda">No establecida</td>
          <td jhiTranslate="{{ 'dataSurveyApp.EstadoPlantilla.' + plantilla.estado }}">{{ plantilla.estado }}</td>
          <td *ngIf="plantilla.precio! > 0">${{ plantilla.precio | number: '1.2' }}</td>
          <td *ngIf="plantilla.precio! === 0">Gratis</td>
          <td>{{ plantilla.categoria?.nombre }}</td>
          <td class="text-right">
            <div class="btn-group">
              <button
                type="submit"
                [routerLink]="['/plantilla', plantilla.id, 'view']"
                class="ds-btn ds-btn--secondary btn-sm"
                data-cy="entityDetailsButton"
              >
                <fa-icon icon="eye"></fa-icon>
                <span class="d-none d-md-inline">Vista previa</span>
              </button>

              <button
                type="submit"
                [routerLink]="['/plantilla', plantilla.id, 'edit']"
                class="ds-btn ds-btn--primary btn-sm"
                data-cy="entityEditButton"
              >
                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
              </button>

              <button type="submit" (click)="delete(plantilla)" class="ds-btn ds-btn--danger btn-sm" data-cy="entityDeleteButton">
                <fa-icon icon="times"></fa-icon>
                <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Modal -->
<div
  class="modal fade ds-modal"
  id="crearPlantilla"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form
        autocomplete="off"
        class="ds-form"
        name="templateCreateForm"
        role="form"
        novalidate
        (ngSubmit)="save()"
        [formGroup]="templateCreateForm"
      >
        <div class="modal-header">
          <h1 class="modal-title" id="exampleModalLongTitle">Crear Plantilla</h1>
        </div>
        <div class="modal-body">
          <!-- Template Registration Modal -->
          <div>
            <div class="form-group">
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.nombre" for="field_nombre">Nombre</label>
              <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
              <div
                *ngIf="
                  templateCreateForm.get('nombre')!.invalid &&
                  (templateCreateForm.get('nombre')!.dirty || templateCreateForm.get('nombre')!.touched)
                "
              >
                <small
                  class="form-text text-danger"
                  *ngIf="templateCreateForm.get('nombre')?.errors?.required"
                  jhiTranslate="entity.validation.required"
                >
                  This field is required.
                </small>
                <small
                  class="form-text text-danger"
                  *ngIf="templateCreateForm.get('nombre')?.errors?.minlength"
                  jhiTranslate="entity.validation.minlength"
                  [translateValues]="{ min: 1 }"
                >
                  This field is required to be at least 1 characters.
                </small>
                <small
                  class="form-text text-danger"
                  *ngIf="templateCreateForm.get('nombre')?.errors?.maxlength"
                  jhiTranslate="entity.validation.maxlength"
                  [translateValues]="{ max: 50 }"
                >
                  This field cannot be longer than 50 characters.
                </small>
              </div>
            </div>

            <div class="form-group">
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.descripcion" for="field_descripcion"
                >Descripcion</label
              >
              <input
                type="text"
                class="form-control"
                name="descripcion"
                id="field_descripcion"
                data-cy="descripcion"
                formControlName="descripcion"
              />
            </div>

            <div class="form-group">
              <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.precio" for="field_precio">Precio</label>
              <input type="number" min="0" class="form-control" name="precio" id="field_precio" data-cy="precio" formControlName="precio" />
              <div
                *ngIf="
                  templateCreateForm.get('precio')!.invalid &&
                  (templateCreateForm.get('precio')!.dirty || templateCreateForm.get('precio')!.touched)
                "
              >
                <small
                  class="form-text text-danger"
                  *ngIf="templateCreateForm.get('precio')?.errors?.required"
                  jhiTranslate="entity.validation.required"
                >
                  This field is required.
                </small>
                <small
                  class="form-text text-danger"
                  [hidden]="!templateCreateForm.get('precio')?.errors?.number"
                  jhiTranslate="entity.validation.number"
                >
                  This field should be a number.
                </small>
                <small
                  class="form-text text-danger"
                  [hidden]="!templateCreateForm.get('precio')?.errors?.min"
                  jhiTranslate="entity.validation.minoigual"
                >
                  This field should be great than or equals to 0.
                </small>
              </div>
            </div>

            <div class="form-group">
              <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.categoria" for="field_categoria">Categoria</label>
              <select class="form-control" id="field_categoria" data-cy="categoria" name="categoria" formControlName="categoria">
                <option [ngValue]="null"></option>
                <option
                  [ngValue]="
                    categoriaOption.id === templateCreateForm.get('categoria')!.value?.id
                      ? templateCreateForm.get('categoria')!.value
                      : categoriaOption
                  "
                  *ngFor="let categoriaOption of categoriasSharedCollection; trackBy: trackCategoriaById"
                >
                  {{ categoriaOption.nombre }}
                </option>
              </select>
              <div
                *ngIf="
                  templateCreateForm.get('categoria')!.invalid &&
                  (templateCreateForm.get('categoria')!.dirty || templateCreateForm.get('categoria')!.touched)
                "
              >
                <small
                  class="form-text text-danger"
                  *ngIf="templateCreateForm.get('categoria')?.errors?.required"
                  jhiTranslate="entity.validation.required"
                >
                  This field is required.
                </small>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <input id="createAnother" type="checkbox" (change)="createAnotherTemplateChange($event)" />
          <label for="createAnother">Crear otra</label>
          <button id="cancelBtn" type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
            <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
          </button>
          <button
            type="submit"
            id="save-entity"
            data-cy="entityCreateSaveButton"
            class="ds-btn ds-btn--primary"
            [disabled]="templateCreateForm.invalid || isSaving"
          >
            <span jhiTranslate="entity.action.create">Create</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
