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

{% block content %}

	{% set params = {
		columns: {
			name: "Csoportnév",
			school: "Iskola",
			attendeesCount: "Létszám",
			attendees: "Résztvevők",
			make: "Program Jelentkezés",
			edit: "Szerkesztés",
			remove: "Törlés",
		},
		rows: appointments,
		pagination: pagination,
	} %}

	{% embed "embed/table_page.html.twig" with params %}

		{% block page_title %}
			<h3>Állandó csoport</h3>
		{% endblock %}

		{% block grid_body %}
			{% if appointments|length > 0 or form.vars['submitted'] %}
				<div class="btn-toolbar justify-content-between">
					<a href="{{ path("add_permanent_appointments") }}" class="btn btn-sm btn-primary">
						<i class="fa fa-fw fa-plus"></i> Új csoport 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_appointments") }}" class="btn btn-primary">
								<i class="fa fa-fw fa-plus"></i> Csoport hozzáadása
							</a>
						</div>
					</div>
				{% endif %}
			</td>
		{% endblock empty %}

		{% block cell_name %}
			<td class="align-middle">
				{{ row.name }}
			</td>
		{% endblock %}

		{% block cell_attendeesCount %}
			<td class="align-middle">
				{{ row.attendeesCount }} fő
			</td>
		{% endblock %}

		{% block cell_school %}
			<td class="align-middle">
				{{ row.schoolName }}
				{% if row.schoolAddress is not empty %}
					<br>
					<small>
						{{ "%s %s %s %s"|format(row.schoolAddress.county, row.schoolAddress.postCode, row.schoolAddress.city, row.schoolAddress.street) }}
					</small>
				{% else %}
					<br/>
					<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"
					   data-toggle="tooltip" data-placement="bottom"
					   title="Kérjük frissítse az iskola címét!"></i>
					<small>{{ row.legacySchoolAddress }}</small>
				{% endif %}
			</td>
		{% endblock %}

		{% block cell_make %}
			<td class="text-center align-middle" style="width: 50px">
				<a href="{{ path('show_available_projects_for_permament_appointment', {appointmentId: row.id}) }}"
				   class="btn btn-sm btn-outline-secondary"
				   title="Csoport projekt jelentkezése">
					Jelentkezés
				</a>
			</td>
		{% endblock %}

		{% block cell_edit %}
			<td class="text-center align-middle" style="width: 50px">
				<a href="{{ path('update_permanent_appointments', {id: row.id}) }}"
				   class="btn btn-sm btn-outline-secondary"
				   title="Csoport 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_appointments', {id: row.id}) }}"
					   class="btn btn-sm btn-danger confirm-removal"
					   title="Csoport törlése">
						<i class="fa fa-trash-o" aria-hidden="true"></i>
					</a>
			</td>
		{% endblock %}

		{% block cell_attendees %}
			<td class="align-middle" style="width: 136px">
				<a href="{{ path('filter_permanent_appointments_attendees', {appointmentId: row.id}) }}"
				   class="btn btn-sm btn-primary">
					Résztvevők
				</a>
			</td>
		{% endblock %}

	{% endembed %}

{% endblock %}