{{#if hasPreview}}
  <div class="row-fluid">
    <div class="span6">
      <p>
        {{#t "crop_instructions"}}To crop image, drag the selection and then click the "Save" button below.{{/t}}
      </p>
    </div>
    <div class="span6 text-center avatar-preview-wrapper">
      <div class="avatar-preview" />
    </div>
  </div>
{{else}}
  <a class="select-photo-link" href="#">
    <i class="icon-image icon-select-photo"></i>
    {{#t "choose_a_picture"}}choose a picture{{/t}}
  </a>

  <input id="selected-photo" type="file" class="hidden" accept="image/*" />
{{/if}}

{{#if hasPreview}}
  <div class="row-fluid">
    <div class="span6">
      <p>
        {{#t "crop_instructions"}}
          To crop the image, drag the selection with the mouse or use the arrow keys to move the
          selection and shift+arrow keys to resize the selection. Then click the "Save" button below.
        {{/t}}
      </p>
    </div>
    <div class="span6 text-center avatar-preview-wrapper">
      <div class="avatar-preview" />
    </div>
  </div>
{{else}}
  <a class="select-photo-link" href="#">
    <i class="icon-image icon-select-photo"></i>
    {{#t "choose_a_picture"}}choose a picture{{/t}}
  </a>

  <input id="selected-photo" type="file" class="hidden" accept="image/*" />
{{/if}}

Add keyboard instructions to avatar cropping
Add keyboard instructions to avatar cropping

fixes ADMIN-1318

test plan:
- make sure the new keybaord text shows up when you're cropping an
  avatar.

Change-Id: Id60312e3215900a22cbf43724574f3c5459e8fd0
Reviewed-on: https://gerrit.instructure.com/161050
Tested-by: Jenkins
Reviewed-by: Ed Schiebel <0ca8a83847a5889cf05cb219c0ab09f6b646243b@instructure.com>
QA-Review: Ed Schiebel <0ca8a83847a5889cf05cb219c0ab09f6b646243b@instructure.com>
Product-Review: Dan Sasaki <ae19fabf7fe19dff310008c9b6a4d2ec84d311d8@instructure.com>
