<div *ngIf= "!mobile" class= "logo"></div>
<div *ngIf= "mobile" class= "mobile-logo"></div>
<div class="home d-flex justify-content-center">
   <div class="header">
      <span [ngClass]="!mobile? 'title' : 'mobile-title'">Create your trip</span>
      <br />
      <span *ngIf="!mobile" class="subtitle">{{!mobile? 'Adventurous travel in Rwanda and Uganda' : 'In Rwanda and Uganda'}}</span>
   </div>

   <!-- For desktop -->
   <div class="card custom-box-shadow">
      <div class="card-body">
         <form [formGroup]="form">
            <div [ngClass]="!mobile? 'form-row' : ''">
               <div class="col form-group">
                  <label for="arrivalPlace">Period</label>
                  <!-- Material is used but hidden -->
                  <mat-form-field class="date-input" appearance="fill" id="datepicker">
                     <mat-date-range-input [rangePicker]="picker" [min]="getDate()">
                        <input matStartDate formControlName="arrivalDate" placeholder="Arrival Date">
                        <input matEndDate formControlName="departureDate" placeholder="Departure Date">
                     </mat-date-range-input>
                     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                     <mat-date-range-picker #picker></mat-date-range-picker>

                     <mat-error *ngIf="form.controls.arrivalDate.hasError('matStartDateInvalid')">Invalid Arrival date</mat-error>
                     <mat-error *ngIf="form.controls.departureDate.hasError('matEndDateInvalid')">Invalid Departure date</mat-error>
                  </mat-form-field>
                  <!-- End of hidden material-->
                  <div class="input-group date-range" (click)="picker.open()">
                     <input type="text" class="form-control" placeholder="Arrival - Departure Date" aria-label="Arrival - Departure Date"
                        aria-describedby="range-addon" readonly [ngModel]="arrivalDate | dateRangeFormat: departureDate" [ngModelOptions]="{standalone: true}">
                     <div class="input-group-append calendar-append">
                        <span class="input-group-text" id="range-addon">
                           <i class="bi bi-calendar2-range"></i>
                        </span>
                     </div>
                  </div>
               </div>
               <div class="col form-group">
                  <label for="arrivalPlace">Arrival place</label>
                  <select class="form-control" id="arrivalPlace" formControlName="arrivalPlace" [(ngModel)]="defaultArrivalPlace">
                     <option *ngFor="let place of places" [value]="place"> {{place}} </option>
                  </select>
               </div>
               <div class="col form-group">
                  <label for="departurePlace">Departure place</label>
                  <select class="form-control" id="departurePlace" formControlName="departurePlace" [(ngModel)]="defaultDeparturePlace">
                     <option *ngFor="let place of places" [value]="place"> {{place}} </option>
                  </select>
               </div>
               <div class="col d-flex ">
                  <div class="form-group">
                     <label for="inputPersonAmount">Travelers</label>
                     <div class="input-group">
                        <input type="number" class="form-control travelers-input" [(ngModel)]="personDefault" [min]="personRange[0]" [max]="personRange[1]"
                           id="inputPersonAmount" formControlName="personAmount">
                     </div>
                  </div>
                  <button class="btn lets-go-btn" type="button" (click)="createTrip()">Let's Go!</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>

<!-- Footer -->
<footer *ngIf="!mobile" class="text-center text-lg-start bg-light text-muted">
   <div class="text-center p-2" style="background-color: rgba(0, 0, 0, 0.05);">
     © 2021 Responsible Travel Africa . 
     <a class="text-reset fw-bold" href="https://responsibletravelafrica.com/">responsibletravelafrica.com</a>
      . <a class="text-reset fw-bold" href="https://www.afriguideme.com/terms-and-conditions">Terms and conditions </a>
      . <a class="text-reset fw-bold" href="https://www.afriguideme.com/privacy-policy/">Privacy</a>
   </div>
   <!-- Copyright -->
 </footer>
 <!-- Footer -->

./home.component.scss

@import 'variables';
@import 'custom-date-picker';

.logo {
   position: absolute;
   top: 0;
   left: 0;
   width: 224px;
   height: 87px;
   margin: 25px;
   background-image: url("../../assets/logo.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: left top;
}

.header {
   background-color: transparent;
   color: white;
   text-align: center;
   margin-top: 125px;

   .title {
      font-family: 'Pacifico';
      font-size: 48pt;
   }

   .mobile-title {
      font-family: 'Pacifico';
      font-size: 30pt;
   }

   .subtitle {
      font-size: 28pt;
   }
}

.home {
   height: 94.9%;
   background-image: url("../../assets/image_22.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center bottom;

   .card {
      position: absolute;
      bottom: 90px;
      background-color: rgba(255, 255, 255, 0.8);
   }

   label {
      color: darkslategray;
      font-weight: 600;
   }

   .calendar-append {
      cursor: pointer;
   }

   .date-range {
      .form-control[readonly] {
         background-color: white;
         color: #495057;
      }
   }

   .travelers-input {
      border-radius: 0.25rem;
      min-width: 100px;
   }

   .lets-go-btn {
      height: 38px;
      margin-top: 32px;
      margin-left: 8px;
   }
}

@media only screen and (max-width: 500px) {
   .home {
      height: 100%;

      .card {
         bottom: 20px;
      }
   }
}