{% extends 'user/settings/base.html.twig' %}

{% set sectionTitle = 'General Settings' %}

{% block settingsContent %}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="flashbang flashbang-{{ label }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <form action="" method="POST" class="settings-box">
        <div class="settings-title">General</div>
        <div class="settings-item">
            <div class="settings-label">Email</div>
            <div class="settings-input">
                <input type="email" name="email" value="{{ my.email }}" required />
            </div>
        </div>
        <div class="settings-item">
            <div class="settings-label">Username</div>
            <div class="settings-input">
                <input type="text" name="username" value="{{ my.username }}" required />
            </div>
        </div>
        <div class="settings-item">
            <div class="settings-label">Preferred Pronouns</div>
            <div class="settings-input">
                <select name="pronouns">
                    <option value="" {{ my.pronouns == "" ? "selected" : ""}}>-</option>
                    <option value="he/him" {{ my.pronouns == "he/him" ? "selected" : ""}}>he/him</option>
                    <option value="she/her" {{ my.pronouns == "she/her" ? "selected" : ""}}>she/her</option>
                    <option value="they/them" {{ my.pronouns == "they/them" ? "selected" : ""}}>they/them</option>
                    <option value="he/they" {{ my.pronouns == "he/they" ? "selected" : ""}}>he/they</option>
                    <option value="she/they" {{ my.pronouns == "she/they" ? "selected" : ""}}>she/they</option>
                    <option value="any pronouns" {{ my.pronouns == "any pronouns" ? "selected" : ""}}>any pronouns</option>
                </select>
                <span>This will be shown on your profile and on tournaments, so please take this field serious.</span>
            </div>
        </div>
        <div class="settings-save">
            <input type="submit" class="button" name="save" value="Save" />
        </div>
    </form>
{% endblock %}