@if (resume$ | async; as model) {
<article class="resume" data-page="resume">

    <header>
        <h2 class="h2 article-title">Resume</h2>
    </header>

    <section class="timeline">

        <div class="title-wrapper">
            <div class="icon-box">
                <i class="fa-light fa-book-open"></i>
            </div>

            <h3 class="h3">Education</h3>

            <button class="edit-btn" type="button" (click)="openEditEducation()" title="Edit Education">
                <i class="fa-solid fa-pen-to-square"></i>
            </button>
        </div>

        <ol class="timeline-list">

            @for (education of model.academics; track education.academicId) {

            <li class="timeline-item">

                <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization !== null ? " - "
                    + education.degreeSpecialization : ""}}</h4>

                <span>{{education.period}}</span>

                <p class="timeline-text">
                    {{education.institution}}
                </p>

            </li>

            }

        </ol>

    </section>

    <section class="timeline">

        <div class="title-wrapper">
            <div class="icon-box">
                <i class="fa-light fa-briefcase"></i>
            </div>

            <h3 class="h3">Experience</h3>

            <button class="edit-btn" type="button" (click)="openEditExperience()" title="Edit Experience">
                <i class="fa-solid fa-pen-to-square"></i>
            </button>
        </div>

        <ol class="timeline-list">

            @for (experience of model.experiences; track experience.experienceId) {

            <li class="timeline-item">

                <h4 class="h4 timeline-item-title">{{experience.title}}</h4>

                <span>{{experience.period}}</span>

                <p class="timeline-text">
                    {{experience.company}}
                </p>

            </li>

            }

        </ol>

    </section>

    <section class="skill">

        <div class="title-wrapper">
            <h3 class="h3 skills-title">My skills</h3>

            <button class="edit-btn" type="button" (click)="openEditSkills()" title="Edit Skills">
                <i class="fa-solid fa-pen-to-square"></i>
            </button>
        </div>

        <ul class="skills-list content-card">

            @for (skill of model.skills; track skill.skillId) {

            <li class="skills-item">

                <div class="title-wrapper">
                    <h5 class="h5">{{skill.name}}</h5>
                    <data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
                </div>

                <div class="skill-progress-bg">
                    <div class="skill-progress-fill" [style]="'width: ' + skill.proficiencyLevel + '%'"></div>
                </div>

            </li>

            }

        </ul>

    </section>

    <section class="timeline">

        <div class="title-wrapper">
            <div class="icon-box">
                <i class="fa-light fa-certificate"></i>
            </div>

            <h3 class="h3">Certifications</h3>

            <button class="edit-btn" type="button" (click)="openEditCertifications()" title="Edit Certifications">
                <i class="fa-solid fa-pen-to-square"></i>
            </button>
        </div>

        <ol class="timeline-list">

            @for (cert of model.certifications; track cert.certificationId) {

            <li class="timeline-item">

                <h4 class="h4 timeline-item-title">{{cert.certificationName}}</h4>

                <span>{{cert.issuingOrganization}}</span>

                @if (cert.certificationLink) {
                <a class="timeline-link" [href]="cert.certificationLink" target="_blank" rel="noopener">
                    <i class="fa-solid fa-arrow-up-right-from-square"></i> View Certificate
                </a>
                }

            </li>

            }

        </ol>

    </section>

</article>
}