{%
    set social_links = [
        'github' : [ 'connected': user.getGithubId() > 0 ],
        'gitlab' : [ 'connected': user.getGitlabId() > 0, 'class': 'text-gitlab' ],
        'google' : [ 'connected': user.getGoogleId() > 0, 'class': 'text-google' ]
    ]
%}

<div class="section">

    <form class="form-horizontal" method="post" action="">

        <div class="form-group">
            {{ form.renderDecorated('username', [ 'length': 7 ]) }}
            {{ form.renderDecorated('id', [ 'length': 2, 'label-length' : 1 ]) }}
        </div>

        <div class="form-group">
            {{ form.renderDecorated('name') }}
        </div>

        <div class="form-group">
            {{ form.renderDecorated('email') }}
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <h4>Password</h4>
            </div>
        </div>

        {% if form.has('passwordCurrent') %}
        <div class="form-group">
            {{ form.renderDecorated('passwordCurrent') }}
        </div>
        {% endif %}

        <div class="form-group">
            {{ form.renderDecorated('passwordNew') }}
        </div>

        <div class="form-group">
            {{ form.renderDecorated('passwordConfirm') }}
        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <h4>Social sign-in</h4>

                <hr />

                {% for name,info in social_links %}
                <div class="col-sm-2 text-center">
                    {%  set class = info['class'] | default(false) %}
                    <div{{ class ? ' class="%s"'|format(class) : '' }}>{{ icon('brand/' ~ name, [ '3x' ]) }}</div>
                    {% if info['connected'] %}
                        <a href="{{ url(['for': 'oauth-disconnect', 'provider': name]) }}">Disconnect</a>
                    {% else %}
                        <a href="{{ url(['for': 'oauth', 'strategy': name]) }}">Connect</a>
                    {% endif %}
                </div>
                {% endfor %}

            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <hr />
                {{ form.render('Save') }}
            </div>
        </div>

    </form>
</div>