Profile Modal Component - Copy this Html, Bootstrap Component to your project
thiết-kế-lại-profile-model-của-đoạn-code-này-với-please.-!---Candidate-Profile-Modals--->-<div-th:each="jobApplication-:-${jobApplicationDTOS}"-th:id="${'candidateModal-'-+-jobApplication.candidate.id}"-class="modal-fade"-tabindex="-1">-<div-class="modal-dialog-modal-lg">-<div-class="modal-content">-<div-class="modal-header-bg-primary-text-white">-<h5-class="modal-title"-th:text="${'Profile:-'-+-jobApplication.candidate.fullName}">Candidate-Profile</h5>-<button-type="button"-class="btn-close-btn-close-white"-data-bs-dismiss="modal"-aria-label="Close"></button>-</div>-<div-class="modal-body">-<div-class="row">-<div-class="col-md-4-text-center">-<img-src="https://via.placeholder.com/150"-alt="Avatar"-class="rounded-circle-mb-3-shadow"-style="width:-150px;-height:-150px;-object-fit:-cover;">-<h4-th:text="${jobApplication.candidate.fullName}">John-Doe</h4>-<p-class="text-muted">-<i-class="bi-bi-envelope-me-2"></i>-<span-th:text="${jobApplication.candidate.email}">john@example.com</span>-</p>-<p-class="text-muted">-<i-class="bi-bi-telephone-me-2"></i>-<span-th:text="${jobApplication.candidate.phone}">123-456-7890</span>-</p>-<div-class="mt-3">-<h5>Match-Score</h5>-<div-class="progress"-style="height:-25px;">-<div-class="progress-bar-bg-success"-role="progressbar"-th:style="'width:-'-+-${#numbers.formatDecimal(jobApplication.matchPercentage,-1,-0)}-+-'%'"-th:aria-valuenow="${#numbers.formatDecimal(jobApplication.matchPercentage,-1,-0)}"-aria-valuemin="0"-aria-valuemax="100">-<span-class="fw-bold"-th:text="${#numbers.formatDecimal(jobApplication.matchPercentage,-1,-0)-+-'%'}">85%</span>-</div>-</div>-</div>-</div>-<div-class="col-md-8">-<ul-class="nav-nav-tabs"-id="candidateProfileTabs"-role="tablist">-<li-class="nav-item"-role="presentation">-<button-class="nav-link-active"-id="overview-tab"-data-bs-toggle="tab"-data-bs-target="#overview"-type="button"-role="tab"-aria-controls="overview"-aria-selected="true">Overview</button>-</li>-<li-class="nav-item"-role="presentation">-<button-class="nav-link"-id="skills-tab"-data-bs-toggle="tab"-data-bs-target="#skills"-type="button"-role="tab"-aria-controls="skills"-aria-selected="false">Skills</button>-</li>-<li-class="nav-item"-role="presentation">-<button-class="nav-link"-id="experience-tab"-data-bs-toggle="tab"-data-bs-target="#experience"-type="button"-role="tab"-aria-controls="experience"-aria-selected="false">Experience</button>-</li>-</ul>-<div-class="tab-content-mt-3"-id="candidateProfileTabContent">-<div-class="tab-pane-fade-show-active"-id="overview"-role="tabpanel"-aria-labelledby="overview-tab">-<div-class="card-mb-3">-<div-class="card-body">-<h5-class="card-title">Applied-for</h5>-<p-class="card-text"-th:text="${jobApplication.job.jobName}">Software-Engineer</p>-</div>-</div>-<div-class="card-mb-3">-<div-class="card-body">-<h5-class="card-title">Status</h5>-<p-class="card-text">-<span-th:class="${'badge-'-+-(jobApplication.status-==-0-?-'bg-warning'-:-(jobApplication.status-==-1-?-'bg-success'-:-'bg-danger'))}"-th:text="${jobApplication.status-==-0-?-'Pending'-:-(jobApplication.status-==-1-?-'Approved'-:-'Rejected')}">Status</span>-</p>-</div>-</div>-<div-class="card">-<div-class="card-body">-<h5-class="card-title">Address</h5>-<p-class="card-text"-th:text="${jobApplication.candidate.address.fullAddress}">Full-Address</p>-</div>-</div>-</div>-<div-class="tab-pane-fade"-id="skills"-role="tabpanel"-aria-labelledby="skills-tab">-<h5>Skills</h5>-<div-class="d-flex-flex-wrap">-<span-th:each="skill-:-${jobApplication.candidate.candidateSkills}"-class="badge-bg-primary-badge-skill-me-2-mb-2-p-2"-th:text="${skill.skill.skillName-+-'-('-+-skill.skillLevel-+-')'}">Skill-(Level)</span>-</div>-</div>-<div-class="tab-pane-fade"-id="experience"-role="tabpanel"-aria-labelledby="experience-tab">-<h5>Experience</h5>-<div-class="timeline">-<div-th:each="experience,-iterStat-:-${jobApplication.candidate.experiences}"-class="timeline-item">-<div-class="timeline-marker"></div>-<div-class="timeline-content">-<h6-class="mb-1"-th:text="${experience.role-+-'-at-'-+-experience.companyName}">Role-at-Company</h6>-<p-class="text-muted-mb-2"-th:text="${experience.fromDate-+-'---'-+-experience.toDate}">Date-Range</p>-<p-class="mb-0"-th:text="${experience.workDescription}">Work-description</p>-</div>-</div>-</div>-</div>-</div>-</div>-</div>-</div>-<div-class="modal-footer">-<button-type="button"-class="btn-btn-secondary"-data-bs-dismiss="modal">Close</button>-<button-type="button"-class="btn-btn-primary"-th:onclick="'scheduleInterview('-+-${jobApplication.id}-+-')'">Schedule-Interview</button>-<button-type="button"-class="btn-btn-success"-th:onclick="'approveApplication('-+-${jobApplication.id}-+-')'">Approve-Application</button>-<button-type="button"-class="btn-btn-danger"-th:onclick="'rejectApplication('-+-${jobApplication.id}-+-')'">Reject-Application</button>-</div>-</div>-</div>-</div>
