{*
 * System profile editor for own contact.
 * ?module=profile
 *}
<div class="t-profile-page">
    <div class="t-profile block double-padded">
        <div class="profile image144px">
            <div class="image">
                <img src="{$user->getPhoto2x(96)}" class="userpic t-userpic">
                <div class="wa-contact-photo-buttons">
                    <div class="photo-change-link">
                        <a href="javascript:void(0)">[`Change photo`]</a>
                    </div>
                </div>
            </div>
            <div class="details">
                <h1>
                    <span class="title">{$user.title|escape}</span>
                    <span class="contact-name">{waContactNameField::formatName($user, true)|escape}</span>
                    <span class="hint">@{$user.login|escape}</span>
                </h1>
                {if !$user.is_company}
                    <p class="jobtitle-company">
                        {if $user.jobtitle}
                            <span class="title">{$user.jobtitle|escape}</span>
                        {/if}
                        {if $user.jobtitle && $user.company}
                            <span class="at">[`@`]</span>
                        {/if}
                        {if $user.company}
                            <span class="company">{$user.company|escape}</span>
                        {/if}
                    </p>
                {/if}

                <ul class="menu-v compact" id="contact-info-top">
                    {foreach $top as $top_field}
                        <li class="top-field-{$top_field.id}">{if $top_field.id != 'im'}{if $top_field.icon}<i class="icon16 {$top_field.id}"></i>{/if}{/if}{$top_field.value}</li>
                    {/foreach}
                </ul>
            </div>
        </div>
    </div>

    {$wa->contactProfileTabs($user.id)}

</div>

<script>jQuery(function($){ "use strict";

    var $contact_info_top = $('#contact-info-top');
    var $wrapper = $contact_info_top.closest('.t-profile-page');

    // When data in Contact Info tab is saved, update the block above calendar
    var $profile_tabs_iframes = $wrapper.find('.t-profile-tabs-iframes');
    $profile_tabs_iframes.on('contact_saved', function(evt, data) {
        // Name, title, company, job title
        var $h1 = $wrapper.find('.profile .details h1').first();
        $h1.children('.contact-name:first').text(data.name);
        $h1.children('.title:first').text(data.title);

        var $work = $h1.closest('.details').find('.jobtitle-company');
        $work.children('.company').text(data.company);
        $work.children('.title').text(data.jobtitle);
    });
    $profile_tabs_iframes.on('top_fields_updated', function(evt, top) {
        // common fields like email, phone and im
        var html = '';
        for (var j = 0; j < top.length; j++) {
            var f = top[j];
            var icon = f.id != 'im' ? (f.icon ? '<i class="icon16 ' + f.id + '"></i>' : '') : '';
            html += '<li>' + icon + f.value + '</li>';
        }
        $contact_info_top.html(html);
    });


    $.wa.loadFiles({
        "{$wa_url}wa-content/js/jquery-wa/wa.dialog.js?{$wa->version(true)}": typeof $.fn.waDialog !== 'function'
    }).then(function(){

        // When photo editor dialog changes something, update the contact photo
        $wrapper.on('photo_updated photo_deleted', function(evt, data) {
            $wrapper.find('.t-userpic').attr('src', data.url);
        });

        // Open photo editor when user clicks on "Change photo" link
        $wrapper.find('.photo-change-link a').click(function() {
            $('#contact-photo-crop-dialog').remove();
            $('<div id="contact-photo-crop-dialog">').appendTo($wrapper).waDialog({
                'class': 'large',
                url: "?module=profile&action=photo",
                onLoad: function(d) {
                    // move buttons where appropriate
                    var $dialog = $(this);
                    $dialog.find('.dialog-buttons-gradient').append($dialog.find('.dialog-content-indent .buttons'));
                }
            });
        });

    });

});</script>