<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="t3js-module-content" data-installer-database-data-execute-token="{executeDatabaseDataToken}">
    <div class="typo3-install-content-body">
        <h2>Create administrative user and specify site name</h2>
        <p>
            Use this account to log into the backend of your site.<br>
            The password you provide for this account is also used to access the <strong>Install Tool</strong>.
        </p>
        <p>On this page you can also set a name for your new website.</p>

        <div class="typo3-install-content-spacer"></div>
        <div class="t3js-installer-databaseData-output"></div>
        <div class="typo3-install-content-spacer"></div>

        <form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before" spellcheck="false">
            <input type="hidden" value="execute" name="install[set]" />
            <div class="form-group">
                <label for="username" class="form-label">Username</label>
                <input
                    class="t3-install-form-input-text form-control"
                    name="install[values][username]"
                    id="username"
                    placeholder="admin"
                    autocomplete="off"
                />
            </div>

            <div class="form-group">
                <label for="password" class="form-label">Password</label>
                <input
                    class="t3-install-form-input-text t3-install-form-password-strength form-control"
                    name="install[values][password]"
                    id="password"
                    type="password"
                    autocomplete="off"
                    placeholder="random password"
                />
                <f:comment><!-- @todo: Add API for input group addons in floating forms--></f:comment>
                <button
                    type="button"
                    class="t3-install-form-password-toggle btn btn-link"
                    data-toggle-target="#password" data-toggle-state="invisible"
                    style="position: absolute; bottom: .35em; right: 0; outline: none; box-shadow: none"
                    aria-label="Toggle password visibility"
                >
                    <core:icon identifier="actions-lock" size="small" />
                    <core:icon identifier="actions-eye" size="small" />
                </button>
            </div>

            <f:be.infobox
                title="Password security"
                state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_INFO')}"
            >
                If compromised, this account will provide an attacker with complete access to your installation.<br>
                A strong password is recommended. Include lower and upper case characters, special characters and numbers. Your password must be at least eight characters long.
            </f:be.infobox>

            <div class="form-group">
                <label for="email" class="form-label">Email address</label>
                <input
                    type="email"
                    class="t3-install-form-input-text form-control"
                    name="install[values][email]"
                    id="email"
                    placeholder="you@me.com"
                />
            </div>
            <div class="form-group">
                <label for="sitename" class="form-label">Site name</label>
                <input
                    class="t3-install-form-input-text form-control"
                    name="install[values][sitename]"
                    id="sitename"
                    type="text"
                    value="{siteName}"
                    placeholder="Your new website"
                />
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary t3js-installer-databaseData-execute">
                    Continue
                </button>
            </div>
        </form>
    </div>
</div>

</html>
