@extends('front.modules.cv_builder.main')
@section('title')CV Builder - Bold Skills Based CV @endsection

@section('secondary_content')
<div>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="box white-bg px-0 pdf-box">
                    <table style="table-layout: auto;">
                        <tr>
                            <td style="width: 100%; background-color: #F7941C;">
                                <h1 v-if="userDetails.full_name">@{{ userDetails.full_name }}</h1>
                                <h1 v-else>Your Name</h1>
                            </td>
                        </tr>
                    </table>

                    <div class="container-fluid">
                        <div class="row">
                            <div class="col">
                                <table class="body-part">
                                    <tr>
                                        <td class="left-body">
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>{{ trans('cv_builder.profile') }}<a href="javascript:void(0)" class="action" @click="openProfProfile">
                                                            <img src="{{ asset('img/cv_builder/young_functional_cv/edit-circle.svg') }}" alt="edit" /></a>
                                                        </h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" 
                                                            v-if="(!$v.userDetails.required || !$v.userDetails.profiles.cv_profile_bio.required) && cv_footer.formSubmit"
                                                                :class="{ 'cv--input--error': (!$v.userDetails.profiles.cv_profile_bio.required)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>{{ trans('cv_builder.profile') }} detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p class="text-justify" v-if="userDetails.profiles && userDetails.profiles.cv_profile_bio"> @{{ userDetails.profiles.cv_profile_bio }} </p>
                                                        <p class="text-justify" v-else-if="userCvDetails && userCvDetails.cv_profile_bio"> @{{ userCvDetails.cv_profile_bio }} </p>
                                                        <p class="text-justify" v-else>Write a strong opening summary of who you are, your skills, achievements and career goals. A good Profile is 4 – 6 sentences long <br/>
                                                            e.g I am a highly-skilled Human Resource Manager with 10 years’ experience in the Banking Industry. I possess a wide skill set, including learning and 
                                                            development, through working on developing a training program for banking personnel, Performance Management through managing a team of more than 200 
                                                            employees. I am looking to secure a challenging role with a strategic focus in an international corporate company.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>{{ trans('cv_builder.skillsandachievements') }}<a href="javascript:void(0)" class="action" 
                                                            v-if="userDetails && userDetails.skills && userDetails.skills.length < 8" 
                                                            @click="openCvModal('addUserSkills')"><img src="{{ asset('img/cv_builder/young_functional_cv/add-circle.svg') }}" 
                                                            alt="edit" /></a></h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || $v.userDetails.skills.$error) 
                                                                && cv_footer.formSubmit" :class="{ 'cv--input--error': ($v.userDetails.skills.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>{{ trans('cv_builder.skillsandachievements') }} is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.skills && userDetails.skills.length > 0">
                                                    <template v-for="(skill, index) in userDetails.skills">
                                                        <tr>
                                                            <td>
                                                                <h3>@{{ skill.skill }}
                                                                    <a href="javascript:void(0)" class="action float-right" style="margin-left: 14px;" 
                                                                        @click="confirm(skill.id, 'skillForm', 'skills', 'removeUserSkill')"><img 
                                                                        src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                    <a href="javascript:void(0)" class="action float-right" @click="editUserSkill(index)"><img 
                                                                        src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                </h3>
                                                                <ul>
                                                                    <template v-if="skill.detail && skill.detail.length > 0" v-for="detail in skill.detail">
                                                                        <li>@{{ detail.detail }}</li>
                                                                    </template>
                                                                </ul>
                                                            </td>
                                                        </tr>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td>
                                                            <p>Highlight your key skills and provide your key achievements in that particular skill</p>
                                                            <h3>Eg; Cost Control</h3>
                                                            <ul>
                                                                <li class="pl-0 ml-0">Managed to reduced operational expenditure by 30% over my first two years as a Financial Controller</li>
                                                                <li>Successfully negotiated improved terms with suppliers reducing fixed costs by 10%</li>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h3>Eg; Research</h3>
                                                            <ul>
                                                                <li>Successfully managed quantitative research project that collected data from 5000 farmers and helped inform national 
                                                                    commoddity export policies</li>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>{{ trans('cv_builder.careersummary') }}<a href="javascript:void(0)" class="action" @click="addCareerSummary"><img src="{{ asset('img/cv_builder/young_functional_cv/add-circle.svg') }}" alt="add" /></a></h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || $v.userDetails.experiences.$error) 
                                                            && cv_footer.formSubmit" :class="{ 'cv--input--error': ($v.userDetails.experiences.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>{{ trans('cv_builder.careersummary') }} detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-bottom: 15px;">
                                                        <table>
                                                            <template v-if="userDetails.experiences && userDetails.experiences.length > 0">
                                                                <template v-for="(detail, index) in userDetails.experiences">
                                                                    <tr>
                                                                        <td width="65%">
                                                                            <p style="margin-bottom: 8px !important;">
                                                                                <b>@{{ detail.positiontitle }},</b> @{{ detail.commancompanies.name }}, @{{ detail.commancompanies.country.name }} 
                                                                            </p>
                                                                        </td>
                                                                        <td>
                                                                            <p style="margin-bottom: 8px !important;">@{{ detail.start_date | monthAndYear }} - @{{ detail.end_date | monthAndYear(detail.is_current) }}</p>
                                                                        </td>
                                                                        <td class="text-right" width="10%">
                                                                            <a href="javascript:void(0)" class="action" @click="editCareerSummary(index)"><img 
                                                                                src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                            <a href="javascript:void(0)" class="action" 
                                                                                @click="confirm(detail.id, 'careerSummary', 'experiences', 'removeUserCareerSummary')"><img 
                                                                                src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                        </td>
                                                                    </tr>
                                                                </template>
                                                            </template>
                                                            <template v-else>
                                                                    <tr>
                                                                        <td><p class="text-justify">{{ trans('cv_builder.default_careersummary') }}</p></td>
                                                                    </tr>
                                                            </template>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>{{ trans('cv_builder.memberships') }}<a href="javascript:void(0)" class="action" @click="openCvModal('addNewMembership')"><img 
                                                            src="{{ asset('img/cv_builder/young_functional_cv/edit-circle.svg') }}" alt="edit" /></a></h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.communities && userDetails.communities.length > 0">
                                                    <template v-for="(detail, index) in userDetails.communities">
                                                    <tr>
                                                        <td>
                                                            @{{ detail.name }} <br/>
                                                        </td>
                                                    </tr>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td>
                                                            <p>
                                                                Highlight all Professional Memberships you are associated with
                                                                <ul>
                                                                    <li>Eg. Member: Rotary Club</li>
                                                                    <li>Eg. Treasurer: Tanzania Law Society</li>
                                                                    <li>Eg. Board Member: Project Management Institute</li>
                                                                </ul>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </table>
                                        </td>
                                        <td class="right-body">
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2><span><img src="{{ asset('img/cv_builder/young_functional_cv/circle.svg') }}" alt="circle" />
                                                            </span>{{ trans('cv_builder.contact_details') }}<a href="javascript:void(0)" class="action" @click="openContactDetails"><img 
                                                            src="{{ asset('img/cv_builder/young_functional_cv/edit-circle.svg') }}" alt="edit" /></a>
                                                        </h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" 
                                                            v-if="(!$v.userDetails.required  || $v.userDetails.locations.$error ||
                                                                    !$v.userDetails.profiles.marital_status_id.required || 
                                                                    !$v.userDetails.profiles.birth_date.required || !$v.userDetails.profiles.nationality.required ||
                                                                    !$v.userDetails.liscences.required) 
                                                                    && cv_footer.formSubmit"
                                                                    :class="{ 'cv--input--error': (!$v.userDetails.required  || $v.userDetails.locations.$error ||
                                                                    !$v.userDetails.profiles.marital_status_id.required || 
                                                                    !$v.userDetails.profiles.birth_date.required || !$v.userDetails.profiles.nationality.required
                                                                    || !$v.userDetails.liscences.required)}">
                                                                <button type="button" class="close contact-close" onClick="$(this).closest('.alert').hide()">×</button>
                                                                <strong>{{ trans('cv_builder.contact_details') }} is mandatory to fill up.</strong>
                                                            </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p v-if="userDetails.locations && userDetails.locations.address1 && userDetails.locations.area_of_residence && userDetails.locations.country_id 
                                                            && userDetails.locations.state_id && userDetails.locations.city_id">
                                                            @{{ userDetails.locations.address1 }}, <template v-if="userDetails.locations.address2">@{{ userDetails.locations.address2 }},</template> 
                                                            @{{ userDetails.locations.area_of_residence }}, @{{ userDetails.locations.cities.name }}, 
                                                            <template v-if="userDetails.locations.countries.name != 'Tanzania'">@{{ userDetails.locations.states.name }},</template> 
                                                            @{{ userDetails.locations.countries.name }} 
                                                        </p>
                                                        <p v-else>Your address</p>
                                                        <p><a href="javascript:void(0)" v-if="userDetails.email">@{{ userDetails.email }}</a>
                                                           <a href="javascript:void(0)" v-else>Your primary email address</a>
                                                        </p>
                                                        <p><a href="javascript:void(0)" v-if="userDetails.mobile">@{{ userDetails.mobile }}</a> 
                                                                <a href="javascript:void(0)" v-else>Your primary mobile number</a>
                                                        </p>
                                                        <p>Marital Status: <template v-if="userDetails.profiles && userDetails.profiles.maritalstautses 
                                                                && userDetails.profiles.maritalstautses.name">@{{ userDetails.profiles.maritalstautses.name }}</template>
                                                                            <template v-else>Your Marital Status</template>
                                                        </p>
                                                        <p>Age: <template v-if="userDetails.profiles && userDetails.profiles.birth_date">@{{ userDetails.profiles.birth_date | age }} Years</template>
                                                                <template v-else>Your Age</template>
                                                        </p>
                                                        <p>Nationality: <template v-if="userDetails.profiles && userDetails.profiles.nationalities 
                                                            && userDetails.profiles.nationalities.name">@{{ userDetails.profiles.nationalities.name }}</template>
                                                                        <template v-else>Your Nationality</template>
                                                        </p>
                                                        <p>Driving License: 
                                                            <template v-if="userDetails.liscences && userDetails.liscences.length > 0">
                                                                <template v-for="(license, index) in contact_details.licenses" v-if="contact_details.licenses && contact_details.licenses.length > 0">
                                                                    <template v-for="(val, key) in userDetails.liscences" v-if="license.id == val.liscence_id">@{{ license.text }}<template v-if="userDetails.liscences.length-1 != key">, </template>
                                                                    </template>
                                                                </template>
                                                            </template>
                                                            <template v-else>Your Driving License</template>
                                                        </p>    
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2><span><img src="{{ asset('img/cv_builder/young_functional_cv/circle.svg') }}" alt="circle" /></span>{{ trans('cv_builder.education') }}<a href="javascript:void(0)" class="action" @click="addNewEducation"><img src="{{ asset('img/cv_builder/young_functional_cv/add-circle.svg') }}" alt="add" /></a></h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || $v.userDetails.educations.$error) 
                                                            && cv_footer.formSubmit" :class="{ 'cv--input--error': ($v.userDetails.educations.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>{{ trans('cv_builder.education') }} detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.educations && userDetails.educations.length > 0">
                                                    <template v-for="(detail, index) in userDetails.educations">
                                                    <tr>
                                                        <td style="padding-bottom: 8px;">
                                                            <p style="margin-bottom: 0 !important;"><b>@{{ detail.title }},</b><br>@{{ detail.institutions.name }} - @{{ detail.countries.name }}, @{{ detail.end_date | yearMessage }}</p>
                                                            <a href="javascript:void(0)" class="action" @click="editUserEduction(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                            <a href="javascript:void(0)" class="action" @click="confirm(detail.id, 'education', 'educations', 'removeUserEducation')"><img 
                                                                src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                        </td>
                                                    </tr>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td>{{ trans('cv_builder.default_education') }}</td>
                                                    </tr>
                                                </template>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2><span><img src="{{ asset('img/cv_builder/young_functional_cv/circle.svg') }}" alt="circle" /></span>{{  trans('cv_builder.certifications') }}
                                                            <a href="javascript:void(0)" class="action"><img src="{{ asset('img/cv_builder/young_functional_cv/add-circle.svg') }}"
                                                                @click="addCertificateModal" alt="add" /></a></h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.certificates && userDetails.certificates.length > 0">
                                                    <template v-for="(certificate, index) in userDetails.certificates">
                                                            <tr>
                                                                <td>
                                                                    <p>
                                                                        <span class="bold">@{{ certificate.name }}, </span> <template v-if="certificate.institutions && certificate.institutions.name">
                                                                            @{{ certificate.institutions.name  }},</template> 
                                                                        <template v-if="!certificate.is_ongoing">
                                                                            @{{ certificate.end_date | year }}
                                                                        </template>
                                                                        <template v-else>Present</template><br/>
                                                                        <a href="javascript:void(0)" class="action" @click="editUserCertificate(index)"><img 
                                                                            src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                            <a href="javascript:void(0)" class="action" 
                                                                            @click="confirm(certificate.id, 'certificate', 'certificates', 'removeUserCertificate')"><img 
                                                                            src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                    </p>
                                                                </td>
                                                            </tr>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td>
                                                            <p>{{ trans('cv_builder.default_certifications') }}</p>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2><span><img src="{{ asset('img/cv_builder/young_functional_cv/circle.svg') }}" alt="circle" /></span>{{ trans('cv_builder.additionalInformation') }}</h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || $v.userDetails.languages.$error) 
                                                            && cv_footer.formSubmit" :class="{ 'cv--input--error': ($v.userDetails.languages.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Language detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr v-if="userDetails.key_skills && userDetails.key_skills.length == 0 && userDetails.languages && userDetails.languages.length == 0">
                                                    <td>Add any information to give you an added advantage like languages, publications, extra skills and links to portfolio</td>
                                                </tr>
                                                <tr>
                                                    <td>

                                                        <template v-if="userDetails.key_skills && userDetails.key_skills.length > 0">
                                                            <p>{{ trans('cv_builder.technicalSkills') }}: <template v-for="(skill, index) in userDetails.key_skills">
                                                                    @{{ skill.name | upperCase}}<template v-if="userDetails.key_skills.length-1 != index">,</template>
                                                                </template> <br/>
                                                                <a href="javascript:void(0)" class="action" @click="editUserKeySkill"><img 
                                                                    src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                            </p>
                                                        </template>
                                                        <template v-else>
                                                            <p>{{ trans('cv_builder.default_technicalskills') }} <br/>
                                                                <a href="javascript:void(0)" class="action" @click="editUserKeySkill"><img 
                                                                    src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                            </p>
                                                        </template>
                                                        <template v-if="userDetails.languages && userDetails.languages.length > 0">
                                                            <p>
                                                                {{ trans('cv_builder.languages') }}:
                                                                <template v-for="(language, index) in userDetails.languages">
                                                                    @{{ language.name | upperCase}}<template v-if="userDetails.languages.length-1 != index">,</template>
                                                                </template> <br/>
                                                                <a href="javascript:void(0)" class="action" @click="editUserLanguage"><img 
                                                                    src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                            </p>
                                                        </template>
                                                        <template v-else>
                                                            <p>
                                                                {{ trans('cv_builder.default_language') }}<br/>
                                                                <a href="javascript:void(0)" class="action" @click="editUserLanguage"><img 
                                                                    src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                            </p>
                                                        </template>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>
                                                            <span><img src="{{ asset('img/cv_builder/young_functional_cv/circle.svg') }}" alt="circle" /></span>{{ trans('cv_builder.interests') }}<a 
                                                            href="javascript:void(0)" @click="openCvModal('editUserInterestsModal')" class="action"><img 
                                                            src="{{ asset('img/cv_builder/young_functional_cv/edit-circle.svg') }}" alt="edit" /></a>
                                                        </h2>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="border">
                                                        <span>&nbsp;</span>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.interests && userDetails.interests.length > 0">
                                                    <p><template v-for="(interest, index) in userDetails.interests">
                                                            @{{ interest.name | upperCase}}<template v-if="userDetails.interests.length-1 != index">,</template>
                                                        </template></p>
                                                </template>
                                                <template v-else>
                                                    <p>Add your hobbies and interest, be relevant and truthful <br/>
                                                        Eg. Fitness, Technology, Music, Reading</p>
                                                </template>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <div style="display: block; padding: 0 20px; margin-top: 30px;">
                                    <table style="width: 100%; ">
                                        <tr>
                                            <td class="gray-table">
                                                <table>
                                                    <tr>
                                                        <td colspan="3">
                                                            <h2>{{ trans('cv_builder.referees') }}
                                                                <a href="javascript:void(0)" class="action ml-3" @click="openCvModal('addNewRefereeModal')"><img 
                                                                src="{{ asset('img/cv_builder/young_functional_cv/add-circle.svg') }}" alt="add" /></a>
                                                                <a href="javascript:void(0)" class="action select-referees btn-transparent" style="margin: 0; padding: 4px 17px;" 
                                                                @click="openCvModal('selectRefereesModal')"
                                                                v-if="userDetails.references && userDetails.references.length > 0">Select Referees</a>
                                                            </h2>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3" class="border">
                                                            <span>&nbsp;</span>
                                                            <div class="alert alert-dismissible fade show alert-danger m-0" 
                                                                v-if="(!$v.userDetails.required || !$v.userDetails.references.required || !$v.userDetails.references.minLength) && cv_footer.formSubmit"
                                                                    :class="{ 'cv--input--error': (!$v.userDetails.references.required || !$v.userDetails.references.minLength)}">
                                                                <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                                <strong>At least 3 Referees detail is mandatory to fill up.</strong>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <template v-if="userDetails.references && userDetails.references.length > 0">
                                                        <tr>
                                                            <template v-for="(referee, index) in userDetails.references" v-if="referee.is_selected_for_cv == 1">
                                                            <td>
                                                                <p><b>@{{ referee.name }} </b>
                                                                    <a href="javascript:void(0)" class="action ml-2" @click="editReferee(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" />  </a>
                                                                    <a href="javascript:void(0)" class="action" @click="confirm(referee.id, 'referee', 'references', 'removeReferee')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                </p>
                                                                <p>@{{ referee.position }}</p>
                                                                <p v-if="referee.companies && referee.companies.name">@{{ referee.companies.name }}</p>
                                                                {{-- <p v-if="referee.companies && referee.companies.country && referee.companies.country.name">@{{ referee.companies.country.name }}</p> --}}
                                                                <p>@{{ referee.phone }}</p>
                                                                <p>@{{ referee.email }}</p>
                                                            </td>
                                                            </template>
                                                            <template v-if="userDetails.references_count == 0">
                                                                <td><p>References will be provided on demand</p></td>
                                                            </template>
                                                        </tr>
                                                    </template>
                                                    <template v-else>
                                                        <tr>
                                                            <td colspan="3">
                                                                <p class="text-justify">{{ trans('cv_builder.default_referees') }}</p>
                                                            </td>
                                                        </tr>
                                                    </template>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <a href="http://www.empower.co.tz" class="btn" target="_blank">www.empower.co.tz</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <cv-builder-footer cvtype="bold_skills_based_cv" id="bold_skills_based_cv" publish_id="publish_bold_skills_based_cv" 
        preview_id="preview_bold_skills_based_cv" template_id="2"></cv-builder-footer>
</div>
@endsection

@push('pageCss')
    @include('front.modules.cv_builder.bold_skills_based_cv.common')
@endpush

@push('secondary_pageModals')
    @include('front.modules.cv_builder.bold_skills_based_cv.modals.contact_details')
@endpush

@push('secondary_pageJs')
    <script>
        var previewCv = "{{ route('front.cv_builder.preview_cv') }}";
    </script>
    <script type="text/javascript" src="{{ asset('js/front/cv_builder/bold_skills_based_cv.js') }}"></script>
@endpush