<div id="alias-modal" uk-modal="bg-close: false">
  <div class="uk-modal-dialog">
    <div class="uk-modal-header">
      <h2 class="uk-modal-title">{{modal.title}}</h2>
    </div>
    <div class="uk-modal-body">
      <div class="uk-margin">
        <label class="uk-form-label">The following alias:</label>
        <%= text_field_tag :alias, "", class: "uk-input", placeholder: "ex", "v-model": "alias.current.value" %>
        <small class="esm-text-color-red" v-show="!validAlias">{{modal.error}}</small>
      </div>
      <label class="uk-form-label">Represents:</label>
      <div class="uk-margin-bottom">
        <label>
          <%= radio_button_tag :replacement_option, :community, true, class: "uk-radio", "v-model": "alias.current.type", "@change": "resetSelected" %>
          A community
        </label>
        <div class="uk-margin-left">
          <multiselect
            v-model="selectedCommunity"
            :options="communities"
            :close-on-select="true"
            placeholder="Type to search communities"
            track-by="id"
            label="name"
            :disabled="alias.current.type != 'community'"
            @input="onSelectedType"
          >
            <span slot="noResult">No matches. Please adjust your search and try again</span>
          </multiselect>
        </div>
      </div>
      <div class="uk-margin">
        <label>
          <%= radio_button_tag :replacement_option, :server, false, class: "uk-radio", "v-model": "alias.current.type", "@change": "resetSelected" %>
          A server
        </label>
        <div class="uk-margin-left">
          <multiselect
              v-model="selectedServer"
              :options="servers"
              :close-on-select="true"
              group-values="servers"
              group-label="name"
              placeholder="Type to search servers"
              track-by="id"
              label="name"
              :limit="1"
              :disabled="alias.current.type != 'server'"
              @input="onSelectedType"
            >
            <span slot="noResult">No matches. Please adjust your search and try again</span>
          </multiselect>
        </div>
      </div>
    </div>
    <div class="uk-modal-footer">
      <div uk-grid>
        <div class="uk-width-1-2">
          <button class="uk-button uk-button-default uk-modal-close uk-width-1-1" type="button">Cancel</button>
        </div>
        <div class="uk-width-1-2">
          <button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="button" :disabled="!submitButtonEnabled" @click="modal.onSubmitClick">{{modal.submitButton}}</button>
        </div>
      </div>
    </div>
  </div>
</div>