Candidate Profile Modal - Copy this Html, Bootstrap Component to your project

Phần này bị thiếu chức năng gửi gmail mời ứng viên và phần candidate profile modal nó không được đẹp, tôi muốn thêm phần gửi gmail và sửa lại profile modal của ứng viên đẹp hơn và hợp lý hơn. <! Candidates Tab > <div class="tab pane fade" id="candidates" th:classappend="${activeTab == 'candidates'} ? 'show active'"> <div class="d flex justify content between flex wrap flex md nowrap align items center pt 3 pb 2 mb 3 border bottom"> <h1 class="h2">Candidate Management</h1> <div class="btn toolbar mb 2 mb md 0"> <button type="button" class="btn btn sm btn outline primary" data bs toggle="modal" data bs target="#addCandidateModal"> <i class="bi bi person plus"></i> Add Candidate </button> </div> </div> <div class="row mb 3"> <div class="col md 6"> <form th:action="@{/company/dashboard}" method="get" class="d flex"> <select name="jobId" class="form select me 2" onchange="this.form.submit()"> <option value="0">All Jobs</option> <option th:each="job : ${jobs}" th:value="${job.id}" th:text="${job.jobName}" th:selected="${job.id == selectedJobId}"></option> </select> <input type="text" name="search" class="form control me 2" placeholder="Search candidates..."> <button type="submit" class="btn btn primary">Search</button> </form> </div> </div> <div class="table responsive"> <table class="table table hover align middle"> <thead class="table light"> <tr> <th>Candidate</th> <th>Applied For</th> <th>Skills</th> <th>Experience</th> <th>Match</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr th:each="jobApplication : ${jobApplicationDTOS}"> <td> <div class="d flex align items center"> <img src="https://via.placeholder.com/40" alt="Avatar" class="rounded circle me 2 candidate avatar" style="width: 40px; height: 40px; object fit: cover;"> <div> <div class="fw bold" th:text="${jobApplication.candidate.fullName}">John Doe</div> <small class="text muted" th:text="${jobApplication.candidate.email}">john@example.com</small> </div> </div> </td> <td th:text="${jobApplication.job.jobName}">Software Engineer</td> <td> <span th:each="skill : ${jobApplication.candidate.candidateSkills}" class="badge bg info text dark me 1 mb 1" th:text="${skill.skill.skillName}">Skill</span> </td> <td> <ul class="list unstyled mb 0"> <li th:each="experience : ${jobApplication.candidate.experiences}" th:text="${experience.role + ' at ' + experience.companyName}">Role at Company</li> </ul> </td> <td> <div class="d flex align items center"> <div class="progress flex grow 1" style="height: 10px;"> <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"> </div> </div> <span class="ms 2 fw bold" th:text="${#numbers.formatDecimal(jobApplication.matchPercentage, 1, 0) + '%'}">85%</span> </div> </td> <td> <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> </td> <td> <button class="btn btn sm btn outline primary" data bs toggle="modal" th:data bs target="${'#candidateModal ' + jobApplication.candidate.id}"> <i class="bi bi eye"></i> View </button> </td> </tr> </tbody> </table> </div> <! 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> </div> <style> .timeline { position: relative; padding left: 30px; } .timeline item { position: relative; margin bottom: 1.5rem; } .timeline marker { position: absolute; left: 30px; width: 15px; height: 15px; border radius: 50%; background color: #007bff; border: 3px solid #fff; box shadow: 0 0 0 3px #007bff; } .timeline item::before { content: ''; position: absolute; left: 26px; top: 15px; height: calc(100% + 1.5rem); border left: 2px solid #007bff; } .timeline item:last child::before { display: none; } </style> <script th:inline="javascript"> function scheduleInterview(applicationId) { // Implement interview scheduling logic console.log('Schedule interview for application ID:', applicationId); } function approveApplication(applicationId) { // Implement application approval logic console.log('Approve application ID:', applicationId); } function rejectApplication(applicationId) { // Implement application rejection logic console.log('Reject application ID:', applicationId); } </script>