<div class="project-detail" role="dialog" aria-labelledby="project-title">
    <div class="detail-header">
        <h2 id="project-title">{{ project.name }}</h2>
        <button class="close-btn" (click)="close()" aria-label="Close">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>

    @if (project.status) {
    <span class="status-badge">{{ project.status }}</span>
    }

    @if (project.description) {
    <div class="detail-section">
        <h4>Description</h4>
        <p>{{ project.description }}</p>
    </div>
    }

    @if (project.roles.length) {
    <div class="detail-section">
        <h4>Roles</h4>
        <div class="tag-list">
            @for (role of project.roles; track role) {
            <span class="tag">{{ role }}</span>
            }
        </div>
    </div>
    }

    @if (project.responsibilities.length) {
    <div class="detail-section">
        <h4>Responsibilities</h4>
        <div class="tag-list">
            @for (r of project.responsibilities; track r) {
            <span class="tag">{{ r }}</span>
            }
        </div>
    </div>
    }

    @if (project.technologiesUsed.length) {
    <div class="detail-section">
        <h4>Technologies</h4>
        <div class="tag-list">
            @for (tech of project.technologiesUsed; track tech) {
            <span class="tag tech">{{ tech }}</span>
            }
        </div>
    </div>
    }

    @if (project.startDate || project.endDate) {
    <div class="detail-section">
        <h4>Duration</h4>
        <p class="duration">
            @if (project.startDate) {
            <span>{{ project.startDate | date: 'MMM yyyy' }}</span>
            }
            @if (project.startDate && project.endDate) {
            <span> — </span>
            }
            @if (project.endDate) {
            <span>{{ project.endDate | date: 'MMM yyyy' }}</span>
            }
        </p>
    </div>
    }

    @if (project.challenges) {
    <div class="detail-section">
        <h4>Challenges</h4>
        <p>{{ project.challenges }}</p>
    </div>
    }

    @if (project.lessonsLearned) {
    <div class="detail-section">
        <h4>Lessons Learned</h4>
        <p>{{ project.lessonsLearned }}</p>
    </div>
    }

    @if (project.impact) {
    <div class="detail-section">
        <h4>Impact</h4>
        <p>{{ project.impact }}</p>
    </div>
    }

    @if (project.categories?.length) {
    <div class="detail-section">
        <h4>Categories</h4>
        <div class="tag-list">
            @for (cat of project.categories; track cat) {
            <span class="tag category">{{ cat }}</span>
            }
        </div>
    </div>
    }
</div>
