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

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

{% block content %}
{% embed 'partial_admin_detail_tabs.html.twig' with {
    title: profile.name,
    subtitle: 'Manage your staff profile details, update your password, and rotate your API key.'|trans
} %}
    {% block detail_tabs %}
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" href="#tab-profile" data-bs-toggle="tab" role="tab">{{ 'Profile'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-password" data-bs-toggle="tab" role="tab">{{ 'Change Password'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-api" data-bs-toggle="tab" role="tab">API</a>
                    </li>
    {% endblock %}

    {% block detail_tab_content %}
        <div class="tab-pane fade show active" id="tab-profile" role="tabpanel">
            <div class="p-3">
                <form method="post" action="{{ 'profile/update'|api_url }}" {{ fb_api_form({message: 'Profile Updated'|trans}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Profile Details'|trans,
                        subtitle: 'Update the name, email address, and signature shown for your staff account.'|trans
                    } %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Name'|trans }}</label>
                                    <input class="form-control" type="text" name="name" value="{{ profile.name }}" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Email'|trans }}</label>
                                    <input class="form-control" type="text" name="email" value="{{ profile.email }}" required>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ 'Signature'|trans }}</label>
                                    <textarea class="form-control" name="signature" rows="3">{{ profile.signature }}</textarea>
                                </div>
                            </div>
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Update profile'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-password" role="tabpanel">
            <div class="p-3">
                <form method="post" action="{{ 'profile/change_password'|api_url }}" {{ fb_api_form({message: 'Password Changed'|trans}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Change Password'|trans,
                        subtitle: 'Enter your current password and choose a new one for this staff account.'|trans
                    } %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-4">
                                    <label for="current_password" class="form-label">{{ 'Current Password'|trans }}</label>
                                    <input class="form-control" type="password" name="current_password" id="current_password" required>
                                </div>
                                <div class="col-lg-4">
                                    <label for="new_password" class="form-label">{{ 'New Password'|trans }}</label>
                                    <input class="form-control" type="password" name="new_password" id="new_password" required>
                                </div>
                                <div class="col-lg-4">
                                    <label for="confirm_password" class="form-label">{{ 'Confirm Password'|trans }}</label>
                                    <input class="form-control" type="password" name="confirm_password" id="confirm_password" required>
                                </div>
                            </div>
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Change Password'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-api" role="tabpanel">
            <div class="p-3">
                <form method="post" action="{{ 'profile/generate_api_key'|api_url }}" {{ fb_api_form({callback: 'onAfterKeyUpdate'}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'API Key'|trans,
                        subtitle: 'Use this token for external integrations. Rotating it will immediately invalidate existing API clients.'|trans
                    } %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">{{ 'API Key'|trans }}</label>
                                    <input class="form-control" id="apikey" type="text" value="{{ admin.profile_get.api_token }}" readonly>
                                </div>
                            </div>
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Generate New Key'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                </form>
            </div>
        </div>
    {% endblock %}
{% endembed %}
{% endblock %}

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