rdt-client/client/src/app/torrent-table/torrent-table.component.html

<div class="notification is-danger is-light" *ngIf="error && error.length > 0">
  An error has occured: {{ error }}<br />
  Please refresh the screen after fixing this error.
</div>
<div class="table-container">
  <table class="table is-fullwidth is-hoverable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Files</th>
        <th>Downloads</th>
        <th>Auto</th>
        <th>Size</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let torrent of torrents; trackBy: trackByMethod">
        <tr
          app-torrent-row
          [torrent]="torrent"
          (click)="selectTorrent(torrent)"
          (delete)="showDeleteModal($event)"
          (retry)="showRetryModal($event)"
        ></tr>
        <ng-container *ngIf="showFiles[torrent.torrentId]">
          <tr class="separator">
            <td colspan="10">Downloads</td>
          </tr>
          <tr app-torrent-download [download]="download" *ngFor="let download of torrent.downloads"></tr>
          <tr class="separator">
            <td colspan="10">Files in torrent</td>
          </tr>
          <tr app-torrent-file [file]="file" *ngFor="let file of torrent.files"></tr>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
</div>

<div class="modal" [class.is-active]="isDeleteModalActive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Delete torrent</p>
      <button class="delete" aria-label="close" (click)="deleteCancel()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label"></label>
        <div class="control">
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteData" />
            Delete Torrent from local RealDebrid Client
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteRdTorrent" />
            Delete Torrent from RealDebrid
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteLocalFiles" />
            Delete local files
          </label>
        </div>
      </div>
      <div class="notification is-primary">
        Deleting a torrent from RealDebrid will automatically delete it here too.
      </div>
      <div class="notification is-danger is-light" *ngIf="deleteError?.length > 0">
        Error deleting torrent: {{ deleteError }}
      </div>
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        (click)="deleteOk()"
        [disabled]="deleting"
        [ngClass]="{ 'is-loading': deleting }"
      >
        Delete
      </button>
      <button class="button" (click)="deleteCancel()" [disabled]="deleting" [ngClass]="{ 'is-loading': deleting }">
        Cancel
      </button>
    </footer>
  </div>
</div>

<div class="modal" [class.is-active]="isRetryModalActive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Retry torrent</p>
      <button class="delete" aria-label="close" (click)="retryCancel()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">Retry</label>
        <div class="control">
          <label class="radio">
            <input type="radio" name="retry" [value]="0" [(ngModel)]="retry" />
            Retry on Real-Debrid
          </label>
          <br />
          <label class="radio">
            <input type="radio" name="retry" [value]="1" [(ngModel)]="retry" />
            Retry downloading locally
          </label>
        </div>
      </div>
      <div class="notification is-danger is-light" *ngIf="retryError?.length > 0">
        Error retrying torrent: {{ retryError }}
      </div>
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        (click)="retryOk()"
        [disabled]="retrying"
        [ngClass]="{ 'is-loading': retrying }"
      >
        Retry
      </button>
      <button class="button" (click)="retryCancel()" [disabled]="retrying" [ngClass]="{ 'is-loading': retrying }">
        Cancel
      </button>
    </footer>
  </div>
</div>