consolidate-library.component.html

<div class="ui-g">
  <form [formGroup]="consolidationForm">
    <div class="ui-g-12">
      <p-checkbox id="delete-physical-files"
                  [binary]="true"
                  (onChange)="showDeleteFilesWarning($event)"
                  formControlName="deletePhysicalFiles"></p-checkbox>
      <label for="delete-physical-files">{{"library.move-comics.label.delete-physical-files"|translate}}</label>
    </div>
    <div class="ui-g-12">
      <label for="cx-target-directory"
             class="cx-input-label">{{"library.move-comics.label.target-directory"|translate}}</label>
    </div>
    <div class="ui-g-12">
      <input pInputText
             id="cx-target-directory"
             class="cx-input-field"
             formControlName="targetDirectory">
    </div>
    <div class="ui-g-12">
      <label for="cx-renaming-rule"
             class="cx-input-label">{{"library.move-comics.label.renaming-rule"|translate}}</label>
    </div>
    <div class="ui-g-12">
      <input pInputText
             id="cx-renaming-rule"
             class="cx-input-field"
             formControlName="renamingRule">
    </div>
    <div class="ui-g-12">
      <p>{{"library.move-comics.variables-note"|translate}}</p>

      <pre>{{"library.move-comics.variables-example"|translate}}</pre>

      <p>{{"library.move-comics.variables-example-note"|translate}}</p>
      <p-table [value]="VARIABLES">
        <ng-template pTemplate="colgroup">
          <col class="cx-table-column-large"/>
          <col/>
        </ng-template>
        <ng-template pTemplate="header">
          <tr>
            <th id="variable-name">{{"library.move-comics.label.variable-name"|translate}}</th>
            <th id="variable-description">{{"library.move-comics.label.variable-description"|translate}}</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body"
                     let-variable>
          <tr>
            <td [pTooltip]="'library.move-comics.variable.' + variable|translate">${{variable}}</td>
            <td class="cx-no-wrap-text">{{"library.move-comics.variable." + variable|translate}}</td>
          </tr>
        </ng-template>
      </p-table>
    </div>
    <div class="ui-g-12">
      <p>{{"library.move-comics.warning-text"|translate}}</p>
    </div>
    <div class="ui-g-12 cx-container-centered-text">
      <button pButton
              type="button"
              class="cx-action-button"
              [label]="'library.move-comics.button.start'|translate"
              (click)="consolidateLibrary()"></button>
    </div>
  </form>
</div>