2023-01-07 16:10:18 +01:00
{% set labelwidth = 'w-48' %}
{% set p=participant %}
{% set formContainerClass = "bg-white rounded-lg shadow-lg " %}
{% macro field(context, name, label, required, type) %}
< label class = "w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" >
< input name = "{{name}}" type = "{{type|default('text')}}" id = "{{name}}" placeholder = " " class = "bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-2 px-3 w-full" x-model = "data.{{name}}" / >
< span
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
>{{label}} {% if required %} < span class = "text-red-800 ml-1" > *< / span > {% endif %}< /span
>
< / label >
{% endmacro %}
{% macro textarea(context, name, label, required, type) %}
< label class = "w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" >
< textarea name = "{{name}}" rows = "6" id = "{{name}}" class = "bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-2 px-3 w-full" x-model = "data.{{name}}" >
< / textarea >
< span
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm"
>{{label}} {% if required %} < span class = "text-red-800 ml-1" > *< / span > {% endif %}< /span
>
< / label >
{% endmacro %}
{% macro select(context, name, label, required, options) %}
< label class = "w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" for = "{{name}}" >
< select name = "{{name}}" id = "{{name}}" class = "bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-2 px-3 w-full" x-model = "data.{{name}}" >
< option :selected = "data.{{name}} === ''" value = "" > -- kein --< / option >
< template x-for = "model in meta.{{options}}" >
< option :selected = "data.{{name}} === model.id" :value = "model.id" x-text = "model.name" > < / option >
< / template >
< / select >
< span
class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm"
>{{label}} {% if required %} < span class = "text-red-800 ml-1" > *< / span > {% endif %}< /span
>
< / label >
{% endmacro %}
{% macro radio(context, name, label, required, options) %}
< div >
< span
class="text-gray-600 text-sm"
>{{label}} {% if required %} < span class = "text-red-800 ml-1" > *< / span > {% endif %}< /span
>
< div class = "flex flex-col space-y-1" >
< template x-for = "option, index in meta.{{options}}" >
< label :for = "`{{name}}-${index}`" class = "block relative flex items-center" >
< input type = "radio" name = "{{name}}" :value = "option.name" x-model = "data.{{name}}" class = "peer absolute invisible" :id = "`{{name}}-${index}`" / >
< span class = "border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block" > < / span >
< span class = "peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block" > < / span >
< span class = "pl-8" x-text = "option.name" > < / span >
< / label >
< / template >
< / div >
< / div >
{% endmacro %}
{% macro yesno(context, name, label, required) %}
< div >
< div class = "flex flex-col space-y-1" >
< label for = "{{name}}" class = "block relative flex items-center" >
< input type = "checkbox" name = "{{name}}" x-model = "data.{{name}}" class = "peer absolute invisible" id = "{{name}}" / >
< span class = "border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block" > < / span >
< span class = "peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block" > < / span >
< span class = "pl-8" > {{label}}< / span >
< / label >
< / div >
< / div >
{% endmacro %}
{% macro checkboxes(context, name, label, required, options) %}
< div >
< span
class="text-gray-600 flex text-sm"
>{{label}} {% if required %} < span class = "text-red-800 ml-1" > *< / span > {% endif %}< /span
>
< div class = "flex flex-col space-y-1" >
< template x-for = "option, index in meta.{{options}}" >
< label :for = "`{{name}}-${index}`" class = "block relative flex items-center" >
< input type = "checkbox" name = "{{name}}[]" :value = "option.name" x-model = "data.{{name}}" class = "peer absolute invisible" :id = "`{{name}}-${index}`" / >
< span class = "border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block" > < / span >
< span class = "peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block" > < / span >
< span class = "pl-8" x-text = "option.name" > < / span >
< / label >
< / template >
< / div >
< / div >
{% endmacro %}
{% import _self as form %}
< div x-data = "{
data: eventRegistration.data,
meta: {
...eventRegistration.meta,
submitRequest: '{{__SELF__.alias ~ '::onSubmit'}}',
},
...eventRegistration.methods,
...eventRegistration.spreads,
}" x-init="eventRegistration.init">
{#+++ registrationForm +++#}
< form x-ref = "form" @ submit . prevent = "submit" class = "my-6" novalidate >
< div x-ref = "eventFormContainer" class = "{{formContainerClass}}" >
{% set arrowClass = "flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300" %}
{% set positionClass = "flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-teal-800 mr-2 text-teal-200 font-goudy transition duration-300" %}
{% set arrowFont = "text-sm text-teal-100" %}
<!--
< div class = "sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg" >
< template x-for = "(slide, index) in meta.slides" >
< a @ click = "slideTo($event, index)" href = "#" class = "{{arrowClass}}" :class = "{ 'bg-emerald-500': index <= meta.active, 'bg-primary-700': index > meta.active }" >
< span class = "{{positionClass}}" x-html = "index+1" > < / span >
< span class = "{{arrowFont}}" x-html = "slide" > < / span >
< / a >
< / template >
< / div >
-->
<!--
< div class = "flex items-center px-6 overflow-auto overflow-hidden rounded-t-lg sm:hidden bg-primary-700" >
< a @ click = "slideTo($event, meta.active-1)" href = "#" class = "{{positionClass}} w-6 h-6 flex-none" :class = "{'opacity-40': meta.active == 0}" >
< svg class = "{{arrowFont}} fill-current w-3 h-3" > < use xlink:href = "{{'icons/sprite.svg'|media}}#chevron" > < / use > < / svg >
< / a >
< div x-ref = "mobileSlider" class = "flex flex-no-wrap w-full overflow-auto snap transition-all" x-on:resize . debounce . window = "$refs.mobileSlider.scrollLeft = $refs.mobileSlider.scrollWidth / meta.slides.length * meta.active" >
< template x-for = "(slide, index) in meta.slides" >
< div class = "flex-none w-full" >
< div @ click = "slideTo($event, index)" href = "#" class = "{{arrowClass}}" >
< span class = "{{positionClass}}" x-html = "index+1" > < / span >
< span class = "{{arrowFont}}" x-html = "slide" > < / span >
< / div >
< / div >
< / template >
< / div >
< a @ click = "slideTo($event, meta.active+1)" href = "#" class = "{{positionClass}} w-6 h-6 flex-none" :class = "{'opacity-40': meta.active == meta.slides.length - 1}" >
< svg class = "{{arrowFont}} fill-current w-3 h-3 transform rotate-180" > < use xlink:href = "{{'icons/sprite.svg'|media}}#chevron" > < / use > < / svg >
< / a >
< / div >
-->
< div class = "py-8" >
< div x-ref = "slider" class = "relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth" >
{% set labelClass = "fancy-textinput size-lg dark" %}
2023-01-07 16:42:19 +01:00
{% set gliderElClass = "w-full flex-none snap-center slider-element px-6" %}
2023-01-07 16:10:18 +01:00
{% set descClass = "text-sm sm_text-base text-gray-800 leading-tight mb-5" %}
< div class = "{{gliderElClass}}" >
< div class = "{{descClass}}" > Gebe hier deine Funktion an, die du auf der Veranstaltung wahrnehmen willst. Danach benötigen wir ein paar persönliche Daten von dir. < / div >
< div class = "{{descClass}}" > < / div >
< div class = "grid sm:grid-cols-2 gap-4 mt-6" >
{{ form.select(_context, 'activity', 'Funktion', true, 'activities') }}
{{ form.select(_context, 'gender', 'Geschlecht', true, 'genders') }}
{{ form.field(_context, 'firstname', 'Vorname', true) }}
{{ form.field(_context, 'lastname', 'Nachname', true) }}
{{ form.field(_context, 'birthday', 'Geburtsdatum', true, 'date') }}
{{ form.field(_context, 'address', 'Straße & Hausnr', true) }}
{{ form.field(_context, 'zip', 'PLZ', true) }}
{{ form.field(_context, 'location', 'Ort', true) }}
{{ form.field(_context, 'phone', 'Telefonnummer', true, 'tel') }}
{{ form.field(_context, 'email', 'E-Mail-Adresse', true, 'email') }}
< / div >
{% partial __SELF__.alias ~ '::navigation' %}
< / div >
< div class = "{{gliderElClass}}" >
< div class = "{{descClass}}" > Gebe hier deine Gruppenzugehörigkeit und weitere wichtige Infos zur Veranstaltung an.< / div >
< div class = "grid sm:grid-cols-2 gap-4 mt-6" >
{{ form.select(_context, 'group', 'Stamm', false, 'groups') }}
{{ form.field(_context, 'emergency_phone', 'Notfallkontakt (Tel)', true) }}
{{ form.select(_context, 'agegroup', 'Stufe (zum Zeitpunkt des Lagers)', true, 'agegroups') }}
< template x-if = "data.agegroup === 'Leiter'" >
{{ form.select(_context, 'agegroup_leader', 'Stufe die du leitest', false, 'agegroups_leaders') }}
< / template >
< template x-if = "data.agegroup !== 'Leiter'" >
< div > < / div >
< / template >
< template x-if = "data.activity === 'Orga'" >
{{ form.radio(_context, 'vorteam', 'Möchtest du am Vorteam teilnehmen?', true, 'boolean') }}
< / template >
{{ form.checkboxes(_context, 'food_preferences', 'Essgewohnheiten & Unverträglichkeiten', false, 'foodPreferences') }}
< / div >
{% partial __SELF__.alias ~ '::navigation' %}
< / div >
< div class = "{{gliderElClass}}" >
< div class = "{{descClass}}" > Fast geschafft! Wenn du sonst noch etwas loswerden willst, kannst du das hier tun.< / div >
< div class = "flex flex-row items-center p-4 bg-red-100 border-2 border-red-400 rounded form-group shadow-sm" x-show = "data.agegroup === 'Leiter'" >
< div class = "flex items-center justify-center w-8 h-8 mr-3 bg-red-500 rounded-full flex-none" >
< div class = "flex items-center justify-center w-5 h-5 bg-red-100 rounded-full" >
< svg class = "w-5 h-5 text-red-700 border-gray-400 fill-current border-5 fill-current" > < use xlink:href = "/themes/october-theme/resources/img/sprite.svg#exclamation" > < / use > < / svg >
< / div >
< / div >
< span class = "grow text-sm font-semibold text-red-800" >
< p > Als teilnehmende*r Leiter*in ist für die Teilnahme am BeLa ein eingereichtes Führungszeugnis ohne Einträge und eine aktive Präventionsschulung zwingend erforderlich.< / p >
< p class = "mt-2" > Dies muss spätestens zu Beginn des BeLas vorliegen. Ansonsten kannst du nicht am BeLa teilnehmen.< / p >
< p class = "mt-2" > Weitere Infos findest du in der < a class = "text-rose-500 hover:text-rose-900" target = "_BLANK" href = "https://dpsg-koeln.de/fuer-mitglieder/faqs#pravention" > FAQ-Sektion der Diözese Köln zu Prävention< / a > . Außerdem kannst du dich auch an deinen StaVo oder den < a class = "text-rose-500 hover:text-rose-900" href = "mailto:vorstand@dpsgbergischland.de" > Bezirksvorstand< / a > wenden.< / p >
< / span >
< / div >
< div class = "grid gap-4 mt-6" >
{{ form.textarea(_context, 'misc', 'Sonstige Anmerkungen', false) }}
{{ form.yesno(_context, 'foto', 'Ich akzeptiere, dass vor Ort Foto-und Videoaufnahmen von mir gemacht werden dürfen.', false) }}
< / div >
{% partial __SELF__.alias ~ '::navigation' %}
< / div >
< / div >
< / div >
< / div >
<!--
{#+++ Sidebar +++#}
< div class = "relative hidden event-form-sidebar lg_block" >
< div class = "absolute w-full h-full" >
< div class = "sticky h-full bg-white rounded-lg shadow top-10" >
< div class = "relative" >
< img src = "{{__SELF__.event.header_image | media}}" class = "object-cover w-full h-48" >
< div class = "absolute bottom-0 w-full px-4 py-2 leading-tight bg-white-t600" >
< h3 class = "text-primary-800 font-goudy" > {{__SELF__.event.name}}< / h3 >
< div class = "text-xs" > {{ __SELF__.event.dates }} {{ __SELF__.event.times }}< / div >
< / div >
< / div >
< div class = "overflow-auto" style = "height: calc(100% - 12rem);" >
< div class = "p-4 text-gray-800 grid row-gap-2" >
< h3 class = "leading-tight text-primary-800 font-goudy" > Persönliche Daten< / h3 >
< div class = "leading-tight" >
< div class = "text-xs text-gray-600" > Funktion< / div >
< div class = "text-sm" x-html = "data.activity" > < / div >
< / div >
< div class = "leading-tight" x-show = "hasAddress()" >
< div class = "text-xs text-gray-600" > Name & Adresse< / div >
< div class = "text-sm" >
< div x-html = "`${data.firstname} ${data.lastname}`" > < / div >
< div x-html = "data.address" > < / div >
< div x-html = "`${data.zip} ${data.location}`" > < / div >
< / div >
< / div >
< div class = "leading-tight" x-show = "data.birthday" >
< div class = "text-xs text-gray-600" > Geburtsdatum< / div >
< div class = "text-sm" x-html = "data.birthday" > < / div >
< / div >
< div class = "leading-tight" x-show = "data.phone || data.email" >
< div class = "text-xs text-gray-600" > Kontakt< / div >
< div class = "text-sm" >
< div x-show = "data.phone" x-html = "`Tel: ${data.phone}`" > < / div >
< div x-show = "data.email" x-html = "`E-Mail: ${data.email}`" > < / div >
< / div >
< / div >
< h3 class = "mt-4 leading-tight text-primary-800 font-goudy" x-show = "data.region_id !=-1 || data.group_id != -1" > Gruppierung< / h3 >
< div class = "leading-tight" x-show = "data.region_id != -1 || data.group_id != -1" >
< div class = "text-xs text-gray-600" > Gruppierung< / div >
< div class = "text-sm" >
< div x-html = "data.group" > < / div >
< / div >
< / div >
< h3 class = "mt-4 leading-tight text-primary-800 font-goudy" x-show = "data.food_preferences.length > 0" > Verpflegung< / h3 >
< div class = "leading-tight" x-show = "data.food_preferences.length > 0" >
< div class = "text-xs text-gray-600" > Lebensmittelunverträglichkeiten< / div >
< ul >
< template x-for = "fi in data.food_preferences" >
< li class = "text-sm" x-html = "fi" > < / li >
< / template >
< li class = "text-sm" x-show = "data.further_food_intolerances" x-html = "data.further_food_intolerances" > < / li >
< / ul >
< / div >
< h3 class = "mt-4 leading-tight text-primary-800 font-goudy" x-show = "data.rooms || data.add_misc !== null || data.misc" > Sonstiges< / h3 >
< div class = "leading-tight" x-show = "data.add_misc !== null" >
< div class = "text-xs text-gray-600" > Barrierefreiheit< / div >
< div class = "text-sm" x-html = "data.add_misc" > < / div >
< / div >
< div class = "leading-tight" x-show = "data.rooms" >
< div class = "text-xs text-gray-600" > Zimmerwünsche< / div >
< div class = "text-sm" x-html = "data.rooms" > < / div >
< / div >
< div class = "leading-tight" x-show = "data.misc" >
< div class = "text-xs text-gray-600" > Sonstige Wünsche< / div >
< div class = "text-sm" x-html = "data.misc" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
-->
< / form >
<!--
{#+++ Pflichtfeld +++ #}
< div class = "mt-2 text-lg text-gray-800" >
< span class = "text-red-800" > *< / span > Pflichtfeld
< / div >
{#+++ popup +++#}
< div class = "popup" id = "waiting-popup" >
< div class = "relative text-gray-600 popup-inner" >
< script class = "tmpl" type = "text/html" >
< div class = "absolute top-0 right-0 flex items-center justify-center w-16 h-16 mt-4 mr-4 bg-yellow-500 rounded-full opacity-50" >
< div class = "flex items-center justify-center w-10 h-10 bg-yellow-100 rounded-full" >
< svg class = "w-10 h-10 text-yellow-700 border-gray-400 fill-current border-5" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 20 20" > < path d = "M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z" / > < / svg >
< / div >
< / div >
< h2 class = "flex-shrink-0 text-xl font-semibold text-gray-800" > Auf die Warteliste setzen?< / h2 >
< h2 class = "flex-shrink-0 text-sm font-semibold text-gray-600" > Für < %= eventname %>< / h2 >
< div class = "relative mt-5 richeditor content small" >
< h2 > Was ist die Warteliste?< / h2 >
Wenn du dich für die Warteliste einträgst, wirst du automatisch per E-Mail benachrichtigt, wenn bei dieser Unterveranstaltung ein Platz frei wird. Du hast dann die Möglichkeit, zu dieser Unterveranstaltung zu wechseln, und meldest dich zeitgleich von einer beliebigen anderen Unterveranstaltung ab.
< h2 > Was nun< / h2 >
Wähle bitte neben dieser Unterveranstaltung deine "regulären" Veranstatungen aus.
< / div >
< div class = "flex justify-end mt-6" >
< button class = "mr-6 btn btn-shine btn-primary btn-sm" type = "button" data-confirm > Auf Warteliste setzen< / button >
< button class = "btn-shine btn btn-danger btn-sm" type = "button" data-reject > Nee, doch nicht< / button >
< / div >
< / script >
< div > < / div >
< / div >
< / div >
-->
< / div >
