<app-panel class="chart-details-usage" [border]=true>
  <h1>Install</h1>
  <mat-tab-group>
    <mat-tab label="Helm CLI">
      <div class="chart-details-usage__repository">
        <h2 class="chart-details-usage__label">Add {{ chart.attributes.repo.name }} repository</h2>
        <mat-form-field>
          <input matInput floatingPlaceholder=false [value]=repoAddInstructions>
        </mat-form-field>
        <button mat-button ngxClipboard [cbContent]="repoAddInstructions" (cbOnSuccess)="showSnackBar()"
          angulartics2On="click" angularticsEvent="RepositoryCopy" angularticsCategory="{{ chart.id }}"
          [angularticsProperties]="{ label: currentVersion }">
          <mat-icon svgIcon="content-copy"></mat-icon>
        </button>
      </div>
      <div>
        <h2 class="chart-details-usage__label">Install chart</h2>
        <mat-form-field>
          <input matInput readonly floatingPlaceholder=false [value]=installInstructions>
        </mat-form-field>
        <button mat-button ngxClipboard [cbContent]="installInstructions" (cbOnSuccess)="showSnackBar()"
          angulartics2On="click" angularticsEvent="ChartInstallationCopy"
          angularticsCategory="{{ chart.id }}" [angularticsProperties]="{ label: currentVersion }">
          <mat-icon svgIcon="content-copy"></mat-icon>
        </button>
      </div>
      <p class="help-link">
        <a href="https://helm.sh/docs/using_helm/#quickstart" target="_blank"
          title="How to install Helm">Need Helm?</a>
      </p>
    </mat-tab>
  </mat-tab-group>
</app-panel>
