<h3 class="ui header">Paths</h3>
<div class="ui form">
  <div class="field">
    <label>Chart library directory</label>
    <div class="ui action input">
      <input [value]="settingsService.libraryDirectory || 'No folder selected'" class="default-cursor" readonly
        type="text" placeholder="No directory selected!">
      <button *ngIf="settingsService.libraryDirectory != undefined" (click)="openLibraryDirectory()"
        class="ui button">Open Folder</button>
      <button (click)="getLibraryDirectory()" class="ui button positive">Choose</button>
    </div>
  </div>
</div>

<h3 class="ui header">Cache</h3>
<div>Current Cache Size: <div class="ui label" style="margin-left: 1em;">{{cacheSize}}</div>
</div>
<button style="margin-top: 0.5em;" (click)="clearCache()" class="ui button">Clear Cache</button>

<h3 class="ui header">Downloads</h3>
<div class="ui form">
  <div *ngIf="loginAvailable" class="field">
    <label>Google rate limit delay</label>
    <div id="rateLimitInput" class="ui right labeled input">
      <input type="number" [value]="settingsService.rateLimitDelay" (input)="changeRateLimit($event)">
      <div class="ui basic label">
        sec
      </div>
    </div>
  </div>
  <!-- TODO: Uncomment this when switching to the OAuth2 Login system -->
  <div *ngIf="loginAvailable" class="field">
    <div class="ui button" data-tooltip="Removes rate limit delay" data-position="right center" (click)="googleLogin()">
      <i class="google icon"></i>Sign in with Google
    </div>
  </div>
  <div *ngIf="!loginAvailable" class="field">
    <div class="ui button" (click)="googleLogout()">
      <i class="google icon"></i>Sign out
    </div>
  </div>
</div>
<div *ngIf="settingsService.rateLimitDelay < 30" class="ui warning message">
  <i class="exclamation circle icon"></i>
  <b>Warning:</b> downloading files from Google with a delay less than about 30 seconds will eventually cause Google to
  refuse download requests from this program for a few hours. This can be avoided by authenticating with your Google account.
</div>

<!-- <h3 class="ui header">Theme</h3>
<div #themeDropdown class="ui selection dropdown mr">
  <input type="hidden" name="sort" [value]="settingsService.theme">
  <i class="dropdown icon"></i>
  <div class="default text">{{settingsService.theme}}</div>
  <div class="menu">
    <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}</div>
  </div>
</div> -->

<div class="bottom">
  <div class="ui buttons">
    <button *ngIf="updateAvailable" class="ui labeled icon positive button" (click)="downloadUpdate()">
      <i class="left alternate icon" [ngClass]="(updateDownloaded ? 'sync' : 'cloud download')"></i>{{downloadUpdateText}}</button>
    <button *ngIf="updateAvailable === null" class="ui labeled yellow icon button" [class.disabled]="updateRetrying" (click)="retryUpdate()">
      <i class="left alternate sync alternate icon" [class.loading]="updateRetrying"></i>{{retryUpdateText}}</button>
    <button id="versionNumberButton" class="ui basic disabled button">{{currentVersion}}</button>
  </div>

  <button class="ui basic icon button" data-tooltip="Toggle developer tools" data-position="top right"
    (click)="toggleDevTools()">
    <i class="cog icon"></i>
  </button>
</div>