<!--********************************************************************************
 * Copyright (c) 2015-2018 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
 *
 ********************************************************************************-->


<button type="button" class="btn btn-default" (click)="lgModal.show()" [disabled]="disabled" style="border-bottom-left-radius: 0; border-top-left-radius: 0;">{{ 'filerelease.mdm-filerelease-create.btn-release-request' | translate }}</button>

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{ 'filerelease.mdm-filerelease-create.title-release' | translate }}</h4>
      </div>
      <div class="modal-body">
        <form (ngSubmit)="createRelease()" #request="ngForm">
          <div class="form-group">
            <div [ngClass]="validity.valid ? 'has-success' : 'has-error'">
              <label class="col-form-label col-sm-2" for="validity">{{ 'filerelease.mdm-filerelease-create.lbl-validity-days' | translate }}:</label>
              <div class="col-sm-10">
                <select name="validity" [(ngModel)]="release.validity" ngControl="validity" #validity="ngModel" class="form-control" required>
                  <option *ngFor="let opt of expire" [ngValue]="opt">{{opt}}</option>
                </select>
              </div>
            </div>

            <div [ngClass]="format.valid ? 'has-success' : 'has-error'">
              <label class="col-form-label col-sm-2" for="format">{{ 'filerelease.mdm-filerelease-create.lbl-format' | translate }}:</label>
              <div class="col-sm-10">
                <select name="format" [(ngModel)]="release.format" ngControl="format" #format="ngModel" class="form-control" required>
                  <option *ngFor="let opt of options" [ngValue]="opt">{{ getFormat(opt) | translate }}</option>
                </select>
              </div>
            </div>

            <div [ngClass]="orderMessage.valid ? 'has-success' : 'has-error'">
              <label class="col-form-label col-sm-2" for="orderMessage">{{ 'filerelease.mdm-filerelease-create.lbl-reason' | translate }}:</label>
              <div class="col-sm-10">
                <textarea name="orderMessage" [(ngModel)]="release.orderMessage" ngControl="orderMessage" #orderMessage="ngModel" cols="35" rows="4" class="form-control" required></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12" style="margin-top: 15px; margin-bottom:-15px; padding-right: 30px; text-align: right;">
                <div class="btn-group">
                  <button type="submit" class="btn btn-default" [disabled]=!request.form.valid>{{ 'filerelease.mdm-filerelease-create.btn-send' | translate }}</button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>