<div class="modal fade" id="field_selector_modal" role="dialog" aria-hidden="true" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    

      <div class="modal-header tb-container-small">
        <div class="toolbar-small">
          <button type="button" class="btn btn-default tb-elem btn-close-small" data-dismiss="modal">
            <i class="fa fa-times" aria-hidden="true"></i> 
          </button>
        </div>
      </div>

      <div class="modal-body container" id="field_selector_body">

        <div class="row">
          <div ng-repeat="t in registeredTypes" class="col field-box">
            <button type="button" class="btn btn-default action-button field-button" ng-click="doAddField($index)">
              <center>
                <span class="field-name">{{ t.name }}</span>
                <i class="fa fa-{{ t.Icon() }}" aria-hidden="true"></i>
              </center>
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col form-group" id="templateContainer">
            <label class="col-form-label" id="templateLabel" for="template">Predefined Templates</label>
            <br/>
            <div class="input-group">
              <select id="template" name="template">
                <option ng-repeat="tpl in templates" value="{{ $index }}">{{ tpl.name }}</option>
              </select>
              <span class="input-group-btn">
                <button class="btn btn-default action-button" type="button" ng-click="onAddTemplate()">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
              </span>
            </div>
          </div>
        </div>

      </div>

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