<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label data-translate>Language:</label>
      <select class="form-control" data-ng-model="vars.language_to_customize" data-ng-change="get_l10n(vars.language_to_customize)">
        <option data-ng-repeat="item in languages_enabled_selector" value="{{item.code}}">{{item.name}}</option>
      </select>
    </div>
    <div class="form-group">
      <label data-translate>Add custom text</label>
      <select class="form-control" data-ng-model="vars.text_to_customize" data-ng-change="vars.custom_text = custom_texts[vars.text_to_customize] ? custom_texts[vars.text_to_customize] : default_texts[vars.text_to_customize]">
        <option data-ng-repeat="item in custom_texts_selector" value="{{item.key}}">{{item.value}}</option>
      </select>
      <div data-ng-show="vars.text_to_customize">
        <label data-translate>Custom text</label>
        <div>
          <textarea class="form-control" data-ng-model="vars.custom_text"></textarea>
        </div>
      </div>
      <br />
      <div class="form-group clearfix">
        <button id="addCustomTextButton" class="float-left btn btn-primary" data-ng-disabled="!vars.text_to_customize" type="submit" data-ng-click="custom_texts[vars.text_to_customize] = vars.custom_text; custom_texts.$update({'lang': vars.language_to_customize})">
          <i class="fa-solid fa-plus"></i>
          <span data-translate>Add</span>
        </button>
      </div>
    </div>
  </div>
</div>
<br /><br />
<div class="row" data-ng-if="custom_texts">
  <div class="col-md-12">
    <div class="form-group">
      <table class="table table-striped">
        <thead>
          <tr>
            <th data-translate>Original text</th>
            <th data-translate>Original translation</th>
            <th data-translate>Custom translation</th>
          </tr>
        </thead>
        <tbody>
          <tr data-ng-repeat="(key, value) in custom_texts" data-ng-class="{danger: !default_texts[key]}" data-uib-tooltip="{{!default_texts[key] ? 'This custom text is no longer displayed on the platform. The original text has either changed or been removed.' : '' | translate}}">
            <td class="preformatted">{{key}}</td>
            <td class="preformatted">{{default_texts[key]}}</td>
            <td class="clearfix">
              <span class="preformatted">{{custom_texts[key]}}</span>
              <button class="deleteCustomTextButton float-right btn btn-sm btn-danger" data-ng-click="Utils.deleteFromDict(custom_texts, key); custom_texts.$update({'lang': vars.language_to_customize})">
                <i class="fa" data-ng-class="{'fa-times': default_texts[key], 'fa-alert': !default_texts[key]}"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
