{%  extends 'base.html.twig' %}
{% block javascripts %}
       {% block importmap %}{{ importmap('app') }}{% endblock %}
       <script src="{{ asset('webroot/mydevel_webroot_setup_initial.js') }}"></script>
{% endblock %}

{% block body %}
    <h1>{{ translations.title }}</h1>
    <div class="form-box">
        <div class="error-message">
            <ul>
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>

        {{ form_start(form) }}
        <fieldset class="margin-10">
            <legend><strong>{{ translations.site }}</strong></legend>
            <table class="full-width">
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.env) }}</th>
                    <td>{{ form_widget(form.env,{'attr':{'tabindex':1}}) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.site_name) }}</th>
                    <td>{{ form_widget(form.site_name,{'attr':{'tabindex':4}}) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.locale) }}</th>
                    <td>{{ form_widget(form.locale,{'attr':{'tabindex':2}}) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.site_rootdir) }}</th>
                    <td>{{ form_widget(form.site_rootdir,{'attr':{'tabindex':5}}) }}</td>
                    
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.site_email) }}</th>
                    <td>{{ form_widget(form.site_email,{'attr':{'tabindex':3}}) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.tempdir) }}</th>
                    <td>{{ form_widget(form.tempdir,{'attr':{'tabindex':6}}) }}</td>
                    
                </tr>
            </table>
        </fieldset>
        <fieldset class="margin-10">
            <legend><strong>{{ translations.user }}</strong></legend>
            <table class="full-width">
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.user_username) }}</th>
                    <td>{{ form_widget(form.user_username,{'attr':{'tabindex':7}}) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.user_password0) }}</th>
                    <td>{{ form_widget(form.user_password0,{'attr':{'tabindex':9}}) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.user_email) }}</th>
                    <td>{{ form_widget(form.user_email,{'attr':{'tabindex':8}}) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.user_password1) }}</th>
                    <td>{{ form_widget(form.user_password1,{'attr':{'tabindex':10}}) }}</td>
                </tr>
            </table>
        </fieldset>
        <fieldset class="margin-10" onload="setupform.initDatabaseSettings();">
            <legend><strong>{{ translations.db }}</strong></legend>
            <table class="full-width">
                <tr>
                    <td colspan="4" class="left">
                        <span>{{ form_widget(form.db_create) }}{{ form_label(form.db_create) }}</span>
                        <span style="height:16px;margin:15px;width:1px;border-left:2px solid;" />
                        <span style="margin-left:15px;">{{ form_widget(form.db_mkmigrations) }}{{ form_label(form.db_mkmigrations) }}</span>
                        <span style="height:16px;margin-left:12px;border-left:2px solid;" />
                        <span style="margin-left:15px;">{{ form_widget(form.db_migrate) }}{{ form_label(form.db_migrate) }}
                        
                    </td>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.db_backend) }}</th>
                    <td>{{ form_widget(form.db_backend) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.db_database) }}</th>
                    <td>{{ form_widget(form.db_database) }}</td>                    
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.db_host) }}</th>
                    <td>{{ form_widget(form.db_host) }}</td>
                    <th class="standard-background shrink-to-fit">{{ form_label(form.db_port) }}</th>
                    <td>{{ form_widget(form.db_port) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{  form_label(form.db_user) }}</th>
                    <td>{{ form_widget(form.db_user) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.db_password) }}</th>
                    <td>{{ form_widget(form.db_password) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{  form_label(form.db_url) }}</th>
                    <td colspan="3">{{ form_widget(form.db_url) }}</td>
                </tr>
            </table>
        </fieldset>
        <fieldset class="margin-10" onload="setupform.initEmailSettings()">
            <legend><strong>{{ translations.email }}</strong></legend>
            <table class="full-width">
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_backend) }}</th>
                    <td>{{ form_widget(form.email_backend) }}</td>
                    <th class="standard-background shrink-to-fit">{{ form_label(form.email_address) }}</th>
                    <td>{{ form_widget(form.email_address) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_user) }}</th>
                    <td>{{ form_widget(form.email_user) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_password) }}</th>
                    <td>{{ form_widget(form.email_password) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_host) }}</th>
                    <td>{{ form_widget(form.email_host) }}</td>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_port) }}</th>
                    <td>{{ form_widget(form.email_port) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_path) }}</th>
                    <td colspan="3">{{ form_widget(form.email_path) }}</td>
                </tr>
                <tr>
                    <th class="standard-background left shrink-to-fit">{{ form_label(form.email_dsn) }}</th>
                    <td colspan="3">{{ form_widget(form.email_dsn) }}</td>
                </tr>
            </table>
        </fieldset>
        <div class="full-width right">{{ form_widget(form.submit) }}</div>
        {{ form_end(form) }}
    </div>
    <script>initializeWebrootSetupForm();</script>
{% endblock %}