RomainMarecat/slate

<div class="app_my_account container mb-5">
  <div class="row">
    <div class="col-12">
      <mat-card class="my-5 px-0">
        <div class="row">
          <div class="col-12">
            <h4 class="d-flex align-items-center mb-5">
              <img class="user_pic circle valign"
                   *ngIf="user?.user_metadata?.media?.url"
                   [src]="user?.user_metadata?.media?.url">
              <span class="d-flex align-items-center ml-1" i18n>My account</span>
            </h4>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <form [formGroup]="form"
                  (ngSubmit)="saveProfile()">
              <table class="table table-striped">
                <tbody>
                <tr>
                  <td class="property-title" i18n="my account user email">Email</td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <mat-form-field appearance="outline"
                                    class="col-6">
                      <input formControlName="email"
                             matInput
                             name="email"
                             type="email">
                    </mat-form-field>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title" i18n="my account user firstname">Firstname</td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <mat-form-field appearance="outline"
                                    class="col-6">
                      <input formControlName="firstname"
                             matInput
                             name="firstname"
                             type="text"
                             i18-placeholder="Enter your firstname"
                             placeholder="Enter your firstname">
                    </mat-form-field>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title" i18n="my account user lastname">Lastname</td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <mat-form-field appearance="outline"
                                    class="col-6">
                      <input formControlName="lastname"
                             matInput
                             name="lastname"
                             type="text"
                             i18-placeholder="Enter your lastname"
                             placeholder="Enter your lastname">
                    </mat-form-field>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title" i18n="my account user phone">Phone</td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <mat-form-field appearance="outline"
                                    formGroupName="phone"
                                    class="col-6">
                      <input formControlName="number"
                             matInput
                             name="phone"
                             type="tel"
                             i18-placeholder="Enter your phone"
                             placeholder="Enter your phone">
                    </mat-form-field>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title" i18n="my account user birthday">Birthday</td>
                  <td class="pb-0 pt-1 pr-1 pl-1 row m-0">
                    <div class="col-2 pt-1">
                      <mat-datepicker-toggle [for]="birthdayPicker"></mat-datepicker-toggle>
                    </div>
                    <mat-form-field appearance="outline"
                                    class="col-4">
                      <input formControlName="birthday"
                             name="birthday"
                             placeholder="Enter your birthday"
                             i18-placeholder="Enter your birthday"
                             matInput
                             [max]="maxDate"
                             [matDatepicker]="birthdayPicker">
                      <mat-datepicker #birthdayPicker
                                      [startAt]="startDate"
                                      [touchUi]="true">
                      </mat-datepicker>
                    </mat-form-field>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title" i18n="my account user gender">Gender</td>
                  <td class="pb-0 pt-3 pr-1 pl-1">
                    <div class="row">
                      <div class="col-6">
                        <mat-radio-group formControlName="gender"
                                         name="gender">
                          <mat-radio-button [value]="true"
                                            class="px-2"
                                            i18n="male label">
                            Male
                          </mat-radio-button>
                          <mat-radio-button [value]="false"
                                            class="px-2"
                                            i18n="female label">
                            Female
                          </mat-radio-button>
                        </mat-radio-group>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="property-title"
                      i18n="my account user nationality">
                    Nationality
                  </td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <img src="/assets/images/flags/country/{{user.user_metadata.nationality|lowercase}}.svg"
                         width="24px"
                         alt="{{user.user_metadata.nationality}} flag"
                         *ngIf="user?.user_metadata?.nationality">
                    <app-select-nationality placeholder="Enter your nationality"
                                            [parentForm]="form?.get('user_metadata')"
                                            formInnerControlName="nationality"></app-select-nationality>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title"
                      i18n="my account user language">
                    Language
                  </td>
                  <td class="pb-0 pt-1 pr-1 pl-1">
                    <img src="/assets/images/flags/language/{{user.user_metadata.mother_lang|lowercase}}.svg"
                         width="24px"
                         alt="{{user.user_metadata.mother_lang}} flag"
                         *ngIf="user?.user_metadata?.mother_lang">
                    <app-select-language placeholder="Enter your lang"
                                                [parentForm]="form?.get('user_metadata')"
                                                formInnerControlName="mother_lang"></app-select-language>
                  </td>
                </tr>
                <tr formGroupName="user_metadata">
                  <td class="property-title"
                      i18n="my account user address">
                    Address
                  </td>
                  <td formGroupName="address"
                      class="pb-0 pt-1 pr-1 pl-1">
                    <div class="row">
                      <mat-form-field class="col-6"
                                      appearance="outline">
                        <input formControlName="street"
                               matInput
                               name="street"
                               type="text"
                               i18-placeholder="Enter your street"
                               placeholder="Enter your street">
                      </mat-form-field>
                    </div>
                    <div class="row">
                      <mat-form-field class="col-3"
                                      appearance="outline">
                        <input formControlName="zipcode"
                               matInput
                               name="zipcode"
                               type="text"
                               i18-placeholder="Enter your zip code"
                               placeholder="Enter your zip code">
                      </mat-form-field>
                      <mat-form-field class="col-3"
                                      appearance="outline">
                        <input formControlName="city"
                               matInput
                               name="city"
                               type="text"
                               i18-placeholder="Enter your city"
                               placeholder="Enter your city">
                      </mat-form-field>
                      <div class="col-6">
                        <app-select-nationality placeholder="Enter your country"
                                                [parentForm]="form?.get('user_metadata').get('address')"
                                                formInnerControlName="country"></app-select-nationality>
                      </div>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div class="row">
                <div class="offset-4 col-4">
                  <button type="submit"
                          [disabled]="form.invalid"
                          i18n="Save"
                          class="w-100"
                          mat-raised-button
                          color="primary"
                          role="button">
                    Save
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </mat-card>
    </div>
    <div class="row">
      <div class="col-12"
           *ngIf="rows">
        <div class="card"
             style="height: 100%">
          <div class="row d-flex align-items-center">
            <div class="col-12">
              <h4 class="d-flex align-items-center m-0 mt05">
                <i class="material-icons">payment</i>
                <span class="valign ml025" i18n="my orders">My orders</span>
              </h4>
            </div>
          </div>
          <ngx-datatable class="material fullscreen mb5" style="box-shadow: none !important;
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;" #table
                         [rows]="rows"
                         [columns]="columns"
                         [sortType]="'multi'"
                         [columnMode]="'flex'"
                         [footerHeight]="50"
                         [rowHeight]="'auto'"
                         [limit]="15"
                         [selected]="selected"
                         [selectionType]="'single'"
                         (activate)="onActivate($event)"
                         (select)="onSelect($event)">
            <ngx-datatable-column [flexGrow]="1"
                                  prop="createdAt"
                                  i18n-name="Booking payed on"
                                  name="Booking payed on">
              <ng-template let-row="row"
                           let-value="value"
                           ngx-datatable-cell-template>
                <span class="chip chip-squared green lighten-2 silver-border" *ngIf="row.isPayed">{{value|date}}</span>
                <span class="chip chip-squared orange lighten-2 silver-border" *ngIf="!row.isPayed"
                      i18n="booking pending">Booking pending</span>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [flexGrow]="1"
                                  prop="mono"
                                  i18n-name="Mono"
                                  name="Mono">
              <ng-template let-row="row"
                           let-value="value"
                           ngx-datatable-cell-template>
                <span class="grey-text text-darken-1">{{value.firstname}} {{value.lastname}}</span>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [flexGrow]="1"
                                  prop="price"
                                  i18n-name="Booking price"
                                  name="Price">
              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                <span class="grey-text text-darken-1">{{value ? value : 0}}€</span>
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </div>
    </div>
  </div>
</div>