<div class="countries_modal_wrap" my-modal-position>

  <div class="modal-body">

    <h4 class="modal_simple_header" my-i18n="country_select_modal_title"></h4>

    <div class="countries_modal_search">
      <input class="form-control countries_modal_search_field no_outline" my-focused type="search" placeholder="{{'modal_search' | i18n}}" ng-model="search.query"/>
      <a class="countries_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
    </div>

    <div class="countries_modal_col" my-countries-list>

      <div class="countries_wrap nano" my-infinite-scroller>
        <div class="countries_scrollable_wrap nano-content">

          <ul class="countries_modal_members_list nav nav-pills nav-stacked">

            <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
              <a class="countries_modal_country" ng-click="$close(country)">
                <span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
                <span class="countries_modal_country_name" ng-bind="country.name"></span>
              </a>
            </li>

          </ul>

        </div>
      </div>

    </div>

  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-primary" ng-click="$dismiss()" my-i18n="modal_done"></button>
  </div>

</div>
