<!-- project-list.component.html -->
<section class="min-h-screen bg-nier-bg checkered-background">
  <!-- Section title with padding instead of margin to avoid white space -->
  <div class="pt-8 pl-8 pb-8 bg-nier-bg checkered-background">
    <app-section-title title="EXECUTE // DIRECTORY" />
  </div>

  <div class="max-w-6xl mx-auto p-6">
    <!-- Terminal Header -->
    <div class="checkered-background border-2 border-nier-border p-8 mb-8 font-terminal-nier relative overflow-hidden">
      <!-- Scan line animation -->
      <div class="absolute top-0 left-0 w-full h-full opacity-10 animate-scan"></div>
      <div class="text-base mb-2 font-terminal">>> ACCESSING PROJECT DATABASE...</div>
      <div class="my-6">
        <div class="w-full h-6 border-2 border-nier-accent bg-nier-bg relative overflow-hidden">
          <div class="h-full bg-nier-dark transition-all duration-[3000ms] ease-out"
               [class.w-full]="isLoading()"
               [class.w-0]="!isLoading()"></div>
        </div>
      </div>
      <div class="text-base mb-2 font-terminal">>> CONNECTION ESTABLISHED</div>
      <div class="text-base mb-2 font-terminal">>> DISPLAYING ARCHIVED MISSIONS</div>
    </div>

    <!-- Directory Tree -->
    <div class="bg-nier-dark text-nier-light border-2 border-nier-accent p-6 mb-8 font-terminal text-sm">
      <div class="font-noto-jp text-xl mb-4 border-b border-nier-mid pb-2">SYSTEM DIRECTORY</div>
      <div class="space-y-1">
        @for (line of directoryLines(); track $index) {
          <div class="opacity-0 animate-fade-in-line"
               [style.animation-delay]="($index * 300) + 'ms'">
            {{ line }}
          </div>
        }
      </div>
    </div>

    <!-- Projects Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      @for (project of projects(); track project.id) {
        <app-project-card
          [project]="project"
          (caseStudyOpen)="openCaseStudy($event)" />
      }
    </div>

    <!-- Footer -->
    <div class="text-center p-6 border-t-2 border-nier-border font-terminal-retro text-sm text-nier-mid">
      >>> END_OF_DIRECTORY_LISTING<br>
      >>> TOTAL_PROJECTS: {{ totalProjects() }} | ACTIVE: {{ activeProjects() }} | REDACTED: {{ redactedProjects() }}
    </div>
  </div>

  <!-- Case Study Modal -->
  @if (selectedProject()) {
    <div class="fixed inset-0 z-50 overflow-y-auto p-4 flex items-start justify-center transition-all duration-300"
         style="background-color: rgba(41, 41, 37, 0.9);"
         (click)="closeCaseStudy($event)">
      <div class="bg-nier-bg border-4 border-nier-accent max-w-4xl w-full max-h-[90vh] overflow-y-auto relative mt-8">
        <div class="bg-nier-dark text-nier-light p-6 border-b-2 border-nier-border sticky top-0 z-10">
          <div class="font-noto-jp text-3xl mb-2">{{ selectedProject()?.caseStudy?.title }}</div>
          <button class="absolute top-4 right-6 bg-transparent border-2 border-nier-light text-nier-light w-10 h-10 cursor-pointer font-terminal text-xl hover:bg-nier-light hover:text-nier-dark transition-colors duration-300"
                  (click)="closeCaseStudy()">×</button>
        </div>
        <div class="p-8">
          @for (section of selectedProject()?.caseStudy?.sections; track section.title) {
            <div class="mb-8 pb-6 border-b border-nier-border last:border-b-0">
              <div class="font-noto-jp text-xl mb-4 text-nier-accent">{{ section.title }}</div>
              <div class="leading-relaxed mb-4" [innerHTML]="section.content"></div>
            </div>
          }
        </div>
      </div>
    </div>
  }
</section>
