<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>
  <!-- Compose form -->
  <form
    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
    [formGroup]="signInComposeForm"
  >
    <!-- 아이디 -->
    <mat-form-field>
      <mat-label>아이디</mat-label>
      <input matInput [formControlName]="'username'" />
      <div class="copy-fields-toggles" matSuffix></div>
    </mat-form-field>

    <!-- 비밀번호 -->
    <mat-form-field>
      <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-form-field>

    <!-- 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()"
        >
          로그인
        </button>
      </div>
    </div>
  </form>
</div>
