<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="t3js-module-content" data-installer-database-select-execute-token="{executeDatabaseSelectToken}" data-installer-database-check-requirements-execute-token="{executeCheckDatabaseRequirementsToken}">
    <div class="typo3-install-content-body">
        <h2>Select a database</h2>

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

        <f:if condition="{errors -> f:count()}">
            <f:for each="{errors}" as="error">
                <f:be.infobox
                    title="Exception"
                    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_ERROR')}"
                >
                    {error}
                </f:be.infobox>
            </f:for>
        </f:if>

        <form method="post" id="stepInstaller-databaseSelect" spellcheck="false">
            <div class="form-group">
                <div class="form-check">
                    <input
                        id="t3-install-form-db-select-type-existing"
                        type="radio"
                        name="install[values][type]"
                        value="existing"
                        checked="checked"
                        class="form-check-input"
                    />
                    <label class="form-check-label" for="t3-install-form-db-select-type-existing">
                        Use an existing empty database:
                    </label>
                </div>
                <div class="form-group">
                    <label class="form-label" for="t3-install-step-database-existing">
                        Select a database
                    </label>
                    <select
                        id="t3-install-step-database-existing"
                        name="install[values][existing]"
                        class="form-select"
                        onfocus="document.getElementById('t3-install-form-db-select-type-existing').checked=true;"
                    >
                        <option value="">-- Choose --</option>
                        <f:for each="{databaseList}" as="database">
                            <f:if condition="{database.tables} || {database.readonly}">
                                <f:then>
                                    <option value="{database.name}" disabled="disabled">{database.name} ({f:if(condition: database.readonly, then: 'readonly', else: '{database.tables} Tables')})</option>
                                </f:then>
                                <f:else>
                                    <option value="{database.name}">{database.name}</option>
                                </f:else>
                            </f:if>
                        </f:for>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="form-check">
                    <input
                        id="t3-install-form-db-select-type-new"
                        type="radio"
                        name="install[values][type]"
                        value="new"
                        class="form-check-input"
                    />
                    <label class="form-check-label" for="t3-install-form-db-select-type-new">
                        Create a new database:
                    </label>
                </div>
                <div class="form-group">
                    <label class="form-label" for="t3-install-step-database-new">
                        Specify a name for your TYPO3 database
                    </label>
                    <input
                        id="t3-install-step-database-new"
                        class="t3-install-form-input-text form-control"
                        type="text"
                        name="install[values][new]"
                        checked="checked"
                        onfocus="document.getElementById('t3-install-form-db-select-type-new').checked=true;"
                    />
                </div>
            </div>

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