<div class="container-fluid bg-light">
  <div class="create-article-title title">
    Adaugare articol nou
  </div>
  <div class="backButton">
    <button class="btn btn-danger-gradiant" (click) = "backToUserArticles()">Inapoi</button>
  </div>
<div class="col-md-6 offset-md-3 bg-white createArticleForm ">
  <label>
    <input
      type="file"
      class="text-nowrap text-truncate upload"
      (change)="selectFile($event)"
    />
  </label>
<!--  <button-->
<!--    class="btn btn-success btn-sm"-->
<!--    [disabled]="!selectedFiles"-->
<!--    (click)="upload()"-->
<!--  >-->
<!--    Upload-->
<!--  </button>-->
  <div *ngIf="currentFileUpload" class="progress mt-2">
    <div
      class="progress-bar progress-bar-info"
      role="progressbar"
      attr.aria-valuenow="{{ percentage }}"
      aria-valuemin="0"
      aria-valuemax="100"
      [ngStyle]="{ width: percentage + '%' }"
    >
      {{ percentage }}%
    </div>
  </div>
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label> Titlu </label>
      <input
        type="text"
        class="form-control"
        id="title"
        [(ngModel)]="articleToSave.title"
        name="title"
      />
    </div>

    <div class="form-group">
      <label> Locatie</label>
      <input
        type="text"
        class="form-control"
        id="location"
        [(ngModel)]="articleToSave.location"
        name="location"
      />
    </div>

    <div class="form-group">
      <label> Email contact </label>
      <input
        type="text"
        class="form-control"
        id="email"
        [(ngModel)]="articleToSave.email"
        name="email"
      />
    </div>
    <div class="form-group">
      <label> Telefon </label>
      <input
        type="text"
        class="form-control"
        id="phone"
        [(ngModel)]="articleToSave.phone"
        name="phone"
      />
    </div>
    <div class="form-group">
      <label> Descriere </label>
      <textarea type="text"
                id="description"
                [(ngModel)]="articleToSave.description"
                name="description"
                class="md-textarea form-control"
                mdbInput></textarea>
    </div>
    <button class="btn btn-success" type="submit">Salvare</button>
    <button class="btn btn-danger"  (click)="backToUserArticles()">Cancel</button>
<!--    <button type="button" pButton pRipple  (click)="showSuccess()" label="Success" class="p-button-success"></button>-->
    <p-toast position="top-right"></p-toast>
  </form>
<!-- <div *ngFor="let img of fileUploads">-->
<!--   {{img.userId}}-->
<!--   {{img.articleId}}-->
<!--   {{img.url}}-->
<!--   <hr>-->
<!-- </div>-->
</div>
</div>