{% extends '@mio/settings/master.twig' %}

{% block settings_content %}
    <form method="post" action="?m=account" class="mio__settings__account">
        <div class="mio__settings__account__row">
            <div class="mio__settings__account__column">
                <div class="mio__settings__account__title">Profile</div>

                {% for name, props in settings_profile_fields %}
                <label class="mio__settings__account__input mio__settings__account__input--{{ name }}">
                    <div class="mio__settings__account__input__name">
                        {{ props.name }}
                    </div>
                    <div class="mio__settings__account__input__value">
                        <input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ settings_user['user_' ~ name] }}" class="mio__input__text mio__settings__account__input__value__text">
                    </div>
                </label>
                {% endfor %}
            </div>

            <div class="mio__settings__account__column mio__settings__account__column--no-margin">
                <div class="mio__settings__account__row">
                    <div class="mio__settings__account__column">
                        <div class="mio__settings__account__title">E-mail</div>

                        <label class="mio__settings__account__input">
                            <div class="mio__settings__account__input__name">
                                New E-mail Address
                            </div>
                            <div class="mio__settings__account__input__value">
                                <input type="text" name="email[new]" class="mio__input__text mio__settings__account__input__value__text">
                            </div>
                        </label>

                        <label class="mio__settings__account__input">
                            <div class="mio__settings__account__input__name">
                                Confirmation
                            </div>
                            <div class="mio__settings__account__input__value">
                                <input type="text" name="email[confirm]" class="mio__input__text mio__settings__account__input__value__text">
                            </div>
                        </label>
                    </div>
                </div>

                <div class="mio__settings__account__row">
                    <div class="mio__settings__account__column">
                        <div class="mio__settings__account__title">Password</div>

                        <label class="mio__settings__account__input">
                            <div class="mio__settings__account__input__name">
                                New Password
                            </div>
                            <div class="mio__settings__account__input__value">
                                <input type="password" name="password[new]" class="mio__input__text mio__settings__account__input__value__text">
                            </div>
                        </label>

                        <label class="mio__settings__account__input">
                            <div class="mio__settings__account__input__name">
                                Confirmation
                            </div>
                            <div class="mio__settings__account__input__value">
                                <input type="password" name="password[confirm]" class="mio__input__text mio__settings__account__input__value__text">
                            </div>
                        </label>
                    </div>
                </div>

                <div class="mio__settings__account__row">
                    <div class="mio__settings__account__column">
                        <div class="mio__settings__account__title">Confirmation</div>

                        <label class="mio__settings__account__input">
                            <div class="mio__settings__account__input__name">
                                Current Password
                            </div>
                            <div class="mio__settings__account__input__value">
                                <input type="password" name="current_password" placeholder="only needed for e-mail and password updating" class="mio__input__text mio__settings__account__input__value__text">
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="mio__settings__account__row mio__settings__account__row--buttons">
            <button class="mio__input__button" name="csrf" value="{{ csrf_token() }}">Update</button>
            <button class="mio__input__button" type="reset">Reset</button>
        </div>
    </form>
{% endblock %}