<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
  <!-- Header -->
  <div
    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
  >
    <div class="text-lg font-medium">회원정보수정</div>
    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
      <mat-icon
        class="text-current"
        [svgIcon]="'heroicons_outline:x'"
      ></mat-icon>
    </button>
  </div>

  <fuse-alert
    class="mt-8 -mb-4"
    *ngIf="showAlert"
    [appearance]="'outline'"
    [showIcon]="false"
    [type]="alert.type"
    [@shake]="alert.type === 'error'"
  >
    {{ alert.message }}
  </fuse-alert>

  <div class="flex-auto p-6 sm:p-10">
    <div class="max-w-3xl">
      <div class="flex flex-col p-8 pt-0">
        <!-- Compose form -->
        <form
          class="flex flex-col items-start overflow-y-auto"
          [formGroup]="modifyMemberComposeForm"
        >
          <!-- 아이디 -->

          <div class="flex flex-col w-full">
            <div class="flex items-center w-full mt-6">
              <!-- Icon name -->
              <mat-form-field class="w-1/3 pr-2">
                <mat-label>아이디</mat-label>
                <input matInput [formControlName]="'username'" />
              </mat-form-field>

              <!-- Icon color -->
              <!-- 닉네임 -->
              <mat-form-field class="w-1/3 pl-2">
                <mat-label>닉네임</mat-label>
                <input matInput [formControlName]="'nickname'" />
              </mat-form-field>
              <mat-form-field class="w-1/3 pl-2">
                <mat-label>현재 비밀번호</mat-label>
                <input
                  placeholder="Password"
                  [type]="hide ? 'password' : 'text'"
                  matInput
                  [formControlName]="'currentPassword'"
                />
                <mat-icon matSuffix (click)="hide = !hide">{{
                  hide ? "visibility_off" : "visibility"
                }}</mat-icon>

                <mat-error
                  *ngIf="
                    modifyMemberComposeForm
                      ?.get('currentPassword')
                      ?.hasError('required')
                  "
                >
                  현재 사용하고 계시는 패스워드를 입력하세요.
                </mat-error>
              </mat-form-field>
            </div>
          </div>

          <div class="flex flex-col w-full">
            <div class="flex items-center w-full mt-6">
              <!-- 비밀번호 -->
              <mat-form-field class="w-1/2 pr-2">
                <mat-label>비밀번호</mat-label>

                <input
                  placeholder="Password"
                  [type]="hide ? 'password' : 'text'"
                  matInput
                  [formControlName]="'password'"
                />
                <mat-icon matSuffix (click)="hide = !hide">{{
                  hide ? "visibility_off" : "visibility"
                }}</mat-icon>
                <mat-error
                  *ngIf="
                    modifyMemberComposeForm
                      ?.get('password')
                      ?.hasError('required')
                  "
                >
                  비밀번호는 필수 입력입니다.
                </mat-error>
                <mat-error
                  *ngIf="
                    modifyMemberComposeForm.get('password')?.hasError('pattern')
                  "
                >
                  비밀번호는 영문 대문자,소문자,숫자,특수문자가 포함되어야 하며
                  8자 이상 20글자 이하로 입력하여야 합니다.
                </mat-error>
              </mat-form-field>

              <!-- 비밀번호 확인 -->
              <mat-form-field class="w-1/2 pl-2">
                <mat-label>비밀번호 확인</mat-label>

                <input
                  placeholder="Password"
                  [type]="hide ? 'password' : 'text'"
                  matInput
                  [formControlName]="'passwordConfirm'"
                />
                <mat-icon matSuffix (click)="hide = !hide">{{
                  hide ? "visibility_off" : "visibility"
                }}</mat-icon>

                <mat-error
                  *ngIf="
                    modifyMemberComposeForm
                      ?.get('passwordConfirm')
                      ?.hasError('required')
                  "
                >
                  비밀번호 확인은 필수 입력입니다.
                </mat-error>
                <mat-error
                  *ngIf="
                    modifyMemberComposeForm
                      ?.get('passwordConfirm')
                      ?.hasError('passwordNotMatch')
                  "
                >
                  비밀번호가 동일하지 않습니다.
                </mat-error>
              </mat-form-field>
            </div>
          </div>

          <!-- Actions -->
          <div
            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
            style="align-items: center"
          >
            <div class="flex items-center mt-4 sm:mt-0">
              <!-- Discard -->
              <button
                class="ml-auto sm:ml-0"
                mat-stroked-button
                (click)="discard()"
              >
                취소
              </button>

              <!-- Send -->
              <button
                class="order-first sm:order-last"
                mat-flat-button
                [color]="'primary'"
                (click)="send()"
                [disabled]="isSendDisable"
              >
                비밀번호변경
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
