<!--********************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" title="{{ 'administration.edit-preference.tooltip-close' | translate }}" class="close" (click)="closeDialog()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" translate>administration.edit-preference.title-preferences-editor</h4>
      </div>
      <div class="modal-body">
        <form [formGroup]="preferenceForm" novalidate>
          <ul class="list-group">
            <li>
              <div class="block">
                <label>{{ 'administration.edit-preference.lbl-key' | translate }}: </label>
                <input type="text" class="form-control" formControlName="key" [readonly]="!isKeyEmpty">
              </div>
            </li>
            <li>
              <label>{{ 'administration.edit-preference.lbl-scope' | translate }}: </label>
              <input type="text" class="form-control" formControlName="scope" [readonly]="true">
            </li>
            <li *ngIf="showSource">
              <label>{{ 'administration.edit-preference.lbl-source' | translate }}: </label>
              <select class="form-control" formControlName="source">
                <option *ngFor="let env of envs">{{env.sourceName}}</option>
              </select>
            </li>
            <li *ngIf="showUser">
              <label i18n="administration_edit-preference User|User">User: </label>
              <input type="text" class="form-control" formControlName="user" [readonly]=true placeholder="auto-generated">
            </li>
            <li>
              <div class="form-group">
                <label for="comment">{{ 'administration.edit-preference.lbl-value' | translate }}:</label>
                <textarea class="form-control" formControlName="value" rows="5" id="value"></textarea>
              </div>
            </li>
          </ul>
          <div class="row" style="margin-top: 20px;">
            <div class="col-md-12">
              <button type="button" class="btn btn-default" (click)="closeDialog()">
                <span class="fa fa-times"></span> 
                <span translate>administration.edit-preference.btn-cancel</span>
              </button>
              <button type="button" class="btn btn-default pull-right" (click)="onSave()" [disabled]="!preferenceForm.valid">
                <span class="fa fa-download"></span> <span translate>administration.edit-preference.btn-save</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>