<div class="mc-page">

    <div class="mc-page-header">
        <div class="mc-page-header-logo">
            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
        </div>
    </div>

    <div class="mc-page-body container">
        <div class="mc-card">
            <app-overlay [isActive]="isLoading"></app-overlay>

            <div class="mc-page-body-heading">Introduction Letters</div>

            <div class="d-flex justify-content-end">
                <button class="mc-btn-primary" pButton routerLink="/my-career-web/intro-letters/new" label="Add Introduction Letter"></button>
            </div>

            <div class="intro-letters">
                <div class="intro-letter" *ngIf="introLetters.length === 0">
                    <div class="letter-title text-center" style="flex: 1;">No Intro letters found. </div>
                </div>

                <div class="intro-letter" *ngFor="let letter of introLetters;">
                    <div class="letter-title">{{letter.JobTitle}} - {{letter.Employer}} </div>
                    <button class="mc-btn-secondary" pButton label="Edit" routerLink="/my-career-web/intro-letters/{{letter.ObjectID}}"></button>
                </div>

            </div>

        </div>
    </div>
</div>
