@extends('layouts.vpm-marketing')

@section('title', 'Contact Us')

@section('header')
    @include('partials.vpm.reference-header-guest')
@endsection

@section('content')
<main id="main-content" class="vpm-contact-page">
  <div class="vpm-contact-hero">
    <div class="vpm-contact-hero__overlay" aria-hidden="true"></div>
    <h1 class="vpm-contact-hero__title">Contact Us</h1>
  </div>

  <div class="vpm-contact-form-section">
    @include('partials.vpm.flash-messages')

    <form class="vpm-contact-form" method="POST" action="{{ route('contact.store') }}" novalidate>
      @csrf

      <x-vpm.input-ui
        name="email"
        label="Email"
        type="email"
        :value="old('email', auth()->user()?->email)"
        autocomplete="email"
        required
      />

      <x-vpm.input-ui
        name="subject"
        label="Subject"
        type="text"
        :value="old('subject')"
        autocomplete="off"
        required
      />

      <div class="vpm-field-box">
        <label class="vpm-field-box__label" for="contact-body">
          Body<span class="vpm-field-box__required" aria-hidden="true">*</span>
        </label>
        <textarea
          id="contact-body"
          name="body"
          class="vpm-field-box__input vpm-field-box__input--textarea{{ $errors->has('body') ? ' vpm-field-box__input--error' : '' }}"
          required
          rows="10"
        >{{ old('body') }}</textarea>
        @error('body')
          <span class="vpm-field__error" role="alert">{{ $message }}</span>
        @enderror
      </div>

      <button type="submit" class="vpm-contact-form__submit">Submit</button>
    </form>
  </div>
</main>

@include('partials.vpm.reference-footer')
@endsection