gaf-mobile/app/components/skill-select/skill-select.html

GAF mobile Web site

<div class="scroll-container" fl-analytics-section="SkillSelector">
    <section>
        <div class="PageHeader">
            <div class="section-inner">
                <h1 class="PageHeader-title">Select your skills and expertise</h1>
            </div>
        </div>
        <div class="SkillSelect">
            <div class="SkillSelect-section section-inner" ng-if="ctrl.selectedCount === 0">
                <h2 class="SkillSelect-sectionHeading">Select up to {{ctrl.jobLimit}} skills that best match your qualifications and expertise and we'll provide you the jobs which best match your profile.</h2>
            </div>
            <div class="section-inner" ng-if="ctrl.selectedCount < ctrl.jobLimit">
                <label for="skill-search" class="label-hidden">Search:</label>
                <div class="input-prepend input-clearable">
                    <fl-svg class="input-prepend-icon" src="images/icons/flicon-search.svg"></fl-svg>
                    <input class="input-clearable-input SkillSelect-searchInput" id="skill-search" type="text" ng-model="ctrl.searchQuery" ng-model-options='{ debounce: 1000 }' placeholder="Search for relevant skills">
                    <button class="input-clearable-control icon-circled-cross" ng-click="ctrl.clearSearchField()"></button>
                </div>
            </div>
            <center ng-if="ctrl.loading">
                <div class="loadingicon">Loading...</div>
            </center>
            <div class="SkillSelect-section section-inner" ng-if="(ctrl.selectedCount < ctrl.jobLimit) && (ctrl.searchQuery.length > 0) && !ctrl.savingSkills">
                <h2 class="SkillSelect-sectionHeading">Search Results</h2>
                <ul class="SkillSelect-list">
                    <li class="SkillSelect-listItem" ng-repeat="job in ctrl.jobs | filter: { name: ctrl.searchQuery } | filter: { selected: false } | orderBy: '-active_project_count'">
                        <span>{{ job.name }}</span>
                        <button type="button" class="SkillSelect-listItemControl icon-circled-plus" ng-click="ctrl.addJob(job)" fl-analytics="AddJob" fl-analytics-value="{{job.seo_url}}"></button>
                    </li>
                </ul>
                <span ng-if="!(ctrl.jobs | filter: ctrl.searchQuery | filter: { selected: false }).length"> No more results for search: {{ ctrl.searchQuery }} </span>
            </div>    
            <div class="SkillSelect-section SkillSelect-section--mySkills section-inner" ng-if="ctrl.getSuggestedCount() > 0">
                <h2 class="SkillSelect-sectionHeading">Recommended Skills</h2>
                <h3 class="SkillSelect-sectionSubheading">Choose at least one.</h3>
                <ul class="SkillSelect-list">
                    <li class="SkillSelect-listItem SkillSelect-listItem--mySkills" ng-class="{ 'SkillSelect-listItem--newSelected': job.new }" ng-repeat="job in ctrl.jobs | filter: { suggested: true, selected: false } | orderBy: 'name'">
                        <span>{{ job.name }}</span>
                        <button type="button" class="SkillSelect-listItemControl icon-circled-plus" ng-if="ctrl.selectedCount < ctrl.jobLimit" ng-click="ctrl.addJob(job)" fl-analytics="AddJob" fl-analytics-value="{{job.seo_url}}"></button>
                    </li>
                </ul>
            </div>
            <div class="SkillSelect-section SkillSelect-section--mySkills section-inner" ng-if="ctrl.selectedCount > 0">
                <h2 class="SkillSelect-sectionHeading">My Skills</h2>
                <ul class="SkillSelect-list">
                    <li class="SkillSelect-listItem SkillSelect-listItem--mySkills" ng-class="{ 'SkillSelect-listItem--newSelected': job.new }" ng-repeat="job in ctrl.jobs | filter: { selected: true } | orderBy: 'name'">
                        <span>{{ job.name }}</span>
                        <button type="button" class="SkillSelect-listItemControl icon-circled-cross" ng-click="ctrl.removeJob(job)" fl-analytics="RemoveJob" fl-analytics-value="{{job.seo_url}}"></button>
                    </li>
                </ul>
            </div>
            <div class="SkillSelect-controls section-inner" ng-if="!ctrl.loading && ctrl.selectedCount > 0">
                <button class="btn btn-secondary" ng-class="{'btn-processing': ctrl.savingSkills}" ng-click="ctrl.saveSkills()" fl-analytics="SaveSkills"> Save </button>
                <div class="validation alert-form" ng-if="ctrl.error.internalError">
                    <span class="icon-notification"> </span> An internal error has occurred: {{ ctrl.error.internalError }}
                </div>
            </div>
            <div class="SkillSelect-status" ng-if="ctrl.selectedCount < ctrl.jobLimit">
                You have {{ ctrl.jobLimit - ctrl.selectedCount || 0 }} skill slots remaining
            </div>
            <div class="SkillSelect-status is-SkillSelect-status-alert" ng-show="ctrl.selectedCount >= ctrl.jobLimit">
                You have no skill slots remaining
            </div>
        </div>
    </section>
</div>