<template>
	<!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
  <q-card flat bordered class="col-12">
    <q-layout
      view="hHh Lpr lff"
      container
      class="shadow-2 rounded-borders page-relative"
      style="height: 82vh"
    >
			<q-header class="bg-grey-1">
				<q-toolbar>
					<div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
						<q-btn
							icon="mdi-arrow-left"
							unelevated
							round
							dense
							flat
							color="primary"
							class="q-mr-sm"
							@click="router.go(-1)"
						/>
							บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
					</div>
				</q-toolbar>
				<q-separator/>
			</q-header>
			<q-drawer
        v-model="drawer"
        show-if-above

				:width="150"
        :breakpoint="500"
				class="bg-grey-1"
        bordered
      >
        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
          <q-list class="text-grey-7">
            <q-item 
							dense
							active
							class="q-py-sm"
							active-class="text-primary bg-teal-1 text-weight-medium"
							clickable 
							v-ripple>
              <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-edit" />
              </q-item-section>

              <q-item-section>
                บันทึกผล
              </q-item-section>
            </q-item>

            <q-item 
							active-class="text-primary bg-teal-1 text-weight-medium"
							clickable
							class="q-py-sm"
							dense 
							v-ripple>
              <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-star" />
              </q-item-section>

              <q-item-section>
                ประเมินผล
              </q-item-section>
            </q-item>

            <q-item 
							active-class="text-primary bg-teal-1 text-weight-medium"
							clickable 
							class="q-py-sm"
							dense
							v-ripple>
              <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-chart" />
              </q-item-section>

              <q-item-section>
                รายการ
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
      </q-drawer>
      <q-page-container>
				<q-layout
					view="hHh Lpr lff"
					container
					style="height: 72vh"
				>
					<q-header class="bg-grey-1">
							<div class="bg-grey-1">
									<div class="col-12 row q-gutter-x-md items-center">
										<q-tabs dense v-model="tab" active-class="text-primary text-weight-medium" indicator-color="grey-1" class="text-grey-7">
											<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
											<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
											<q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
										</q-tabs>
										<div>
											<q-btn color="blue" flat dense icon="mdi-plus">
												<q-tooltip>
													เพิ่มบันทึกผลการทดลอง
												</q-tooltip>
											</q-btn>
										</div>
									</div>
								<q-separator/>
							</div>
						</q-header>
						<q-page-container>
							<div class="col-12 row">
								<Form />
							</div>
						</q-page-container>
					</q-layout>
    	</q-page-container>
    </q-layout>
	</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import Form from "@/modules/05_placement/components/probation/form.vue";

const router = useRouter();
const drawer = ref<boolean>(true);
const	tab = ref('save1');
</script>
<style lang="scss" scope>
.btn-absolute {
  z-index: 50;
  position: absolute;
  left: 200px;
  top: 10px;
}
.btnShadow {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
</style>