<div class="flex flex-col flex-auto min-w-0">
  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
    <div class="w-full max-w-screen-xl mx-auto">
      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
        <!-- Budget distribution -->
        <div
          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
        >
          <div class="text-lg font-medium tracking-tight leading-6 truncate">
            고객센터템플릿 {{ !targetTemplate ? "등록" : "수정" }}
          </div>
          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
            <form
              [formGroup]="targetTemplateForm"
              autocomplete="off"
              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
            >
              <mat-divider class="mt-6 mb-8"></mat-divider>

              <!-- Title -->
              <div>
                <mat-form-field
                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
                >
                  <mat-label>제목</mat-label>
                  <input matInput [formControlName]="'title'" />
                </mat-form-field>
              </div>

              <!-- Notes -->
              <div class="mt-8">
                <mat-form-field
                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
                >
                  <mat-label>순번</mat-label>
                  <input matInput [formControlName]="'order'" />
                </mat-form-field>
              </div>
              <!-- Body -->
              <!-- <quill-editor class="mt-2"></quill-editor> -->
              <mat-form-field
                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
              >
                <textarea
                  matInput
                  [required]="true"
                  [rows]="5"
                  matTextareaAutosize
                  [formControlName]="'content'"
                ></textarea>
                <mat-label>내용</mat-label>
              </mat-form-field>
            </form>
          </div>
          <!-- Actions -->
          <div
            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
          >
            <div class="flex items-center mt-4 sm:mt-0">
              <!-- Save as draft -->
              <button
                class="sm:mx-3"
                mat-stroked-button
                (click)="__onClickeCancel()"
              >
                <span>취소</span>
              </button>
              <!-- Send -->
              <button
                class="order-first sm:order-last"
                mat-flat-button
                [color]="'primary'"
                (click)="__onClickReditBtn(targetTemplate)"
              >
                {{ !targetTemplate ? "등록" : "수정" }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
