<div>
    <label>{{skillsController.label}}</label>
    <textarea rows="4" class="form-control" placeholder="" ng-model="skills" ng-change="skillsController.populateSkills()"
              ng-focus="skillsController.showDropdown = true" ng-keydown="skillsController.nextSkill($event)" required></textarea>
              <!--User Story: FA18 | VIP-153, mvale080 (added keydown event listener) -->
    <label class="small">Type or select a comma separated list of skills</label>
</div>
<div ng-show="skillsController.showDropdown">
    <div class="btn-toolbar form-group" role="toolbar">
        <div ng-repeat="skill in (skillsController.skillsList | filter:skillsController.allowedSkills)"
             class="btn-group" role="group">
            <!--User Story: FA18 | VIP-151, mvale080 (big fix)-->
            <!--In the line below, added a function to limit the displayed text of skills to 20 characters and append '...' to the end if longer than 20 characters.
                This prevents page format from breaking when a single skill is too long. Code needs to be refactored for Sprint 4 of this semester.-->
            <button class="btn btn-primary" type="button" ng-click="skillsController.addSkill(skill)">{{skill | limitTo: 20}}{{skill.length > 20 ? '...' : ''}}</button>
        </div>
    </div>
</div>