{% extends 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Profile'|trans }}{% endblock %}

{# block top_content %}
<div class="title">
    <h5>Manage your profile</h5>
</div>
{% endblock #}

{% block content %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-profile" data-bs-toggle="tab">{{ 'Profile'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-password" data-bs-toggle="tab">{{ 'Change Password'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-api" data-bs-toggle="tab">API</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-gravatar" data-bs-toggle="tab">Gravatar</a>
        </li>
    </ul>

<div class="card">
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-profile" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/profile/update'|link }}" class="api-form" data-api-msg="{{ 'Profile updated'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Name'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="name" value="{{ profile.name }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Email'|trans }}</label>
                        <div class="col">

                            <input class="form-control" type="text" name="email" value="{{ profile.email }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Signature'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control" name="signature" rows="3">{{ profile.signature }}</textarea>
                        </div>
                    </div>

                    <input type="submit" value="{{ 'Update profile'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-password" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/profile/change_password'|link }}" class="api-form" data-api-msg="{{ 'Password Changed'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label for="current_password" class="col-3 col-form-label">{{ 'Current Password'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="password" name="current_password" id="current_password" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="new_password" class="col-3 col-form-label">{{ 'New Password'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="password" name="new_password" id="new_password" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="confirm_password" class="col-3 col-form-label">{{ 'Confirm Password'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="password" name="confirm_password" id="confirm_password" required>
                        </div>
                    </div>

                    <input type="submit" value="{{ 'Change Password'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-api" role="tabpanel">
            <div class="card-body">
                <h3>{{ 'API Key'|trans }}</h3>
                <p class="text-muted">{{ 'API key allows integration with external applications. You will need this key for authentication.'|trans }}</p>
                <p class="text-muted">{{ 'External application can control every aspect of FOSSBilling using this API key.'|trans }}</p>
                <p class="text-muted">{{ 'Warning! Resetting the key will break existing applications using it.'|trans }}</p>

                <form method="post" action="{{ 'api/admin/profile/generate_api_key'|link }}" class="api-form" data-api-jsonp="onAfterKeyUpdate">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'API Key'|trans }}</label>
                        <div class="col">
                            <input class="form-control" id="apikey" type="text" value="{{ admin.profile_get.api_token }}">
                        </div>
                    </div>

                    <input type="submit" value="{{ 'Generate new key'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-gravatar" role="tabpanel">
            <div class="card-body text-center">
                <div>
                    <span class="avatar avatar-xl mb-3 avatar-rounded" style="background-image: url({{ profile.email|gravatar }}&size=112)"></span>
                </div>
                <p>{{ 'Change your avatar at'|trans }} <a href="https://gravatar.com/" target="_blank">gravatar.com</a>.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    function onAfterKeyUpdate(result) {
        API.admin.post('profile/get', {}, function(result) {
            $('#apikey').val(result.api_token);
            FOSSBilling.message("{{ 'New API key generated. Applications using old key are now not working.'|trans }}");
        })
    }
</script>
{% endblock %}
