<div class="inner-small">
	{# <p>Zakończyliśmy już etap dodawnia prac konkursowych.</p> #}
	<p>Żeby zgłosić pracę w konkursie należy dodać film z YouTube.</p>
	<p class="mb-5">Następnie zaznacz obowiązkowe zgody i wyślij zgłoszenie.<br />W ciągu 48 godzin Twoja praca pojawi się na stronie</a></p>

	{% set filteredGroupsNameArr = groupsNameArr %}
	{% if schoolImgDb %}
		<h4>Zgłoszono:</h4>
		{% for item in schoolImgDb %}
			<div class="mb-5">
				<div class="row">
					<div class="col-12 col-md-6">
						<img alt="" class="yt-img w-100" data-yt="{{ item.ytId }}" />
					</div>
					<div class="col-12 col-md-6">
						Klasa: {{ item.groupName }}<br />
						Status: {{ item.enabled ? 'Aktywny' : 'Oczekuje na zatwierdzenie' }}<br /><br />
						<a href="{{ item.ytLink }}" target="_blank">{{ item.ytLink }}</a><br /><br />		
						{% if item.fbLink %}<a href="{{ item.fbLink }}" target="_blank" class="btn-form border d-inline-block p-2 cursor-pointer">Zagłosuj</a>{% endif %}
					</div>
				</div>
			</div>
			<div class="bg-white mb-5 w-100" style="height:1px;"></div>
			{% set filteredGroupsNameArr = filteredGroupsNameArr|filter(itemArr => itemArr != item.groupName) %}
		{% endfor %}
	{% endif %}

	{% if  filteredGroupsNameArr|length  %}
		<form method="post" enctype="multipart/form-data" id="schoolImgForm" action="/post/save-school-competition">
		    {{ form_start(form) }}
		    <input value="{{ registration.sonataUserUserId }}" name="userId" type="hidden" />
		    <input value="{{ registration.id }}" name="schoolId" type="hidden" />
		    <input value="{{ filteredGroupsNameArr|length }}" id="groupLength" type="hidden" />


		    <div class="mt-5">
	    		<div id="groupList">
		    		<div class="one-link" data-group-template>
		    			
	    				<div class="form-group w-100 mb-3">
							<label for="form-link-1" class="l1">Link do filmu na YouTube</label>
							<input placeholder="Link do filmu na YouTube" class="i1 form-control p-2 competition-link" style="border:2px solid #fff" type="text" name="competition[1][link]" id="form-link-1" autocomplete="off" required />
							<label class="w-100 text-red text-end err d-none">Dodaj poprawny link z YouTube</label>

						</div>
						{% if filteredGroupsNameArr is defined %}
		    				<div class="form-group mb-3">
								<label for="form-group-1" class="l2">Klasa</label>
								<select name="competition[1][group]" id="form-group-1" class="i2 text-black border-1 border-white p-2 competition-group" required> 
									{% for group in filteredGroupsNameArr %}
										<option value="{{ group }}" class="text-black">{{ group }}</option>
									{% endfor %}
								</select>
								<div class="err text-start d-none">
									<div class="d-flex flex-wrap justify-content-center">
										<div class="text-red w-100 text-center mt-3">Jedna klasa może zgłosić jedną pracę</div>
										<div class="btn-form border d-inline-block p-2 cursor-pointer remove-group" aria-label="Usuń klasę"><small> - Usuń</small></div>
									</div>
								</div>

							</div>
						{% endif %}
		 				<div class="bg-white mb-5 w-100" style="height:1px;"></div>
		    		</div>
		    	</div>
		    	{% if  groupsNameArr|length > (schoolImgDb|length+1) %}
					<div class="d-flex justify-content-end mb-5">
						<div class="btn-form border d-inline-block p-2 cursor-pointer" id="addGroup" aria-label="Dodaj klasę"> + Dodaj klasę</div>
					</div>
				{% endif %}
			</div>
			<div class="row justify-content-end">
				<div class="col-12">
					 <div class="form-group custom-checkbox pb-2">
				        <label for="terms1">
				          wyrażam zgodę na przetwarzanie danych na zasadach opisanych w <a href="/regulamin" target="_blank">regulaminie</a> *
				          <input type="checkbox" name="terms1" id="terms1" class="form-control-checkbox-custom" required/>
				          <span class="c"></span>
				        </label>
				    </div>
				     {# <div class="form-group custom-checkbox pb-2">
				        <label for="terms2">
				          oświadczam, że zapoznałem/am się i akceptuję <a href="https://akcjatron.pl/regulamin-konkursu-dla-przedszkoli">regulamin konkursu</a> *
				          <input type="checkbox" name="terms2" id="terms2" class="form-control-checkbox-custom" required/>
				          <span class="c"></span>
				        </label>
				    </div> #}
				     <div class="form-group custom-checkbox pb-2">
				        <label for="terms3">
				        oświadczam, że zgłoszona praca konkursowa nie narusza praw osób trzecich *
				          <input type="checkbox" name="terms3" id="terms3" class="form-control-checkbox-custom" required/>
				          <span class="c"></span>
				        </label>
				    </div>
				     <div class="form-group custom-checkbox pb-2">
				        <label for="terms4">
				        oświadczam, że jestem uprawniony/a do udzielenia licencji niewyłącznej do zgłoszonej pracy konkursowej i jej udzielam * 
				          <input type="checkbox" name="terms4" id="terms4" class="form-control-checkbox-custom" required/>
				          <span class="c"></span>
				        </label>
				    </div>
				</div>
			</div>
		    <div class="d-flex justify-content-center mt-5">
		    	<button type="submit" id="formSubmit" aria-label="WYŚLIJ ZGŁOSZENIE"><span>WYŚLIJ ZGŁOSZENIE</span></button>
		    </div>
		    {{ form_end(form) }}
		</form>
	{% endif %}

</div>

<script type="text/javascript">
	
	const ytImgs = document.querySelectorAll('.yt-img');

	if(ytImgs){
		ytImgs.forEach( (ytImg)=>{
			ytImg.src = `https://img.youtube.com/vi/${ytImg.dataset.yt}/maxresdefault.jpg`;
		})
	}

</script>