<div class="register-event-main">
    <h2>Register Event</h2>

    <div *ngIf="submitError" class="form-error" role="alert">{{ submitError }}</div>
  
    <form class="registerEvent-form" (ngSubmit)="onRegistrationSubmit()" novalidate>
      <div class="form-group">
        <label>First Name <span class="required">*</span></label>
        <input
          type="text"
          placeholder="Enter First Name"
          [(ngModel)]="registerUser.firstName"
          (ngModelChange)="clearFieldError('firstName')"
          name="firstName"
          required
        />
        <div *ngIf="fieldErrors.firstName" class="form-error" role="alert">{{ fieldErrors.firstName }}</div>
      </div>
      <div class="form-group">
        <label>Last Name <span class="required">*</span></label>
        <input
          type="text"
          placeholder="Enter Last Name"
          [(ngModel)]="registerUser.lastName"
          (ngModelChange)="clearFieldError('lastName')"
          name="lastName"
          required
        />
        <div *ngIf="fieldErrors.lastName" class="form-error" role="alert">{{ fieldErrors.lastName }}</div>
      </div>

      <div class="form-group">
        <label>Email<span class="required">*</span></label>
        <input
          type="email"
          placeholder="Enter Email"
          [(ngModel)]="registerUser.email"
          (ngModelChange)="clearFieldError('email')"
          name="email"
          required
        />
        <div *ngIf="fieldErrors.email" class="form-error" role="alert">{{ fieldErrors.email }}</div>
      </div>

      <div class="form-group">
        <label>Number<span class="required">*</span></label>
        <input
          type="number"
          placeholder="Enter Number"
          [(ngModel)]="registerUser.number"
          (ngModelChange)="clearFieldError('number')"
          name="number"
          required
        />
        <div *ngIf="fieldErrors.number" class="form-error" role="alert">{{ fieldErrors.number }}</div>
      </div>
      <div class="form-group">
        <label>Company Name <span class="required">*</span></label>
        <input
          type="text"
          placeholder="Enter Your Company Name"
          [(ngModel)]="registerUser.companyName"
          (ngModelChange)="clearFieldError('companyName')"
          name="companyName"
          required
        />
        <div *ngIf="fieldErrors.companyName" class="form-error" role="alert">{{ fieldErrors.companyName }}</div>
      </div>

      <div class="form-group">
        <label>Job Title <span class="required">*</span></label>
        <input
          type="text"
          placeholder="Enter Your Job Title"
          [(ngModel)]="registerUser.jobTitle"
          (ngModelChange)="clearFieldError('jobTitle')"
          name="jobTitle"
          required
        />
        <div *ngIf="fieldErrors.jobTitle" class="form-error" role="alert">{{ fieldErrors.jobTitle }}</div>
      </div>
      <div class="country-dropdown" (click)="toggleDropdown()">
        <label>Select Contry<span class="required">*</span></label>
        <div class="selected">
          {{ selectedCountry || "Select Country" }}
        </div>
  
        <div class="dropdown" *ngIf="dropdownOpen">
          <div
            class="option"
            *ngFor="let country of countries"
            (click)="selectCountry(country, $event)"
          >
            {{ country }}
          </div>
        </div>
        <div *ngIf="fieldErrors.country" class="form-error" role="alert">{{ fieldErrors.country }}</div>
      </div>
      <div class="actionButtons">
        <button type="submit" class="submit-btn">Register</button>
        <button type="button" class="btn btn-secondaryCancel" (click)="cancel()">
          Cancel
        </button>
      </div>
    </form>
  </div>
  
