{% if images|length > 0 %}
	<div class="table-responsive mt-3">
		<form method="post">
			<table class="table table-centered table-nowrap mb-0 rounded">
				<thead class="thead-light">
					<tr>
						<th class="border-0 rounded-start">
							Lp.
						</th>
						<th class="border-0">
							Zdjęcie
						</th>                     
						<th class="border-0">
							Tytuł
						</th>                       
                        <th class="border-0">
                            Link
                        </th>

						<th class="border-0 rounded-end"></th>
					</tr>
				</thead>
				<tbody>
					{% for image in images %}
						<tr>
							<td>
								<input class="form-control" type="number" name="updates[{{ image.getId() }}][position]" value="{{ image.getPosition()|default(0) }}" style="max-width: 70px;" step="1" min="0">
							</td>
							<td>
								<img style="max-width: 120px;" src="{{ image.file.getFilename()|imagine_filter('slider_mobile') }}" class="img-fluid">
							</td>
							<td>
								{% for translation in image.file.getTranslations() %}
									<div class="card mb-1">
										<div class="card-header p-2">
											<span class="fw-b">
												{{ translation.getLocale() }}
											</span>
										</div>
										<div class="card-body p-2 pre">
											{{ translation.getTitle() | slice(0, 50) ~ '...' }}
										</div>
									</div>
								{% endfor %}
							</td>                           
                            <td>
                                {{ image.file.link|default('-')  }}
                            </td>
							<td>
								<a class="btn btn-danger btn-sm me-3" href="{{ path(remove_route, {'id': image.getId()}) }}" onclick="return confirm('Czy na pewno usunąć to zdjęcie?')">
									<svg class="icon icon-xs w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
									</svg>
									Usuń
								</a>

								{% if edit_route is defined %}
									<a class="btn btn-info btn-sm" href="{{ path(edit_route, {'id': image.getId()}) }}">
										<svg class="icon icon-xs w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
										</svg>
										Edycja
									</a>
								{% endif %}
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
			<div class="d-flex justify-content-end mt-2">
				<button class="btn btn-primary" type="submit">
					{{ button_label|default('Zapisz') }}
				</button>
			</div>
		</form>
	</div>
{% else %}
	<div class="alert alert-info">
		Brak zdjęć
	</div>
{% endif %}