Untitled

<div class="max-w-2xl mx-auto p-6">
  <form [formGroup]="reportForm" (ngSubmit)="onSubmit()" class="space-y-6">
    <!-- Name Field -->
    <div class="form-group">
      <input
        type="text"
        formControlName="name"
        placeholder="Votre nom"
        class="w-full p-3 border-b border-gray-300 focus:border-green-500 outline-none transition-colors"
        [class.border-red-500]="isFieldInvalid('name')"
      />
    </div>

    <!-- Phone Field -->
    <div class="form-group">
      <input
        type="tel"
        formControlName="phone"
        placeholder="Téléphone"
        class="w-full p-3 border-b border-gray-300 focus:border-green-500 outline-none transition-colors"
        [class.border-red-500]="isFieldInvalid('phone')"
      />
    </div>

    <!-- Violence Types Multi-Select -->
    <div class="form-group">
      <select
        multiple
        formControlName="violenceTypes"
        class="w-full p-3 border border-gray-300 rounded-md focus:border-green-500 outline-none transition-colors"
        [class.border-red-500]="isFieldInvalid('violenceTypes')"
      >
        @for (type of violenceTypes; track type) {
          <option [value]="type">{{ type }}</option>
        }
      </select>
    </div>

    <!-- Message Field -->
    <div class="form-group">
      <textarea
        formControlName="message"
        placeholder="Message"
        rows="4"
        class="w-full p-3 border border-gray-300 rounded-md focus:border-green-500 outline-none transition-colors resize-none"
        [class.border-red-500]="isFieldInvalid('message')"
      ></textarea>
    </div>

    <!-- Submit Button -->
    <button
      type="submit"
      class="w-full py-3 px-6 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors"
      [disabled]="reportForm.invalid || isSubmitting"
    >
      Envoyer
    </button>

    <!-- Email Contact -->
    <div class="text-center text-gray-600 text-sm">
      — copier l'email: onde.amS1@gmail.com
    </div>
  </form>
</div>