{% set showForm = files|length == 0 or fileUploadForm.vars.valid == false %}

<turbo-frame id="turbo_modal_frame">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="h6 modal-title">Manage Files</h2>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{% if messages %}
					{{ include('components/alerts.html.twig', { alerts: messages }) }}
				{% endif %}

				<div class="{{ files|length > 0 ? 'd-flex justify-content-end' : ''}}">
					<button class="btn btn-link p-0 fs-5 d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFileUpload" aria-expanded="{{ showForm ? 'true' : 'false' }}" aria-controls="collapseFileUpload">
						Upload New Files
						<svg class="icon icon-xs ms-1 collapse-icon" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
						</svg>
					</button>
				</div>
				<div class="collapse {{ showForm ? 'show' : ''}}" id="collapseFileUpload">
					<div class="card card-body mt-2 mb-4">
						{{ form_start(fileUploadForm) }}
						{{ form_widget(fileUploadForm) }}
						<button class="btn btn-primary mt-2" type="submit">
							<svg class="icon icon-xs me-2" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
							</svg>
							Upload
						</button>
						{{ form_end(fileUploadForm) }}
					</div>
				</div>

				{{ include('file/listing.html.twig') }}

			</div>
		</div>
	</div>
</turbo-frame>