<div class="card-box">
  <button
    type="button"
    class="btn btn-sm btn-primary waves-effect waves-light float-right"
    (click)="toggle()"
  >
    <span class="btn-label">
      <i class="mdi mdi-plus"></i>
    </span>
    Požádat o výběr
  </button>
  <h4 class="header-title mb-3">Žádosti o výběry</h4>
  <div *ngIf="showRequestForm" class="row mb-2">
    <div class="col-12">
      <form #f="ngForm" (ngSubmit)="addRequest(f.value)">
        <div class="row">
          <div class="col-12">
            <div class="m-auto form-group text-center w-50">
              <h3 class="page-title">Žádost o výběr</h3>
              <span class="text-center"
                >Prosím berte na vědomí, že za předčasný výběr je účtován
                správní poplatek 5% z celkové částky investice. Děkujeme za
                pochopení.</span
              >
              <input
                type="text"
                ngModel
                name="move"
                class="form-control mt-2 mb-2"
                placeholder="Zadejte procenta"
              />
              <button class="btn btn-primary btn-block">Odeslat</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-centered table-hover mb-0">
      <tbody>
        <tr *ngFor="let r of requests">
          <td class="pl-0 pr-0" style="width: 20px;">
            <i *ngIf="r?.state.state === 'APPROVED'" class="mdi mdi-check mdi-18px text-success"></i>
            <i *ngIf="r?.state.state === 'NEW'" class="mdi mdi-alarm mdi-18px text-warning"></i>
            <i *ngIf="r?.state.state === 'DECLINED'" class="mdi mdi-close mdi-18px text-danger"></i>
            <i *ngIf="r?.state.state === 'PAYED'" class="mdi mdi-cash mdi-18px text-success"></i>
          </td>
          <td>
            <span class="ml-2">{{ r.created_at_formated }}</span>
          </td>
          <td>
            {{ r.move + "%" }}
          </td>
          <td>
            {{ r.state.state }}
          </td>
          <td>
            <button
              *ngIf="r?.state.state === 'NEW'"
              (click)="deleteRequest(r.investment_request_ID)"
              class="btn btn-danger btn-xs"
            >
              X
            </button>
          </td>
          <td class="text-right pr-0"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- end table-responsive -->
</div>