<div class="page__content">
    <h2>{{stepNumber}} - Admin user</h2>
    <p>
        That's great, the structure of Robert's database is now complete.
    </p>
    {% if stepData['existingAdmins'] is not empty %}
    <p>
        There is already <strong>{{ stepData['existingAdmins']|length }} admin users</strong>
        in your database:
    </p>
    <ul>
        {% for adminUser in stepData['existingAdmins'] %}
        <li><strong>{{ adminUser['pseudo'] }}</strong> ({{ adminUser['email'] }})</li>
        {% endfor %}
    </ul>
    <form method="POST" class="install__admin-form" {% if error %}style="display: none;"{% endif %} id="adminFormSkip">
        <p>
            Do you want to create a new a new admin user, in order to access the application with this one?
        </p>
        <p>
            <a class="button" role="button" onclick="showAdminFormData()">Add a new admin user</a>
        </p>
        <p>
            Or do you prefer to continue with existing admin users, and go to next step directly?
        </p>
        <div class="form__submit">
            <input type="hidden" name="skipped" value="yes" />
            <button role="submit">Étape suivante</button>
        </div>
    </form>
    {% else %}
    <p>
        It's now time to <strong>create the first user</strong>. This user will be an <strong>admin
        user</strong>, so will have access to all aspects of the application and will have all right
        granted.
    </p>
    {% endif %}
    <div {% if stepData['existingAdmins'] and not error %}style="display: none;"{% endif %} id="adminFormData">
        <p>
            Choose a pseudo and a password, then give an email address, as well as the name
            of this user.
        </p>
        <form method="POST" class="form">
            <div class="form__field">
                <h3 class="form__field-title">Pseudo</h3>
                <p class="form__field-description">
                    The user's pseudo that will be used to access Robert2 as an administrator.
                </p>
                <input
                    type="text"
                    name="user[pseudo]"
                    style="width: 200px;"
                    value="{{stepData['user']['pseudo']}}"
                />
                {% if validationErrors['pseudo'] %}
                <div class="form__field-error">{{validationErrors['pseudo'][0]}}</div>
                {% endif %}
            </div>
            <div class="form__field">
                <h3 class="form__field-title">Password</h3>
                <p class="form__field-description">
                    The password for this user to access Robert2.
                </p>
                <input
                    type="password"
                    name="user[password]"
                    style="width: 200px;"
                    value="{{stepData['user']['password']}}"
                />
                {% if validationErrors['password'] %}
                <div class="form__field-error">{{validationErrors['password'][0]}}</div>
                {% endif %}
            </div>
            <div class="form__field">
                <h3 class="form__field-title">Email address</h3>
                <p class="form__field-description">
                    The email address of the admin user, which can also be used to login
                    to Robert2.
                </p>
                <input
                    type="email"
                    name="user[email]"
                    style="width: 300px;"
                    placeholder="your-address@your-company.com"
                    value="{{stepData['user']['email']}}"
                />
                {% if validationErrors['email'] %}
                <div class="form__field-error">{{validationErrors['email'][0]}}</div>
                {% endif %}
            </div>
            <div class="form__field">
                <h3 class="form__field-title">Person name</h3>
                <p class="form__field-description">
                    The first name and last name of the admin user (optional).
                </p>
                <div class="install__admin-names">
                    <label for="userFirstName">First name:</label>
                    <input
                        type="text"
                        name="user[person][first_name]"
                        id="userFirstName"
                        value="{{stepData['user']['person']['first_name']}}"
                    />
                    <label for="userLastName">Last name:</label>
                    <input
                        type="text"
                        name="user[person][last_name]"
                        id="userLastName"
                        value="{{stepData['user']['person']['last_name']}}"
                    />
                </div>
                {% if validationErrors['person']['last_name'] %}
                <div class="form__field-error">
                    {{validationErrors['person']['last_name'][0]}}
                </div>
                {% endif %}
                {% if validationErrors['person']['first_name'] %}
                <div class="form__field-error">
                    {{validationErrors['person']['first_name'][0]}}
                </div>
                {% endif %}
            </div>
            <div class="form__submit form__submit--horizontal">
                {% if stepData['existingAdmins'] %}
                <a href="#" onclick="hideAdminFormData()" style="margin-right: 2rem;">Cancel creation</a>
                {% endif %}
                <button role="submit">Next step</button>
            </div>
        </form>
    </div>
</div>

<script src="js/install/adminUserFormToggle.js"></script>
