portainer/portainer

<div class="row">
  <!-- helmchart-form -->
  <div class="col-sm-12 p-0" ng-if="$ctrl.state.chart">
    <rd-widget>
      <div class="flex">
        <div class="basis-3/4 rounded-[8px] m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
          <div class="vertical-center p-5">
            <fallback-image src="$ctrl.state.chart.icon" fallback-icon="$ctrl.fallbackIcon" class-name="'h-16 w-16'" size="'lg'"></fallback-image>
            <div class="font-medium ml-4">
              <div class="toolBarTitle text-[24px] mb-2">
                {{ $ctrl.state.chart.name }}
                <span class="space-left text-[14px] vertical-center font-normal">
                  <pr-icon icon="'svg-helm'" mode="'primary'"></pr-icon>
                  Helm
                </span>
              </div>
              <div class="text-muted text-xs" ng-bind-html="$ctrl.state.chart.description"></div>
            </div>
          </div>
        </div>
        <div class="basis-1/4">
          <div class="h-full w-full vertical-center justify-end pr-5">
            <button type="button" class="btn btn-sm btn-link !text-gray-8 hover:no-underline th-highcontrast:!text-white th-dark:!text-white" ng-click="$ctrl.clearHelmChart()">
              Clear selection
              <pr-icon icon="'x'" class="ml-1"></pr-icon>
            </button>
          </div>
        </div>
      </div>
    </rd-widget>

    <form class="form-horizontal" name="$ctrl.helmTemplateCreationForm">
      <div class="form-group mt-4">
        <div class="col-sm-12">
          <button
            ng-if="!$ctrl.state.showCustomValues && !$ctrl.state.loadingValues"
            class="btn btn-xs btn-default vertical-center !ml-0 mr-2"
            ng-click="$ctrl.state.showCustomValues = true;"
          >
            <pr-icon icon="'plus'" class="vertical-center"></pr-icon>
            Show custom values
          </button>
          <span class="small interactive vertical-center" ng-if="$ctrl.state.loadingValues" role="status">
            <pr-icon icon="'refresh-cw'" class="mr-1"></pr-icon>
            Loading values.yaml...
          </span>
          <button ng-if="$ctrl.state.showCustomValues" class="btn btn-xs btn-default vertical-center !ml-0 mr-2" ng-click="$ctrl.state.showCustomValues = false;">
            <pr-icon icon="'minus'" class="vertical-center"></pr-icon>
            Hide custom values
          </button>
        </div>
      </div>
      <!-- values override -->
      <div ng-if="$ctrl.state.showCustomValues">
        <!-- web-editor -->
        <div class="form-group">
          <div class="col-sm-12">
            <web-editor-form
              identifier="helm-app-creation-editor"
              value="$ctrl.state.values"
              on-change="($ctrl.editorUpdate)"
              yml="true"
              placeholder="Define or paste the content of your values yaml file here"
            >
              <editor-description class="vertical-center">
                <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                <span>
                  You can get more information about Helm values file format in the
                  <a href="https://helm.sh/docs/chart_template_guide/values_files/" target="_blank" class="hyperlink">official documentation</a>.
                </span>
              </editor-description>
            </web-editor-form>
          </div>
        </div>
        <!-- !web-editor -->
      </div>
      <!-- !values override -->
      <!-- helm actions -->
      <div class="col-sm-12 form-section-title"> Actions </div>
      <div class="form-group">
        <div class="col-sm-12">
          <button
            type="button"
            class="btn btn-primary btn-sm !ml-0"
            ng-disabled="!$ctrl.state.resourcePool || $ctrl.state.loadingValues || $ctrl.state.actionInProgress || !$ctrl.name"
            ng-click="$ctrl.installHelmchart()"
            button-spinner="$ctrl.state.actionInProgress"
            data-cy="helm-install"
          >
            <span ng-hide="$ctrl.state.actionInProgress">Install</span>
            <span ng-hide="!$ctrl.state.actionInProgress">Installing Helm chart</span>
          </button>
        </div>
      </div>
      <!-- !helm actions -->
    </form>
  </div>
  <!-- helmchart-form -->
</div>

<!-- Helm Charts Component -->
<div class="row" ng-if="!$ctrl.state.chart">
  <div class="col-sm-12 p-0">
    <helm-templates-list
      title-text="Helm chart"
      charts="$ctrl.state.charts"
      table-key="$ctrl.state.charts"
      select-action="$ctrl.selectHelmChart"
      loading="$ctrl.state.chartsLoading || $ctrl.state.resourcePoolsLoading"
    >
    </helm-templates-list>
  </div>
</div>
<!-- !Helm Charts Component -->