{% extends "/layout/base.html" %}
{% from "/macros/bundle/profile-bundle-heading.html" import bundleHeadCard %}
{% from "/macros/profile/profile-lead-form.html" import LeadModal %}
{% from "/macros/notification.html" import notificationModel %}

{% block dataPage %}profile{% endblock %}
{% block mainRegionClass %}profile-region{% endblock %}

{% block headContent %}
    <div class="js-notification-lead notification-center"></div>
    {{ bundleHeadCard(bundle.summary, bundle.badges, bundle.ribbon, bundle.navigation, bundle.callToActions) }}
{% endblock %}

{% block content %}
    {% block profileContent %}{% endblock %}
    {{ LeadModal(bundle.leads) }}
    {{ notificationModel() }}
    <script src="{{ r('/assets/js/profile-leads.js') }}"></script>
    <script>
        $(".profile_header").fixedHeader({ container: ".profile-region" });
    </script>
    <script>
        $(".js-profile-upgrade-popup").on("click", function(e) {
            e.preventDefault();
            $("body > .profile-upgrade-modal").remove();
            // upgrade popup is tied to it's button
            $(this).closest(".profile-actions").find(".profile-upgrade-modal").clone().modal({
                fadeDuration: 100
            });
        })
        $(".js-profile-lead")
            .profileLeads({
                    endpoint: {{ bundle.leads.form.actionEndpoint | dump | safe }},
                    otherData: {{ bundle.leads.form.otherData | dump | safe }},
                    customFields: {{ bundle.leads.form.schema.custom | dump | safe }},
                    i18n: {{ bundle.leads.i18n | dump | safe }}
                }
            );
    </script>
{% endblock %}