{% import "Juice/macros/html.html" as html with context %}
{% import "Juice/macros/forms.html" as forms with context %}
{% import "Juice/macros/widget.html" as widget with context %}

<div class="row">

    <div class="col-md-offset-3 col-md-6">

        <h4>{{ login_title | default('My Account Settings')}}</h4>

        {%  call widget.accordion() %}

            {% call widget.collapsible('You') %}
                  <div class="" style="text-align: center">
                    <h4>{{ current_user.name }}</h4>
                    <div class="">
                        <img class="juice-profile-avatar-150" src="{{ current_user.profile_image_url }}">
                    </div>
                  </div>
            {% endcall %}

            {% call widget.collapsible('Basic Info', collapse=true) %}

                {% call forms.post(endpoint_namespace % 'account_settings') %}
                    {{ forms.hidden(name='action', value='info') }}

                    {{ forms.input(label="First Name", name="first_name",
                        value=current_user.first_name,
                        data={"validation": "required"}) }}

                    {{ forms.input(label="Last Name", name="last_name",
                        value=current_user.last_name,
                        data={"validation": "required"}) }}

                    {{ forms.button('Save', type='submit', class='btn-info') }}
                {% endcall %}
            {%  endcall %}

            {% call widget.collapsible('Change Profile Photo', collapse=true) %}
                {% call forms.upload(endpoint_namespace % 'account_settings') %}
                    {{ forms.hidden(name='action', value='profile-photo') }}
                    {{ forms.input(label="Select Image to upload", type='file',
                        name='file') }}
                    {{ forms.button('Save', type='submit', class='btn-info') }}
                {% endcall %}
            {%  endcall %}


            {% call widget.collapsible('Change Login Email', collapse=true) %}
                {% call forms.upload(endpoint_namespace % 'account_settings') %}
                    {{ forms.hidden(name='action', value='login') }}
                    {{ forms.input(label="New Email", name="email",
                        value=current_user.email,
                        data={"validation": "email"}) }}

                    {{ forms.input(label="Enter Your Password",
                        name="confirm-password", type="password",
                        data={"validation": "required"}) }}

                    {{ forms.button('Save', type='submit', class='btn-info') }}
                {% endcall %}
            {%  endcall %}


            {% call widget.collapsible('Change Password', collapse=true) %}
                {% call forms.upload(endpoint_namespace % 'account_settings') %}
                    {{ forms.hidden(name='action', value='password') }}
                    {{ forms.input(label="Enter Current Password",
                        name="confirm-password", type="password",
                        data={"validation": "required"}) }}

                    {{ forms.input(label="New Password",
                        name="password", type="password",
                        data={"validation": "required"}) }}

                    {{ forms.input(label="Confirm New Password",
                        name="password2", type="password",
                        data={"validation": "required"}) }}

                    {{ forms.button('Save', type='submit', class='btn-info') }}
                {% endcall %}
            {%  endcall %}

        {%  endcall %}
    </div>

</div>



