<main role="main">
  <app-button
    (onClick)="handleGoBack()"
    id="goBack"
    type="icon"
    icon="chevron-left"
    title="Voltar para a tela anterior"
  ></app-button>

  <section>
    <header>
      <h1>Preencha suas informações</h1>
      <h2 class="h3">Usaremos estas informações para traçar seu perfil</h2>
    </header>

    <form (submit)="$event.preventDefault()">
      <div>
        <div class="left">
          <app-select
            label="Nível de atividade física"
            [options]="getPhysicalActivitiesLabels()"
            [value]="setPhysicalActivityLabel()"
            (valueChange)="setPhysicalActivity($event)"
            [showQuestionIcon]="true"
            (onQuestionClick)="toggleModalPhysicalActivity()"
          ></app-select>
          <app-radio-group
            label="Qual seu objetivo no aplicativo?"
            [options]="getGoalsLabels()"
            [selected]="getGoalValue()"
            (selectedChange)="setGoal($event)"
            fieldName="goal"
            direction="column"
          ></app-radio-group>
        </div>

        <div class="right" id="progress-wrapper">
          <app-progress
            [percent]="recommendedRate ? 100 : 0"
            [title]="recommendedRate + 'kcal'"
            fill="var(--purple-100)"
            stroke="var(--purple-050)"
            subtitleColor="var(--purple-300)"
            subtitle="GET"
          ></app-progress>
        </div>
      </div>

      <div>
        <app-button
          (onClick)="submitForm($event)"
          [isDisabled]="!isFormValid() || recommendedRate <= 0"
          type="ghost"
          title="Continuar cadastro"
          >Continuar</app-button
        >
      </div>
    </form>
  </section>
</main>

<app-loader></app-loader>

<app-modal
  title="Nível de atividade física"
  [(isVisible)]="isModalPhysicalActivityOpen"
>
  <div class="list-physical-activities">
    <ul>
      <li *ngFor="let activity of physicalActivies">
        <div>
          <h2 class="h5">{{ activity.label }}</h2>
          <p class="p6">{{ activity.description }}</p>
        </div>
      </li>
    </ul>
  </div>
</app-modal>
