<!--Momentan tritt hier noch ein Error auf. Wir müssten beim nächsten Mal besprechen, was die Ursache hierfür ist.
Der Fehler liegt irgendwo in der Definition der Variablen.
"[Line 4, Column 12] parseAggregate: expected comma after expression"
Leider kann ich nicht feststellen, wo ein Komma fehlt...-->

{% set
text = {
headline: 'Experiment',
description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr.',
login_prompt: 'You need an activated user account for this action.',
account_setup_prompt: 'You don\'t have a user account yet?',
button_login: 'Login',
button_register: 'Create user account',
button_start_experiment: 'Start Experiment',
button_generate_experiment_description: 'Generate Experiment Description',
label_choose_system: 'Choose a System to Control',
label_choose_controller: 'Choose a Controller',
option_none: 'None'
}
%}

{% if language=='de' %}
{% set
text = {
headline: 'Experiment',
description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr.',
login_prompt: 'Für diese Aktion benötigen Sie ein aktiviertes Benutzerkonto.',
account_setup_prompt: 'Sie haben noch kein Benutzerkonto?',
button_login: 'Login',
button_register: 'Benutzerkonto einrichten',
button_start_experiment: 'Experiment starten',
button_generate_experiment_description: 'Experimentbeschreibung generieren',
label_choose_system: 'Wähle ein zu steuerndes System',
label_choose_controller: 'Wähle einen Controller',
option_none: 'Nicht ausgewählt'
}
%}
{% endif %}

{% extends "layout.html" %}
{% block main %}

{% if isLoggedIn %}
<div class="mx-auto p-8">
    <form method="GET" class="flex flex-col gap-4 items-center">
        <div class="flex gap-2">
            <div class="flex flex-col w-fit justify-center gap-6">
                <label for="pspu" class="mr-2">{{ text.label_choose_system }}:</label>
                <label for="bpu" class="mr-2">{{ text.label_choose_controller }}:</label>
            </div>
            <div class="flex flex-col w-fit items-center gap-2">
                <select name="pspu" id="pspu" class="w-full p-2 border-2 bg-white rounded-lg">
                    <option value="">{{ text.option_none }}</option>
                    {% for system in pspus %}
                    <option value="{{system.url}}">{{system.name}}</option>
                    {% endfor %}
                </select>
                <select name="bpu" id="bpu" class="w-full p-2 border-2 bg-white rounded-lg">
                    <option value="">{{ text.option_none }}</option>
                    {% for system in bpus %}
                    <option value="{{system.url}}">{{system.name}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <input class="primary-button" type="submit" value="{{ text.button_generate_experiment_description }}">
    </form>
</div>
<form method="POST" class="w-2/3 mx-auto flex flex-col gap-2 items-center">
<textarea name="experiment" class="w-full h-96 border-2 font-mono">
{{ experiment | dump(2) }}
</textarea><br>
<input class="primary-button mt-4" type="submit" value="{{ text.button_start_experiment }}">
</form>

{% else %}
<div class="max-w-6xl mx-auto w-full py-16 font-body">
    <div class="mx-auto flex flex-wrap-reverse justify-center gap-5">
        <div class="max-w-md px-10 space-y-5">
            <div class="text-4xl font-bold text-primary-700">{{text.headline}}</div>
            <div>{{text.description}}</div>
            <div>{{text.login_prompt}}</div>
            <a href="login.html?redirect={{page}}"
                class="bg-primary rounded-3xl px-8 py-1 w-fit text-primary-50 text-l hover:bg-secondary-primary-hover duration-300">
                {{text.button_login}}
            </a>
            <div>{{text.account_setup_prompt}}</div>
            <button
                class="bg-primary-100-middle rounded-3xl px-8 py-1 w-fit text-primary-50 text-l hover:bg-primary-100-middle-hover duration-300">
                {{text.button_register}}
            </button>
        </div>
        <div class="max-w-lg">
            <img class="mt-10" src="/img/experiment1.jpg" alt="Logo">
        </div>
    </div>
</div>
{% endif %}
<div class="flex-grow"></div>
{% endblock %}