{% extends "account.twig" %}

{% block account_content %}

{# <div class="docs">
    <ul class="nav nav-pills pull-right">
        <li><a href="#-status">{% trans "Account Status" %}</a></li>
        <li><a href="#-profile">{% trans "Edit Profile" %}</a></li>
        <li><a href="#-password">{% trans "Change Password" %}</a></li>
        {{ hook('user_settings_nav', user) }}
        <li><a href="#-delete">{% trans "Delete Account" %}</a></li>
    </ul>
</div> #}

<div class="mysettings">
    {# <div id="account-status" class="row">
        <div class="span3">
            <h2>{% trans "Account Status" %}</h2>
            <p>{% trans "See how your account is doing." %}</p>
        </div>
        <div class="span9">
            <div class="form-horizontal" style="margin-bottom:30px">
                <fieldset>

                {% if user.isAbleToPublish %}

                    <div class="btn btn-success btn-large pull-left" style="margin-right: 20px" disabled="disabled">{% trans "Activated" %}</div>
                    <p>{% trans "Your account has been activated, and you are able to create and publish charts." %}</p>

                {% elseif user.role == 'pending' %}

                    <div class="btn btn-warning btn-large pull-left" style="margin-right: 20px" disabled="disabled">{% trans "Pending" %}</div>
                    <p>{% trans "Your account is pending because your email address has not been activated, yet. You can create charts, but they will not be visible for anybody else." %}</p>

                    <p><em>{% trans "Having trouble with the account activation?" %}</em></p>

                    <ul class="options">
                        <li><i class="icon-chevron-right"></i> {{ "Maybe the email has been catched by your email providers spam filter. Please check the spam folder for the last activation email we sent on <strong>%DATE%</strong>." | trans | replace({'%DATE%': activation_email_date }) | raw }}</li>

                        <li><i class="icon-chevron-right"></i> <a class="btn" href="#" id="resend-activation-link">{% trans "Re-send activation link" %}</a></li>

                        <li><i class="icon-chevron-right"></i> {{ "Or, <a href='mailto:%support_email%'>contact us</a> to find other ways to activate your account." | trans | replace({'%support_email%': SUPPORT_EMAIL }) | raw }}</li>
                    </ul>

                {% endif %}

                </fieldset>
            </div>
        </div>
    </div> #}

    <div id="account-profile">
        <h2>{% trans "Edit Profile" %}</h2>
        <p>{% trans "Filling out your profile is optional. If you do, you can display these information below the charts you publish." %}</p>

        <div class="form-horizontal account profile">
            <fieldset>

                <div class="email control-group{% if new_email_confirmed %} success{% endif %}">
                    <label class="control-label" for="email">{% trans "E-Mail" %}</label>
                    <div class="controls">
                        <input type="email" class="input-xlarge" id="email" value="{{ user.email }}">
                        <p class="help-block">
                            {% if new_email_confirmed %}
                                {% trans "Your email address has been updated!" %}
                            {% else %}
                                {% trans "This is the email address which you use as login and to which we send notification emails." %}
                            {% endif %}
                        </p>
                    </div>

                </div>

                <div class="control-group">
                    <label class="control-label" for="name">{% trans "Name" %}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="name" placeholder="" value="{{ user.name }}">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="website">{% trans "Website" %}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="website" placeholder="http://" value="{{ user.website }}">
                        <p class="help-block">{% trans "Add a website that contains more information about you (e.g. your blog). Optionally you can display these information below you published charts." %}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="socialmedia">{% trans "Twitter/Facebook/etc" %}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="socialmedia" placeholder="http://twitter.com/" value="{{ user.smProfile }}">
                        <p class="help-block">{% trans "Enter the link to your favorite social media profile (e.g. Twitter)." %}</p>
                    </div>
                </div>

                <div class="form-actions">
                    <button class="btn btn-primary" type="submit" id="save-profile">{% trans "Save changes" %}</button>
                </div>
            </fieldset>

        </div>
    </div>

    {{ hook('user_settings', user) }}

</div>

<script type="text/javascript">

$(function() {

    $('#resend-activation-link').click(function(e) {
        e.preventDefault();
        dw.backend.resendActivationMail($(e.target).parent());
    });

    // save profile
    $('#save-profile').click(function(e) {
        var submit = $(e.target),
        payload = {
            email: $('#email').val(),
            name: $('#name').val(),
            website: $('#website').val(),
            profile: $('#socialmedia').val()
        };
        submit.addClass('loading');
        $.ajax({
            url: '/api/users/{{ user.id }}',
            type: 'PUT',
            dataType: 'json',
            data: JSON.stringify(payload),
            success: function(data) {
                submit.removeClass('loading');
                if (data.status == 'ok') {
                    _.each(data.data.messages, function(msg) {
                        dw.backend.logMessage(msg, $('.account.profile .control-group')[0], 'info');
                    });
                    _.each(data.data.errors, function(msg) {
                        dw.backend.logMessage(msg, $('.account.profile .control-group')[0], 'warning');
                    });
                    $('.profile .reset').prop('disabled', true);
                } else {
                    dw.backend.logError(data.message, $('.account.profile .control-group')[0]);
                }
            }
         });
    });

});

</script>

{% endblock %}