{{!-- Image selector --}}
<div aria-hidden="true" class="modal" id="imageSelectorFormModal">
  <div class="modal-dialog modal-lg image-selector-modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h4 class="modal-title">{{t 'image.selector'}}</h4>
      </div>

      <div class="modal-body">
        <div class="image-uploader-messages"></div>
        <div>
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
              <a href="#imageUploadTab" aria-controls="imageUploadTab" role="tab" data-toggle="tab">{{t 'image.uploader.title'}}</a>
            </li>
            <li role="presentation">
              <a  id="imageFileListTabLink" href="#imageFileListTab" aria-controls="imageFileListTab" role="tab" data-toggle="tab" onclick="we.components.imageSelector.startImageBrowser('#imageFileListTab');">{{t 'image.selector.title'}}</a>
            </li>
          </ul>
          <!-- Tab panes -->
          <div class="tab-content">
            <br />

            {{!-- File uploader --}}
            <div role="tabpanel" class="tab-pane active" id="imageUploadTab">
              <form id="weImageUploadForm" action="/api/v1/image" method="POST" onsubmit="return we.components.imageSelector.saveFile();">
                <div class="upload-step-1">
                  <span class="btn btn-success fileinput-button">
                    <span class="glyphicon glyphicon-plus"></span>
                    <label for="file-upload-image-field">{{t 'image.upload.selector.btn'}}</label>
                    <input id="file-upload-image-field" class="fileupload image-upload=field" type="file" data-url="/api/v1/image" name="image" accept="image/*" />
                  </span>
                </div>
                <div class="upload-step-2" style="display:none">
                  <div id="upload-image-preview-wrapper"></div>
                  <div class="form-group">
                    <label for="weImageUploadDescription">{{t 'form-image-description'}}</label>
                    <textarea  id="weImageUploadDescription" name="description" class="form-control"></textarea>
                    <p class="text-helper">{{t 'form-helper-image-description'}}</p>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-primary">{{t 'save'}}</button>
                    <button type="button" onclick="we.components.imageSelector.cancelUpload();" class="btn btn-default">{{t 'cancel'}}</button>
                  </div>
                </div>
              </form>
              <br>
              <br>
              <div class="progress" style="display:none;">
                <div class="progress-bar progress-bar-success"></div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="imageFileListTab">
              <br />
              <div id="weImageBrowser" class="we-image-browser"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>