{% extends "layout.html.twig" %}

{% block content %}

	{% set params = {
		columns: {
			name: "Név",
			age: "Kor",
			parentsConsent: "Szülői nyilatkozat",
			edit: "Szerkesztés",
			remove: "Törlés",
		},
		rows: attendees,
		pagination: pagination,
	} %}
	<div class="attendeeList">
		{% embed "embed/table_page.html.twig" with params %}

			{% block page_title %}
				<a href="{{ path("filter_my_permanent_appointments" ) }}">
					<i class="fa fa-chevron-left" aria-hidden="true"></i>
				</a>
				<h3>Állandó csoport - Résztvevők</h3>
				<div class="text-right">
					{% import "macro.html.twig" as macro %}
					<a href="{{ macro.teacherConsent() }}" target="_blank" class="btn btn-primary mr-2">
                    <span class="title">
                        Tanári felelősségvállalási nyilatkozat
                    </span>
					</a>
					<a href="{{ macro.parentConsent() }}" class="btn btn-primary" target="_blank">
                    <span class="title">
                        Szülői nyilatkozat sablon
                    </span>
					</a>
				</div>
			{% endblock %}

			{% block column_parentsConsent %}
				<th colspan="2" style="width: 100px" class="text-right text-nowrap">
					{{ label }}<br>
					<small>Letöltés | Feltöltés</small>
				</th>
			{% endblock %}

			{% block cell_parentsConsent %}
				<td class="text-right align-middle">
					<div class="btn-group">
						{% if row.parentsConsent is not null %}
							<a href="{{ path("permanent_show_parents_consent", {id: row.id}) }}"
							   class="btn btn-sm btn-danger"
							   title="Letöltés">
								<i class="fa fa-download" aria-hidden="true"></i>
							</a>
						{% endif %}
					</div>
				</td>
				<td class="text-left align-middle" style="width: 65px">
					<button type="button"
					        class="btn btn-sm btn-primary"
					        data-toggle="modal"
					        data-attendee-id="{{ row.id }}"
					        data-target="#parentConsentModal"
					        title="Feltöltés">
						<i class="fa fa-upload" aria-hidden="true"></i>
					</button>
				</td>
			{% endblock %}

			{% block grid_body %}
				{% if attendees|length > 0 or form.vars['submitted'] %}
					<div class="btn-toolbar justify-content-between">
						<a href="{{ path("add_permanent_attendee", {appointmentId: app.request.attributes.get("appointmentId")}) }}"
						   class="btn btn-sm btn-primary">
							<i class="fa fa-fw fa-plus"></i> Új résztvevő hozzáadás
						</a>
					</div>
				{% endif %}
				{{ parent() }}
			{% endblock %}

			{% block empty %}
				<td colspan="{{ columns|length }}">
					{% if form.vars['submitted'] %}
						<div class="text-center padding-20" style="font-size: 16px">
							<i class="fa fa-fw fa-frown-o"></i> Nincs találat
						</div>
					{% else %}
						<div class="d-flex flex-column justify-content-center" style="min-height: 50vh">
							<div class="text-center">
								<a href="{{ path("add_permanent_attendee", {appointmentId: app.request.attributes.get("appointmentId")}) }}"
								   class="btn btn-primary">
									<i class="fa fa-fw fa-plus"></i> Résztvevő hozzáadása
								</a>
							</div>
						</div>
					{% endif %}
				</td>
			{% endblock empty %}

			{% block cell_edit %}
				<td class="text-center align-middle" style="width: 50px">
					<a href="{{ path('update_permanent_attendee', {
						appointmentId: app.request.attributes.get("appointmentId"),
						attendeeId: row.id
					}) }}"
					   class="btn btn-sm btn-outline-secondary"
					   title="Résztvevő adatainak szerkesztése">
						<i class="fa fa-edit" aria-hidden="true"></i>
					</a>
				</td>
			{% endblock %}

			{% block cell_remove %}
				<td class="text-right align-middle" style="width: 65px">
					<a href="{{ path('remove_permanent_attendee', {
						appointmentId: app.request.attributes.get("appointmentId"),
						attendeeId: row.id
					}) }}"
					   class="btn btn-sm btn-danger confirm-removal"
					   title="Résztvevő törlése">
						<i class="fa fa-trash-o" aria-hidden="true"></i>
					</a>
				</td>
			{% endblock %}

		{% endembed %}

		{% embed "embed/modal.html.twig" with {
			id: "parentConsentModal"
		} %}
			{% block modal_content %}
				{{ form_start(parentsConsentForm, {attr: {class: "parentsConsentForm"}}) }}
				{{ parent() }}
				{{ form_end(parentsConsentForm) }}
			{% endblock %}

			{% block modal_title %}
				Szülői nyilatkozat feltöltése
			{% endblock %}

			{% block modal_body %}

				{{ form_row(parentsConsentForm.parentsConsent, {label: "Szülői nyilatkozat", attr: {lang: "hu"}}) }}
				<div class="mt-2">Maximális fájl méret: 2Mb</div>
				<div class="mb-2">Elfogadott fájl formátum: png, pdf, jpeg</div>
				{{ form_row(parentsConsentForm.validParentsConsent, {label: "Szülői nyilatkozatot ellenőriztem", attr: {class: "validParentsConsents"}, label_attr: {class: 'checkbox-custom'}}) }}
				{{ form_row(parentsConsentForm.attendeeId, {attr: {class: "attendeeIdInput"}}) }}

			{% endblock %}

			{% block modal_footer %}
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Bezárás</button>
				<button type="submit" class="btn btn-danger">Feltöltés</button>
			{% endblock %}

		{% endembed %}
	</div>

{% endblock %}