juice-shop/juice-shop

<!--
  ~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-card class="mat-elevation-z6 mat-own-card" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
          fxLayoutGap.lt-md="20px">
  <div fxLayout="column" fxLayoutGap="20px" fxFlex="50%">
    <h1 translate>TITLE_RECYCLE</h1>

    <div class="form-container" id="recycle-form">
      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_REQUESTOR</mat-label>
        <input [formControl]="requestorControl" type="text" matInput>
      </mat-form-field>

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_QUANTITY</mat-label>
        <input [formControl]="recycleQuantityControl" type="number" [placeholder]="'IN_LITERS_PLACEHOLDER' | translate"
               matInput>
        <mat-error *ngIf="recycleQuantityControl.invalid && recycleQuantityControl.errors.required" translate>
          MANDATORY_QUANTITY
        </mat-error>
        <mat-error
          *ngIf="recycleQuantityControl.invalid && (recycleQuantityControl.errors.min || recycleQuantityControl.errors.max)"
          translate [translateParams]="{range: '10-1000'}">INVALID_QUANTITY
        </mat-error>
      </mat-form-field>

      <app-address (emitSelection)="getMessage($event)" [addNewAddressDiv]="false" #addressComp
                   class="mat-elevation-z0"></app-address>

      <mat-form-field *ngIf="pickup.value && recycleQuantityControl.value > 100" appearance="outline">
        <mat-label translate>LABEL_PICKUP_DATE</mat-label>
        <input [formControl]="pickUpDateControl" matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
        <mat-error *ngIf="pickUpDateControl.invalid" translate>INVALID_DATE</mat-error>
      </mat-form-field>

      <mat-checkbox [formControl]="pickup" *ngIf="recycleQuantityControl.value > 100">{{'REQUEST_PICKUP' | translate}}
      </mat-checkbox>

    </div>

    <button type="submit" id="recycleButton"
            [disabled]="addressId === undefined || recycleQuantityControl.invalid || pickUpDateControl.invalid"
            mat-raised-button color="primary" (click)="save()"><i class="fas fa-paper-plane fa-lg"></i> {{'BTN_SUBMIT' |
      translate}}
    </button>

  </div>
  <div fxFlex="50%">
    <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="center">

      <h3 class="responsibility-header" translate>SECTION_PRESS_JUICE_RESPONSIBLY</h3>
      <mat-card fxLayout="row" fxLayoutGap="20px" class="mat-elevation-z0">
        <img mat-card-image [src]="topImage">
        <mat-card-content>
          <div>
            <small>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
              labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
              rebum.
            </small>
          </div>
        </mat-card-content>
      </mat-card>

      <mat-card fxLayout="row" fxLayoutGap="20px" class="mat-elevation-z0">
        <img mat-card-image [src]="bottomImage">
        <mat-card-content>
          <div>
            <small>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
              sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
              aliquyam erat, sed diam voluptua.
            </small>
          </div>
        </mat-card-content>
      </mat-card>

      <span class="fill-remaining-space"></span>

    </div>
  </div>
</mat-card>