<app-sidenav>
  <div header>
    <app-sidenav-header
      [title]="'Compare Data'"
      (closeSideNav)="closeCompare.emit()"
      [tooltipString]="'Link your own data to compare it with the Master Data Tables'"
    ></app-sidenav-header>
  </div>

  <div body>
    <div class="px-3">
      <mat-expansion-panel [expanded]="true" class="mepNoPadding">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <div class="instruction-title">Instructions</div>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <div class="mt-1 text-muted">
          <ul class="pl-3">
            <li class="text-justify">
              Through this feature, you can upload your own data (ASCT+B to ASCT+B, ASCT+B to experimental data, or
              ASCT+B to OMAP) by pasting the Browser URL address for the Google sheet of your data in the fields
              mentioned below.
            </li>
            <li class="text-justify">
              In order to successfully link your sheet, make sure the sheet has public access by selecting Share --> Get
              link --> selecting "Anyone with the link" option and "Viewer" privileges, select "Done" to save.
            </li>

            <li class="text-justify">
              Please make sure your data follows the appropriate data format:
              <ul class="pl-3">
                <li class="text-justify">
                  <a
                    href="https://docs.google.com/spreadsheets/d/1smQ8_3F-KSRlY7bmozsoM1EonQL4ahNaXP7zeQFf3Ko/edit#gid=0"
                    target="_blank"
                    >ASCT+B Table template</a
                  >
                </li>
                <li class="text-justify">
                  <a
                    href="https://docs.google.com/spreadsheets/d/1DE4Bh2PI7mgaMciMOky2OTduNwYNRU-DyYQPT8szJ-Y/edit#gid=0"
                    target="_blank"
                    >OMAP compare template</a
                  >
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <hr />
        <div class="optional-info">
          <div class="rounded-blob">New</div>
          <div>Organ Mapping Antibody Panel files (CSV) are now supported!</div>
        </div>
      </mat-expansion-panel>
    </div>

    <div class="content px-3">
      <div class="mt-3">
        <span class="required-field-disclaimer">* required field</span>
      </div>

      <form [formGroup]="formGroup" class="mt-4 px-2">
        <div formArrayName="sheets">
          <div *ngFor="let sheet of CSControls.controls; let i = index" class="cc py-3">
            <div [formGroupName]="i">
              <div class="w-100 title-sheet-container">
                <div class="w-75 mr-1 flex-container">
                  <p>
                    <mat-form-field appearance="fill">
                      <mat-label>Title</mat-label>
                      <input matInput placeholder="Sheet {{ i + 1 }}" formControlName="title" />
                      <mat-hint>A title for your sheet</mat-hint>
                    </mat-form-field>
                  </p>
                </div>
                <div class="title-sheet-sub-container">
                  <div class="w-75">
                    <p>
                      <mat-form-field appearance="fill">
                        <mat-label>Description</mat-label>
                        <input
                          matInput
                          placeholder="This data maps amazing structures!"
                          formControlName="description"
                        />
                        <mat-hint>A suitable description</mat-hint>
                      </mat-form-field>
                    </p>
                  </div>
                  <div class="ml-2">
                    <button
                      mat-icon-button
                      [disabled]="formGroup.value.sheets.length === 1"
                      (click)="removeCompareSheetRow(i)"
                    >
                      <mat-icon color="red">delete</mat-icon>
                    </button>
                  </div>
                </div>
              </div>

              <div class="pick-color-container">
                <mat-label class="pick-color-title">Pick Color</mat-label>
                <input
                  type="color"
                  class="w-100 form-control pick-color-textbox"
                  formControlName="color"
                  [style.backgroundColor]="sheet.get('color')?.value"
                />
              </div>

              <div class="data-upload-title">
                Data
                <p class="red">* &nbsp;</p>
                <span class="data-disclaimer-text"> ( Upload a csv file or link to the data)</span>
              </div>

              <div class="w-100 mt-4 sheet-link-container">
                <div class="w-100 flex-container">
                  <p>
                    <mat-form-field appearance="fill" class="w-75">
                      <mat-label>Google Sheet (or CSV) Link</mat-label>
                      <input class="w-100" matInput placeholder="Enter link..." formControlName="link" />
                      <mat-hint>Enter Browser URL address for your public Google Sheet (or CSV)</mat-hint>
                    </mat-form-field>
                  </p>
                </div>

                <div class="title-sheet-sub-container">
                  <div class="w-100">
                    <p>
                      <app-file-upload
                        formControlName="fileName"
                        (fileFormDataEvent)="upload($event, sheet)"
                      ></app-file-upload>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <hr />
          </div>
        </div>
      </form>
    </div>
  </div>

  <div footer>
    <div class="mt-2" class="button-container">
      <button
        mat-flat-button
        color="primary"
        (click)="compare()"
        class="compare-button"
        [ngClass]="{ 'compare-button-color': !formValid }"
      >
        Compare
      </button>
      <button mat-flat-button class="add-button" (click)="addCompareSheetRow()">
        <mat-icon>add</mat-icon>
        Add
      </button>
    </div>
  </div>
</app-sidenav>

./compare.component.scss

// .cc {
//   border-radius: 8px;
//   box-shadow: 3px 3px 40px 30px #ececec;
// }

.link-input-field {
  width: 100%;
}

input[type='color'] {
  -webkit-appearance: none;
  border: none;
  outline: none;
}

::ng-deep input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
}

.content {
  flex: 1 1;
  overflow: auto;
}

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: none;
}

.mat-expansion-panel-header:not(.compare) {
  background: rgb(228, 228, 228) !important;
}

.mat-expansion-panel-header:hover {
  opacity: 0.85 !important;
}

.instruction-title {
  font-weight: 600;
  font-size: 10pt;
}

.required-field-disclaimer {
  font-size: 0.625rem;
  color: #f44336;
}

.title-sheet-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-sheet-sub-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0.5;
}

.flex-container {
  flex: 0.5;
}

.file-upload {
  color: #757575;
}

.sheet-link-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pick-color-container {
  width: 4rem;
  margin-top: 1.125rem !important;
  margin-bottom: 1.125rem !important;

  .pick-color-title {
    font-size: 0.625rem;
    color: grey;
  }

  .pick-color-textbox {
    height: 1.875rem;
    margin-top: 0.25rem;
  }
}

.button-container {
  width: 100%;
  justify-content: space-between;
  display: flex;
}

.compare-button {
  border-radius: 0.5rem !important;
}

.compare-button-color {
  background-color: #f44336 !important;
}

.add-button {
  border: 0.063rem solid rgb(196, 196, 196);
  color: grey;
  border-radius: 0.5rem !important;
}

.data-upload-title {
  margin-top: 1.5rem !important;
  color: #444a65;

  .data-disclaimer-text {
    font-size: 0.625rem;
    color: #757575;
  }
}

.red {
  color: red;
  display: inline;
}

.optional-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  grid-gap: 10px;
}

.rounded-blob {
  align-items: center;
  height: 1.5rem;
  width: 2.5rem;
  background-color: #c2cae5;
  border-radius: 100px;
  text-align: center;
}