<div class="neo-widget">

<div class="neo-widget__header aoc-journey-information">Customer Journey Element

Creator</div>

<div class="neo-widget__content neo-widget__content--indented">

<div class="row">
<div class="col-medium-12 col-large-12">
<!-- Journey Element Creator Form -->
<form name="journeyElementsForm" class="journey-elements__form" validate
role="form">

<!-- CustomerNote field -->

<label for="customerNoteTextarea" aria-label="Customer Note">Customer
Note</label>
<div class="row">
<div class="grid--medium-6 grid--large-8">
<textarea class="neo-input" aria-multiline="true"
id="customerNoteTextarea" data-ng-model="customerNote" maxlength="255"
rows="4" placeholder="Input a customer note in this area.."
role="textbox" aria-required="true" required></textarea>
</div>
</div>

<!-- Other Information Input Group -->

<label for="otherInformationInputGroup" aria-label="Other information
inputs">Other Information</label>
<div class="row" id="otherInformationInputGroup">
<div class="grid--medium-2 grid--large-4">
<input maxlength="34" ng-class="{'neo-input neo-input--error' :
otherInformationError, 'neo-input' : !otherInformationError}"
role="textbox" ng-model="additionalKey" placeholder="Key" />
</div>
<div class="grid--medium-2 grid--large-4">
<input maxlength="34" class="neo-input" role="textbox" ng-
model="additionalValue" placeholder="Value" />
</div>
<div class="grid--medium-2 grid--large-4">
<button class="custom-sm-button md-button md-ink-ripple aoc-add"
role="button" type="button" ng-
click="addOtherInformation(additionalKey,additionalValue)"
aria-label="Add information">Add</button>
</div>
</div>
<span ng-hide="!otherInformationError" aria-label="Other information
error label" class="neo-label neo-label--warning">{{otherInformationError}}</span>

<!-- Other Information table -->

<!-- Example of extra key / value pairs that could be added to the
touchpoint-->
<div class="row">
<div class="grid--medium-5 grid--large-10">
<table class="journey-elements__table widget__table widget__table--
accessible" id="otherInformationTable" aria-label="Other Information" role="table"
ng-hide="!additionalInfo.length">
<thead>
<tr>
<th class="width-md">Key</th>
 <th class="width-md">Value</th>
<th class="width-xs">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in additionalInfo">
<div ng-repeat="(additionalKeyCopy, additionalValueCopy) in
info">
<td>{{ ::additionalKeyCopy }}</td>
<td>{{ ::additionalValueCopy }}</td>
<td>
<button class="neo-btn neo-btn--warning aoc-trash"
title="delete" type="button" data-ng-click="removeTableRow($index)" aria-
label="Delete row"></button>
</td>
</div>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Save Button -->

<div class="row" id="submit-btn-group">
<div class="grid--medium-4 grid--large-8">
<span class="hidden-span">&amp;times</span>
</div>
<div class="grid--medium-2 grid--large-4">
<button role="button" type="submit" class="custom-sm-button md-button
md-ink-ripple" ng-click="journeyElementsForm.$valid &&
saveJourneyElement(customerNote)"
aria-label="Save journey">{{saveBtnText}}</button>
</div>
</div>

</form>
</div>
</div>

</div>

</div>