@extends('layouts.event-volunteer')
@section('step', 3)
@section('back-button-form-url')
    {{route('volunteer-application-form.choose-roles.store', ['back'])}}
@stop
@section('holiday-form-content')
    <form enctype="multipart/form-data"
          action="{{route('volunteer-application-form.choose-roles.store')}}"
          method="post" id="booking-form" accept-charset="UTF-8">
        @csrf

        <h4 class="mt-8 text-3xl font-bold sm:font-extrabold text-blue-900">Choose roles</h4>
        <div class="mt-12">
            <p class="text-sm font-medium text-gray-900">Which roles would like to express interest in applying for?</p>

            <div class="leading-none mt-4 flex flex-col gap-4">
                @foreach(\App\Models\VolunteerApplication::$available_roles as $campRoleValue)
                    <div>
                        <x-inputs.checkbox name="camp_role[{{$campRoleValue}}]"
                                           :value="$campRoleValue"
                                           :label="\App\Enums\CampRole::getDescription($campRoleValue)"
                                           :help="\App\Enums\CampRole::getHelpDescription($campRoleValue)" />
                    </div>
                @endforeach
            </div>
            <x-inputs.error name="camp_role" />


            <button type="submit" class="text-white bg-primary-600 w-full sm:w-auto hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-12">
                Next: Context
            </button>
        </div>
    </form>
@endsection