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

{% if user_has_background %}
    {% set site_background_url = '/profile.php?m=background&u=' ~ current_user.user_id %}
{% endif %}

{% block settings_content %}
    <div class="container">
        <div class="container__title">Account</div>
        <form action="" method="post" class="settings__account">
            <input type="hidden" name="csrf" value="{{ csrf_token() }}">

            <div class="settings__account__row">
                {% if settings_perms.edit_profile %}
                    <div class="settings__account__column">
                        <div class="settings__account__title">Profile</div>

                        {% for name, props in settings_profile_fields %}
                        <label class="settings__account__input settings__account__input--{{ name }}">
                            <div class="settings__account__input__name">
                                {{ props.name }}
                            </div>
                            <div class="settings__account__input__value">
                                <input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ settings_profile_values['user_' ~ name] }}" class="input__text settings__account__input__value__text">
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if settings_disable_account_options %}
                    <div class="settings__account__column settings__account__column--no-margin settings__account__column--disabled">
                        <div class="settings__account__row">
                            <div class="settings__account__column">
                                <div class="settings__account__title">E-mail and Password changing</div>
                                <div class="settings__account__disabled">
                                    <a class="input__button" href="https://flashii.net/settings.php?m=account">Go to main site</a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="settings__account__column settings__account__column--no-margin">
                        <div class="settings__account__row">
                            <div class="settings__account__column">
                                <div class="settings__account__title">E-mail</div>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        Current e-mail address
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="text" class="input__text input__text--readonly settings__account__input__value__text" readonly value="{{ settings_email }}">
                                    </div>
                                </label>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        New e-mail Address
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="text" name="email[new]" class="input__text settings__account__input__value__text">
                                    </div>
                                </label>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        Confirmation
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="text" name="email[confirm]" class="input__text settings__account__input__value__text">
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="settings__account__row">
                            <div class="settings__account__column">
                                <div class="settings__account__title">Password</div>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        New Password
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="password" name="password[new]" class="input__text settings__account__input__value__text">
                                    </div>
                                </label>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        Confirmation
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="password" name="password[confirm]" class="input__text settings__account__input__value__text">
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="settings__account__row">
                            <div class="settings__account__column">
                                <div class="settings__account__title">Confirmation</div>

                                <label class="settings__account__input">
                                    <div class="settings__account__input__name">
                                        Current Password
                                    </div>
                                    <div class="settings__account__input__value">
                                        <input type="password" name="current_password" placeholder="only needed for e-mail and password updating" class="input__text settings__account__input__value__text">
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            {% if settings_perms.edit_profile or not settings_disable_account_options %}
                <div class="settings__account__row settings__account__row--buttons">
                    <button class="input__button">Update</button>
                    <button class="input__button" type="reset">Reset</button>
                </div>
            {% endif %}
        </form>
    </div>

    {% if settings_perms.edit_avatar %}
        <div class="container">
            <div class="container__title">Avatar</div>
            <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
                <input type="hidden" name="csrf" value="{{ csrf_token() }}">

                <div class="settings__images__sections">
                    <div class="settings__images__requirements">
                        <ul class="settings__images__requirements__list">
                            <li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
                            <li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
                            <li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar.max_size|byte_symbol(true) }}</strong> filesize limit.</li>
                            <li class="settings__images__requirement">May not be larger than <strong>{{ avatar.max_width }}x{{ avatar.max_height }}</strong>.</li>
                            <li class="settings__images__requirement">Will be centre cropped to be <strong>200x200</strong>.</li>
                            <li class="settings__images__requirement">Animated gif images are allowed.</li>
                        </ul>
                    </div>
                </div>

                <div class="settings__avatar">
                    <label class="settings__avatar__label">
                        <div
                            class="avatar settings__avatar__preview"
                            id="avatar-preview"
                            style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar')"></div>
                        <input
                            class="settings__avatar__input"
                            accept="image/png,image/jpeg,image/gif"
                            type="file"
                            name="avatar[file]"
                            id="avatar-selection">
                        <div class="settings__avatar__name" id="avatar-name">
                            Click to select a file!
                        </div>
                    </label>

                    <div class="settings__avatar__buttons">
                        <button
                            class="settings__avatar__button"
                            name="avatar[mode]"
                            value="upload">
                            Upload
                        </button>
                        <button
                            class="settings__avatar__button settings__avatar__button--delete{{ user_has_avatar ? '' : ' settings__avatar__button--disabled' }}"
                            {{ user_has_avatar ? '' : 'disabled' }}
                            name="avatar[mode]"
                            value="delete">
                            Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            function updateAvatarPreview(name, url, previewEl, nameEl) {
                url = url || "/profile.php?u={{ current_user.user_id }}&m=avatar";
                previewEl = previewEl || document.getElementById('avatar-preview');
                nameEl = nameEl || document.getElementById('avatar-name');
                previewEl.style.backgroundImage = 'url(\'{0}\')'.replace('{0}', url);
                nameEl.textContent = name;
            }

            document.getElementById('avatar-selection').addEventListener('change', function (ev) {
                updateAvatarPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
            });
        </script>
    {% endif %}

    {% if settings_perms.edit_background %}
        <div class="container">
            <div class="container__title">Background</div>
            <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
                <input type="hidden" name="csrf" value="{{ csrf_token() }}">

                <div class="settings__images__sections">
                    <div class="settings__images__requirements">
                        <ul class="settings__images__requirements__list">
                            <li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
                            <li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
                            <li class="settings__images__requirement">Image may not exceed the <strong>{{ background.max_size|byte_symbol(true) }}</strong> filesize limit.</li>
                            <li class="settings__images__requirement">May not be larger than <strong>{{ background.max_width }}x{{ background.max_height }}</strong>.</li>
                            <li class="settings__images__requirement">Animated gif images are <strong>not</strong> allowed.</li>
                        </ul>
                    </div>
                </div>

                <div class="settings__avatar">
                    <label class="settings__avatar__label">
                        <input
                            class="settings__avatar__input"
                            accept="image/png,image/jpeg,image/gif"
                            type="file"
                            name="background[file]"
                            id="background-selection">
                        <div class="settings__avatar__name" id="background-name">
                            Click to select a file!
                        </div>
                    </label>

                    <div class="settings__avatar__buttons">
                        <button
                            class="settings__avatar__button"
                            name="background[mode]"
                            value="upload">
                            Upload
                        </button>
                        <button
                            class="settings__avatar__button settings__avatar__button--delete{{ user_has_background ? '' : ' settings__avatar__button--disabled' }}"
                            {{ user_has_background ? '' : 'disabled' }}
                            name="background[mode]"
                            value="delete">
                            Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            function updateBackgroundPreview(name, url, previewEl, nameEl) {
                url = url || "/profile.php?u={{ current_user.user_id }}&m=background";
                previewEl = previewEl || document.body;
                nameEl = nameEl || document.getElementById('background-name');
                previewEl.style.setProperty('--site-background-image', 'url(\'{0}\')'.replace('{0}', url));
                nameEl.textContent = name;
            }

            document.getElementById('background-selection').addEventListener('change', function (ev) {
                updateBackgroundPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
            });
        </script>
    {% endif %}
{% endblock %}