<div class="relative">

  <!-- Start::main-content -->
  <div class="main-content m-12">

    <!-- Profile Section -->
    <div class="grid grid-cols-12 gap-6">
      <!-- Profile Card -->
      <div class="col-span-12 lg:col-span-4">
        <div class="box p-6 text-center">
          <img [src]="member?.profile_picture || 'assets/default-profile.png'"
               alt="Profile Picture" class="w-32 h-32 mx-auto rounded-full shadow-md">
          <h3 class="text-xl font-semibold mt-4">{{ member?.member_firstname }} {{ member?.member_lastname }}</h3>
          <p class="text-gray-500">{{ member?.member_position }}</p>
          <button class="mt-4 ti-btn ti-btn-primary">Edit Profile</button>
        </div>
      </div>

      <!-- General Info -->
      <div class="col-span-12 lg:col-span-8">
        <div class="box">
          <div class="box-header flex justify-between">
            <h5 class="box-title">ข้อมูลพนักงาน</h5>
          </div>
          <div class="box-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div><strong>วันเกิด:</strong> {{ member?.member_date | date:'dd MMMM yyyy' }}</div>
              <div><strong>เพศ:</strong> {{ member?.member_gender }}</div>
              <div><strong>เบอร์โทร:</strong> {{ member?.member_phone }}</div>
              <div><strong>ตำแหน่ง:</strong> {{ member?.member_position }}</div>
              <div class="md:col-span-2"><strong>ที่อยู่:</strong> {{ member?.member_address }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bio Section -->
    <div class="box mt-6">
      <div class="box-header flex justify-between">
        <h5 class="box-title">เกี่ยวกับพนักงาน</h5>
      </div>
      <div class="box-body">
        <p class="text-gray-700">{{ member?.bio || 'ไม่มีข้อมูล' }}</p>
      </div>
    </div>

  </div>
  <!-- End::main-content -->

</div>
