micro-frontend/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html

<div class="h-screen bg-gray-100 flex flex-col">

    <!-- Header Section -->
    <header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm border-b border-gray-200 z-10">
      @if (mode == 'default') {
        <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
            <i class="fas fa-folder text-red-500"></i> โครงการทั้งหมด
        </h1>
      } @else if (mode == 'add')  {
        <div class="flex items-center gap-3">
            <!-- ปุ่มย้อนกลับ -->
            <button (click)="onCancelProject()"
                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
                    title="ย้อนกลับ">
                <i class="fas fa-arrow-left text-lg"></i>
            </button>
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-plus-circle text-red-500"></i> เพิ่มโครงการ
            </h1>
        </div>
      } @else if (mode == 'edit') {
        <div class="flex items-center gap-3">
             <!-- ปุ่มย้อนกลับ -->
            <button (click)="onCancelProject()"
                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
                    title="ย้อนกลับ">
                <i class="fas fa-arrow-left text-lg"></i>
            </button>
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-edit text-red-500"></i> แก้ไขโครงการ
            </h1>
        </div>
      }
    </header>

    <!-- Content Area (Scrollable) -->
    <div class="grow overflow-y-auto px-6 pb-6 pt-6">

        @if ( mode == 'default') {
            <!-- รายการโครงการ (Smart Component ย่อย หรือ Dumb Component ก็ได้) -->
            <app-main-project></app-main-project>

        } @else if ( mode == 'add') {
            <!-- หน้าเพิ่มโครงการ (Dumb Component) -->
            <!-- เชื่อม Event save/cancel กลับมาที่ Parent -->
            <app-main-project-add
                (save)="onSaveProject($event)"
                (cancel)="onCancelProject()">
            </app-main-project-add>
        }

    </div>
</div>