@if (error && error.length > 0) {
  <div class="notification is-danger is-light">
    An error has occurred: {{ error }}<br />
    Please refresh the screen after fixing this error.
  </div>
}
@if (diskSpaceStatus?.isPaused) {
  <div class="notification is-warning">
    <strong>Bezzad downloads paused due to low disk space</strong>
    <br />
    Available: {{ diskSpaceStatus.availableSpaceGB }} GB | Resume at: {{ diskSpaceStatus.thresholdGB * 2 }} GB
    <br />
    <small>Last check: {{ diskSpaceStatus.lastCheckTime | date: "short" }}</small>
  </div>
}
@if (rateLimitStatus?.nextDequeueTime) {
  <div class="notification is-warning">
    <strong>Debrid provider rate limit reached</strong>
    <br />
    Processing paused until {{ rateLimitStatus.nextDequeueTime | date: "medium" }}
    @if (rateLimitStatus.secondsRemaining > 0) {
      ({{ rateLimitStatus.secondsRemaining | number: "1.0-0" }} seconds remaining)
    }
  </div>
}
<div class="table-container">
  @if (!isMobile) {
    <table class="table is-fullwidth is-hoverable">
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              (click)="toggleDeleteSelectAll($event)"
              [checked]="selectedTorrents.length > 0 && selectedTorrents.length === torrents.length"
            />
          </th>
          <th (click)="sort('rdName')">Name</th>
          <th (click)="sort('category')">Category</th>
          <th (click)="sort('priority')">Priority</th>
          <th (click)="sort('rdSeeders')">Seeders</th>
          <th (click)="sort('files.length')">Files</th>
          <th (click)="sort('downloads.length')">Downloads</th>
          <th (click)="sort('rdSize')">Size</th>
          <th (click)="sort('added')">Requested</th>
          <th (click)="sort('status')">Status</th>
        </tr>
      </thead>
      <tbody>
        @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
          <tr>
            <td>
              <input
                type="checkbox"
                (click)="toggleSelect(torrent.torrentId)"
                [checked]="selectedTorrents.includes(torrent.torrentId)"
              />
            </td>
            <td (click)="openTorrent(torrent.torrentId)" class="break-all">
              {{ torrent.rdName }}
            </td>
            <td>
              {{ torrent.category }}
            </td>
            <td>
              {{ torrent.priority }}
            </td>
            <td>
              {{ torrent.rdSeeders }}
            </td>
            <td>
              {{ torrent.files.length | number }}
            </td>
            <td>
              {{ torrent.downloads.length | number }}
            </td>
            <td>
              {{ torrent.rdSize | filesize }}
            </td>
            <td>
              {{ torrent.added | date: "medium" }}
            </td>
            <td>
              {{ torrent | status }}
            </td>
          </tr>
        }
      </tbody>
    </table>
  } @else {
    <div class="mobile-cards">
      @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
        <div class="box mobile-card" [class.is-selected]="selectedTorrents.includes(torrent.torrentId)">
          <div class="mobile-card-checkbox">
            <input
              type="checkbox"
              (click)="toggleSelect(torrent.torrentId)"
              [checked]="selectedTorrents.includes(torrent.torrentId)"
            />
          </div>
          <div class="mobile-card-body" (click)="openTorrent(torrent.torrentId)">
            <p class="mobile-card-name">{{ torrent.rdName }}</p>
            <div class="tags mb-2">
              <span class="tag is-info is-light">{{ torrent | status }}</span>
              @if (torrent.category) {
                <span class="tag is-light">{{ torrent.category }}</span>
              }
            </div>
            <div class="mobile-card-details">
              <span class="mobile-card-detail"
                ><span class="detail-label">Size</span> {{ torrent.rdSize | filesize }}</span
              >
              <span class="mobile-card-detail"><span class="detail-label">Seeders</span> {{ torrent.rdSeeders }}</span>
              <span class="mobile-card-detail"
                ><span class="detail-label">Files</span> {{ torrent.files.length | number }}</span
              >
              <span class="mobile-card-detail"
                ><span class="detail-label">Downloads</span> {{ torrent.downloads.length | number }}</span
              >
            </div>
          </div>
        </div>
      }
    </div>
  }

  <div class="flex-container">
    @if (torrents.length > 0) {
      <button class="button is-danger" (click)="showDeleteModal()" [disabled]="selectedTorrents.length === 0">
        Delete Selected
      </button>
      <button class="button is-primary" (click)="showRetryModal()" [disabled]="selectedTorrents.length === 0">
        Retry Selected
      </button>
      <button class="button is-primary" (click)="changeSettingsModal()" [disabled]="selectedTorrents.length === 0">
        Change Settings
      </button>
    }
  </div>
