<div class="row">
  <div class="col-md-6">
    <input data-ng-model="resources.node.languages_enabled" class="d-none" />
    <input data-ng-model="resources.node.default_language" class="d-none" />
    <div class="form-group">
      <label data-translate>Languages</label>
      <button class="btn btn-sm btn-primary add-language-btn" data-ng-click="toggleLangSelect()">
        <i class="fa-solid fa-plus"></i>
        <span data-translate>Add</span>
      </button>
      <div>
        <div id="LanguageAdder" class="row">
          <div class="col-md-12" data-ng-if="showLangSelect">
            <ui-select data-ng-model="selected.value" data-theme="bootstrap" data-on-select='enableLanguage($item);'>
              <ui-select-match data-ng-attr-placeholder="{{'Search' | translate}}">
                <span data-ng-bind="$select.selected.name"></span>
              </ui-select-match>
              <ui-select-choices data-repeat="language in resources.node.languages_supported | filter:langNotEnabledFilter | filter: {name: $select.search}">
                <span data-ng-bind-html="language.name | highlight: $select.search"></span>
                <span>[{{language.code}}]</span>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <br/>
        <ul class="selectionList">
          <li data-ng-repeat="lang_code in resources.node.languages_enabled">
            <span class="action-btns">
              <span data-ng-if="lang_code === resources.node.default_language" class="default-language">
                <i class="fa-solid fa-check"></i>
              </span>
              <span data-ng-if="lang_code !== resources.node.default_language" class="non-default-language"
                data-uib-tooltip="{{'Use as default' | translate}}"
                data-ng-click="resources.node.default_language = lang_code">
                <i class="fa-solid fa-check"></i>
              </span>
              <span data-ng-if="lang_code !== resources.node.default_language" data-ng-click="removeLang($index, lang_code)" data-uib-tooltip="{{'Remove' | translate}}" class="remove-lang-btn">
                <i class="fa-solid fa-times"></i>
              </span>
              <i data-ng-if="lang_code === resources.node.default_language" class="fa-solid fa-times disabled-icon"></i>
            </span>
            <label>{{languages_supported[lang_code]['name']}} [{{lang_code}}]</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary"
              data-ng-disabled="contentForm.$invalid"
              data-ng-click="updateNode()" type="submit">
        <i class="fa-solid fa-check"></i>
        <span data-translate>Save</span>
      </button>
    </div>
  </div>
</div>
