<div class="container">
  <header>
    <h1>Tanzu Deployer</h1>
    <p>Deploy your applications to Tanzu Platform</p>
  </header>

  <div class="card">
    <form (ngSubmit)="deploy()" #deployForm="ngForm">
      <!-- Cloud Foundry Configuration -->
      <div class="form-section">
        <h3>Tanzu Configuration</h3>

        <div class="form-group">
          <label for="apiEndpoint">API Endpoint *</label>
          <input
            type="text"
            id="apiEndpoint"
            name="apiEndpoint"
            [(ngModel)]="apiEndpoint"
            placeholder="https://api.cf.example.com"
            required
            [disabled]="uploading">
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="username">Username *</label>
            <input
              type="text"
              id="username"
              name="username"
              [(ngModel)]="username"
              placeholder="your-username"
              required
              [disabled]="uploading">
          </div>

          <div class="form-group">
            <label for="password">Password *</label>
            <input
              type="password"
              id="password"
              name="password"
              [(ngModel)]="password"
              placeholder="••••••••"
              required
              [disabled]="uploading">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="organization">Organization *</label>
            <input
              type="text"
              id="organization"
              name="organization"
              [(ngModel)]="organization"
              placeholder="your-org"
              required
              [disabled]="uploading">
          </div>

          <div class="form-group">
            <label for="space">Space *</label>
            <input
              type="text"
              id="space"
              name="space"
              [(ngModel)]="space"
              placeholder="dev"
              required
              [disabled]="uploading">
          </div>
        </div>

        <div class="form-group">
          <label for="appName">Application Name *</label>
          <input
            type="text"
            id="appName"
            name="appName"
            [(ngModel)]="appName"
            placeholder="my-app"
            required
            [disabled]="uploading">
        </div>

        <div class="form-group checkbox" *ngIf="env.enableSslValidation">
          <label>
            <input
              type="checkbox"
              name="skipSsl"
              [(ngModel)]="skipSsl"
              [disabled]="uploading">
            Skip SSL Validation
          </label>
        </div>
      </div>

      <!-- Files Upload -->
      <div class="form-section">
        <h3>Application Files</h3>

        <div class="form-group">
          <label for="jarFile">JAR File *</label>
          <div class="file-upload-wrapper">
            <input
              type="file"
              id="jarFile"
              name="jarFile"
              class="file-input"
              (change)="onJarFileChange($event)"
              accept=".jar"
              required
              [disabled]="uploading">
            <label for="jarFile" class="file-upload-btn" [class.disabled]="uploading">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              <span *ngIf="!jarFile">Choose JAR File</span>
              <span *ngIf="jarFile">Change File</span>
            </label>
          </div>
          <div class="file-info" *ngIf="jarFile">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
              <polyline points="13 2 13 9 20 9"></polyline>
            </svg>
            <span>{{ jarFile.name }}</span>
            <span class="file-size">({{ (jarFile.size / 1024 / 1024).toFixed(2) }}MB)</span>
          </div>
        </div>

        <div class="form-group">
          <label for="manifestFile">Manifest File *</label>
          <div class="file-upload-wrapper">
            <input
              type="file"
              id="manifestFile"
              name="manifestFile"
              class="file-input"
              (change)="onManifestFileChange($event)"
              accept=".yml,.yaml"
              required
              [disabled]="uploading">
            <label for="manifestFile" class="file-upload-btn" [class.disabled]="uploading">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              <span *ngIf="!manifestFile">Choose Manifest File</span>
              <span *ngIf="manifestFile">Change File</span>
            </label>
          </div>
          <div class="file-info" *ngIf="manifestFile">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
              <polyline points="13 2 13 9 20 9"></polyline>
            </svg>
            <span>{{ manifestFile.name }}</span>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="form-actions">
        <button type="submit" class="btn btn-primary" [disabled]="!deployForm.form.valid || uploading">
          <span *ngIf="!uploading">Deploy to Tanzu</span>
          <span *ngIf="uploading">Deploying...</span>
        </button>
        <button type="button" class="btn btn-secondary" (click)="clearForm()" [disabled]="uploading">
          Clear Form
        </button>
      </div>
    </form>
  </div>

  <!-- Progress Section -->
  <div class="card" *ngIf="uploading || deploymentStatus">
    <h2>Deployment Progress</h2>

    <div class="progress-section">
      <div class="progress-label">
        <span>{{ currentStep }}</span>
        <span class="progress-percent">{{ uploadProgress }}%</span>
      </div>

      <div class="progress-bar">
        <div class="progress-fill" [style.width.%]="uploadProgress"></div>
      </div>

      <div class="status-badge" *ngIf="deploymentStatus">
        <span class="badge" [class.badge-success]="deploymentStatus === 'COMPLETED'"
                            [class.badge-error]="deploymentStatus === 'FAILED'"
                            [class.badge-info]="deploymentStatus === 'IN_PROGRESS'">
          {{ deploymentStatus }}
        </span>
      </div>
    </div>
  </div>

  <!-- Logs Section -->
  <div class="card logs-card" *ngIf="logs.length > 0">
    <div class="logs-header" (click)="toggleLogs()">
      <h2>Deployment Logs</h2>
      <span class="toggle-icon">{{ logsExpanded ? '▼' : '▶' }}</span>
    </div>

    <div class="logs-output" *ngIf="logsExpanded">
      <div class="log-line" *ngFor="let log of logs">{{ log }}</div>
    </div>
  </div>
</div>
