datasurvey/src/main/webapp/app/entities/tienda/listar-tienda-plantilla/listar-tienda-plantilla.component.html

<div class="row">
  <div class="col">
    <div
      class="page-header-ui page-header-ui-dark bg-img-cover overlay overlay-60"
      style="background-image: url('../../content/img_datasurvey/survey-shop.png')"
    >
      <div class="page-header-ui-content py-5 position-relative">
        <div class="container px-5">
          <div class="row gx-5 justify-content-start">
            <div class="col-xl-8 col-lg-10 text-left" style="color: white">
              <div data-aos="fade-up">
                <h1 class="page-header-ui-title" style="color: white">¡Compre y utilice las plantillas!</h1>

                <h2>
                  Puede comprar sus plantillas mediante <b> PayPal </b>
                  <fa-icon [icon]="faCreditCard"></fa-icon>
                </h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-light py-10 container-encuestas">
      <div class="container px-0">
        <!--filtrado-->

        <div class="input-group">
          <div class="ds-filter ds-form">
            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
            <input class="ds-form-control" type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
          </div>
          <!--<div class="ds-filter">
            <select name="searchCategoria" class="form-control" [(ngModel)]="searchCategoria" style="width: 200px">
              <option value="" selected="selected" disabled="disabled">Filtrar por categoría</option>
              <option value="">Todas las categorías</option>
              <option *ngFor="let categoria of categorias" [value]="categoria.nombre">{{ categoria.nombre }}</option>
            </select>
          </div>-->

          <div class="ds-filter">
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="under25" name="materialExampleRadios" [value]="0" />
              <label for="under25" [(ngModel)]="searchPrecio">GRATIS</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="2550" name="materialExampleRadios" [value]="5" />
              <label for="2550" [(ngModel)]="searchPrecio"> $5 - $10</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="50100" name="materialExampleRadios" />
              <label for="50100" [(ngModel)]="searchPrecio">$10 - $20</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="100200" name="materialExampleRadios" />
              <label for="100200" [(ngModel)]="searchPrecio">$20 - $30</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="200above" name="materialExampleRadios" />
              <label [(ngModel)]="searchPrecio">Más de $30 </label>
            </div>
          </div>
        </div>

        <hr />

        <div class="container" *ngIf="plantillas && plantillas.length == 0">
          <h1 class="ds-title">Plantillas</h1>

          <hr />
          <div class="social-box">
            <h1>
              <fa-icon [icon]="faFileAlt"></fa-icon>
            </h1>
          </div>
        </div>

        <!--Inicio de los cards-->

        <div class="row gx-5" *ngIf="plantillas && plantillas.length > 0">
          <div
            class="col-xl-4 col-lg-4 col-md-6 mb-5"
            *ngFor="
              let plantilla of plantillas
                | filter: 'nombre':searchString
                | filter: 'categoria.nombre':searchCategoria
                | filter: 'precio':searchPrecio;
              trackBy: trackId
            "
          >
            <div class="card-encuesta lift h-100" [attr.data-id]="plantilla.id">
              <!--(dblclick)="openSurvey($event)"
             (click)="selectSurvey($event)"

-->
              <div class="card-body p-3">
                <div class="card-title mb-0">{{ plantilla.nombre }}</div>
                <div class="entity-body--row m-2">
                  <span class="tag mt-2" *ngIf="plantilla.precio">Precio: {{ plantilla.precio | currency }}</span>
                  <span class="tag mt-2" *ngIf="plantilla.precio == 0 || plantilla.precio == null">Precio: GRATIS</span>
                </div>

                <div class="entity-body--row m-2" *ngIf="plantilla.categoria != null">
                  <span class="mt-2">{{ plantilla.categoria.nombre | lowercase }}</span>
                </div>
                <div class="entity-body--row m-2" *ngIf="plantilla.descripcion != null">
                  <span class="mt-2">{{ plantilla.descripcion | lowercase }}</span>
                </div>
                <div class="text-xs text-gray-500">
                  <div class="entity-body">
                    <div class="entity-body--row m-2">
                      <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 class="ds-btn btn-outline-success btn-card" (click)="triggerPaypalDialog(plantilla)">
                        <fa-icon [icon]="faCreditCard"></fa-icon>&nbsp;&nbsp;Comprar con PayPal
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--Inicio de cards-->
</div>