{% extends 'base.html.twig' %}

{% block title %}Web IFC{% endblock %}

{% block body %}

{% include 'partials/navbar.html.twig' %}

<div class="columns">
	<div class="column is-full" data-controller="scene modal" data-action="keydown->scene#keyboard">
		<div id="scene" data-scene-target="scene"></div>
		<div id="ui" data-theme="light" data-controller="form">
			<aside class="menu ml-4 mt-3" data-controller="clipper">
				<p class="menu-label is-size-6">Progetto</p>
				<div class="file mt-4 is-link">
					<label class="file-label">
						<input class="file-input"
							type="file"
							name="load-ifc"
							data-scene-target="load"
							data-action="change->scene#loadIfc"
							accept=".ifc" />
						<span class="file-cta">
						<span class="file-icon">
							<i class="bi bi-upload"></i>
						</span>
						<span class="file-label">Apri file IFC...</span>
						</span>
					</label>
				</div>
				<form class="form" data-form-target="buildingForm" data-action="submit->form#submit" method="post">
					<label class="label">Nome edificio</label>
					<div class="field has-addons">
						<div class="control">
							<input class="input" type="text"
							placeholder="Nome edificio" data-id="" data-form-target="building" data-scene-target="building">
						</div>
						<div class="control">
							<button class="button is-primary">
								Salva
								<span class="icon ml-1">
									<i class="bi bi-floppy"></i>
								</span>
							</button>
						</div>
					</div>
				</form>
				<div class="is-hidden" data-form-target="showBuilding">
					<p class="mt-4 p-3 is-size-6 has-background-light">
						<strong>Edificio:</strong>
						<span data-form-target="buildingName"></span>
					</p>
				</div>
				<ul class="menu-list ml-4">
					<li>
					</li>
				</ul>
				<p class="menu-label is-size-6">Proprietà IFC (selezione)</p>
				<ul class="menu-list">
					<li id="selected-prop"></li>
				</ul>
				<p class="menu-label is-size-6">Data tree</p>
				<ul class="menu-list" data-scene-target="dataTree">
				</ul>
				<p class="menu-label is-size-6">Strumenti</p>
				<ul class="menu-list">
					<li class="menu-item">
						Clipper
						<ul class="menu-list">
							<li class="menu-item"><label class="checkbox">Attivo <input class="checkbox ml-2" data-action="change->clipper#toggle" type="checkbox" checked></label></li>
							<li class="menu-item">
								Colore piani
								<div class="mt-2 p-2 input is-small" data-clipper-target="hex">
									<input type="color" data-action="input->clipper#color change->clipper#color"
									data-clipper-target="color" class="is-small is-clickable mr-2"
									aria-label="Colore clipper" value="#eaeaea">
									<span>#eaeaea</span>
								</div>
							</li>
							<li class="menu-item">
								Grandezza piani
								<div class="mt-2 input is-small" data-clipper-target="range-container">
									<input class="is-clickable is-small" data-action="change->clipper#size" data-clipper-target="range"
									type="range" step="0.1" min="5" max="15" title="10">
									<span class="is-size-6 is-small ml-1" data-clipper-target="size">10</span>
								</div>
							</li>
							<li class="menu-item">
							 	<div class="buttons">
									<button class="button has-background-danger has-text-centered has-text-dark"
									data-action="clipper#deleteAll" title="Elimina tutti i piani">Elimina</button>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
		<!-- Modale per mostrare barra caricamento IFC -->
		<div class="modal" data-modal-target="modal" data-scene-target="modal" data-action="loadingIfc@window->modal#open">
			<div class="modal-background"></div>
			<div class="modal-content has-background-transparent">
				<p class="has-text-centered p-5 has-text-white is-size-3">Caricamento...</p>
				<progress class="progress is-primary" min="10" max="100">1%</progress>
			</div>
			<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
		</div>
	</div>
</div>
{% endblock %}