</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 selected torrents</p>
      <button class="delete" aria-label="close" (click)="deleteCancel()"></button>
    </header>
    <section class="modal-card-body">
      <p>Are you sure you want to delete these torrent?</p>
      <div class="field">
        <label class="label"></label>
        <div class="control">
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteData" (change)="updateDeleteSelectAll()" />
            Delete Torrents from client
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteRdTorrent" (change)="updateDeleteSelectAll()" />
            Delete Torrents from provider
          </label>
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteLocalFiles" (change)="updateDeleteSelectAll()" />
            Delete local files
          </label>
          <br />
          <br />
          <label class="checkbox">
            <input type="checkbox" [(ngModel)]="deleteSelectAll" (change)="toggleDeleteSelectAllOptions()" />
            Select All
          </label>
        </div>
      </div>
      <div class="notification is-primary">
        Deleting a torrent from Real-Debrid will automatically delete it here too.
      </div>
      @if (deleteError?.length > 0) {
        <div class="notification is-danger is-light">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 selected
      </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 selected torrents</p>
      <button class="delete" aria-label="close" (click)="retryCancel()"></button>
    </header>
    <section class="modal-card-body">
      <p>Are you sure you want to retry these torrent?</p>
      <p>
        This action will delete all the torrent data + all local downloads. Then it will re-add the original magnet link
        or torrent file to the debrid provider.
      </p>
      @if (retryError?.length > 0) {
        <div class="notification is-danger is-light">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 selected
      </button>
      <button class="button" (click)="retryCancel()" [disabled]="retrying" [ngClass]="{ 'is-loading': retrying }">
        Cancel
      </button>
    </footer>
  </div>
</div>

<div class="modal" [class.is-active]="isChangeSettingsModalActive">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Change settings for selected torrents</p>
      <button class="delete" aria-label="close" (click)="changeSettingsCancel()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field">
        <label class="label">Downloader</label>
        <div class="control select is-fullwidth">
          <select [(ngModel)]="updateSettingsDownloadClient">
            <option [ngValue]="null"></option>
            <option [ngValue]="0">Bezzad</option>
            <option [ngValue]="1">Aria2c</option>
            <option [ngValue]="2">Symlink Downloader</option>
            <option [ngValue]="3">Synology DownloadStation</option>
          </select>
        </div>
        <p class="help">
          Select which downloader is used to download this torrent from the debrid provider to your host.
        </p>
      </div>
      <div class="field">
        <label class="label">Post Download Action</label>
        <div class="control select is-fullwidth">
          <select [(ngModel)]="updateSettingsHostDownloadAction">
            <option [ngValue]="0">Download all files to host</option>
            <option [ngValue]="1">Don't download any files to host</option>
          </select>
        </div>
        <p class="help">
          When a torrent is finished downloading on the provider, perform this action. Use this setting if you only want
          to add files to Real-Debrid but not download them to the host.
        </p>
      </div>
      <div class="field">
        <label class="label">Category</label>
        <div class="control">
          <input class="input" type="text" [(ngModel)]="updateSettingsCategory" />
        </div>
        <p class="help">The category becomes a sub-folder in your main download path.</p>
      </div>
      <div class="field">
        <label class="label">Priority</label>
        <div class="control">
          <input class="input" type="number" step="1" [(ngModel)]="updateSettingsPriority" />
        </div>
        <p class="help">
          Set the priority for this torrent where 1 is the highest. When empty it will be assigned the lowest priority.
        </p>
      </div>
      <div class="field">
        <label class="label">Automatic retry downloads</label>
        <div class="control">
          <input
            class="input"
            type="number"
            max="1000"
            min="0"
            step="1"
            [(ngModel)]="updateSettingsDownloadRetryAttempts"
          />
        </div>
        <p class="help">When a single download fails it will retry it this many times before marking it as failed.</p>
      </div>
      <div class="field">
        <label class="label">Automatic retry torrent</label>
        <div class="control">
          <input
            class="input"
            type="number"
            max="1000"
            min="0"
            step="1"
            [(ngModel)]="updateSettingsTorrentRetryAttempts"
          />
        </div>
        <p class="help">
          When a single download has failed multiple times (see setting above) or when the torrent itself received an
          error it will retry the full torrent this many times before marking it failed.
        </p>
      </div>
      <div class="field">
        <label class="label">Delete download when in error</label>
        <div class="control">
          <input class="input" type="number" max="1000" min="0" step="1" [(ngModel)]="updateSettingsDeleteOnError" />
        </div>
        <p class="help">
          When a download has been in error for this many minutes, delete it from the provider and the client. 0 to
          disable.
        </p>
      </div>
      <div class="field">
        <label class="label">Torrent maximum lifetime</label>
        <div class="control">
          <input
            class="input"
            type="number"
            max="100000"
            min="0"
            step="1"
            [(ngModel)]="updateSettingsTorrentLifetime"
          />
        </div>
        <p class="help">
          The maximum lifetime of a torrent in minutes. When this time has passed, mark the torrent as error. If the
          torrent is completed and has downloads, the lifetime setting will not apply. 0 to disable.
        </p>
      </div>

      @if (changeSettingsError?.length > 0) {
        <div class="notification is-danger is-light">Error changing settings: {{ changeSettingsError }}</div>
      }
    </section>
    <footer class="modal-card-foot">
      <button
        class="button is-success"
        (click)="changeSettingsOk()"
        [disabled]="changingSettings"
        [ngClass]="{ 'is-loading': changingSettings }"
      >
        Save
      </button>
      <button
        class="button"
        (click)="changeSettingsCancel()"
        [disabled]="changingSettings"
        [ngClass]="{ 'is-loading': changingSettings }"
      >
        Cancel
      </button>
    </footer>
  </div>
</div>