<div class="parent_portal">
	<h2>Bienvenue dans le Portail Parent</h2>
	<div>
		{% if json.aes_id %}
		<ul class="children">
			{% for child in homepage_data.children %}
			<li class="child">
				<div class="child-info">
					<h4>{{ child.name }}</h4>
				</div>
				<ul class="forms">
					{% for form in child.forms %}
					<li aria-label="{{ form.title }}" class="form">
						<a
							class="{{ form.status }}"
							href="{% if form.status != 'locked' %}{{ eservices_url }}portail-parent/{{ form.slug }}/?enfant={{ child.id }}
            {% else %}#{% endif %}"
						>
							<img src="{{ portal_url }}{{ form.image }}" />
							<span class="title"> {{ form.title }} </span>
						</a>
					</li>
					{% endfor %}
				</ul>
			</li>
		</ul>

		{% empty %}
		<div class="intro">
			<p>
				Vous n'avez pas encore d'enfants enregistrés dans notre base de données.
			</p>
		</div>
		{% endfor %}
		<div class="buttons">
			<p>
				<a class="pk-button" href="{{ eservices_url }}pp-enregistrer-un-enfant"
					>Enregistrer un enfant</a
				>
			</p>
			<p>
				<a
					class="pk-button"
					href="{{ eservices_url }}pp-finaliser-les-inscriptions-aux-plaines/"
					>Finaliser les inscriptions aux plaines</a
				>
			</p>
		</div>
		{% else %}
		<div class="intro">
			<p>
				Vous n'êtes pas encore enregistré dans notre base de données. Veuillez
				compléter votre inscription.
			</p>
		</div>
		<div class="buttons">
			<p>
				<a
					class="pk-button"
					href="{{ eservices_url }}pp-m-enregistrer-en-tant-que-parent"
				>
					M'inscrire dans le Portail Parent
				</a>
			</p>
		</div>
		{% endif %}
	</div>
</div>

<style>
	.parent_portal .children {
		padding: 0;
	}
	.parent_portal li {
		list-style: none;
	}
	.parent_portal li.child {
		margin: 0 1em 2ex 0;
	}
	.parent_portal .child h4 {
		margin: 0;
	}
	.parent_portal .child p {
		margin: 0 0 1ex 1em;
	}
	.parent_portal .child-info {
		margin-bottom: 1ex;
	}
	.parent_portal ul.forms {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}
	.parent_portal li.form {
		position: relative;
	}
	.parent_portal li.form a {
		text-decoration: none;
		display: flex;
		width: 11em;
		height: 8ex;
		padding: 1ex 0;
		border: #d3d3d3 solid 1px;
		margin: 0 0.5em 0.5ex 0;
		font-weight: bold;
		align-items: center;
		border-radius: 15px;
		background: #f2f2f2;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
		transition: box-shadow 0.3s ease-in-out;
	}
	.parent_portal li.form a:hover {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
		filter: brightness(1.1);
	}
	.parent_portal li.form a:active {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	}
	.parent_portal li.form a.locked {
		background: #ccc;
		box-shadow: none;
		cursor: not-allowed;
		filter: saturate(33%);
	}
	.parent_portal li.form a.valid {
		background: #e5ffe5;
	}
	.parent_portal li.form a.invalid {
		background: #ffe5e5;
	}
	.parent_portal li.form a img {
		max-width: 2.5em;
		margin: 0 0.5em;
	}
	.parent_portal li.form a .title {
		margin: 0 auto;
	}
	.parent_portal li.form a.invalid span.img,
	.parent_portal li.form a.locked span.img {
		visibility: hidden;
		position: relative;
	}
	.parent_portal li.form a.invalid span.img:after,
	.parent_portal li.form a.locked span.img:after {
		visibility: visible;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.parent_portal .form {
		position: relative; /*les .picto-item deviennent référents*/
	}
	@media all and (max-device-width: 480px) {
		.parent_portal li.form {
			margin-bottom: 1ex;
		}
	}
	.parent_portal div.buttons {
		display: flex;
	}
	.parent_portal div.buttons a.pk-button {
		margin-right: 10px;
	}
</style>
