{if $wa->request('standalone')}

    {* this js and css are dependencies and this action could be used by other apps *}

    {wa_js file="js/compiled/contact-info-standalone.js"}
        {$static_url}js/fieldTypes.js
        {$static_url}js/wa.contactEditor.js
    {/wa_js}

    <link rel="stylesheet" type="text/css" href="{$static_url}css/contacts.css" />
    <link rel="stylesheet" type="text/css" href="{$static_url}css/contacts.ie7.css" />
    <link rel="stylesheet" type="text/css" href="{$static_url}css/contacts.ie8.css" />
    <script type="text/javascript" src="{$wa_app_url}?action=loc&v={$wa->version()}"></script>

    {$wa->js(false)}

    {* @event backend_assets.%plugin_id% *}
    {foreach $backend_assets as $item}
        {$item}
    {/foreach}

{/if}

<div class="contacts-background" id="c-info-container">

    <div class="block padded c-core-header" style="display:none">
        <a href="javascript:void(0)" id="c-e-last-view" class="no-underline"></a>
        {if $last_view_context|default:false}
            <div class="paging float-right nowrap">
                {if $last_view_context.prev}
                    <a class="hidden prev contact" href="#/contact/{$last_view_context.prev}/" style="display: inline;" data-offset="{max($last_view_context.offset - 1, 0)}"><i class="icon10 larr"></i> [`prev`]</a>
                {else}
                    <span class="gray"><i class="icon10 larr"></i> [`prev`]</span>
                {/if}
                <span class="custom hint">
                    <span class="index-current">{$last_view_context.offset + 1}</span>
                    [`of`]
                    <span class="index-total">{$last_view_context.total_count}</span>
                </span>
                {if $last_view_context.next}
                    <a class="hidden next contact" href="#/contact/{$last_view_context.next}/" style="display: inline;" data-offset="{min($last_view_context.offset + 1, $last_view_context.total_count)}">[`next`] <i class="icon10 rarr"></i></a>
                {else}
                    <span class="gray">[`next`] <i class="icon10 rarr"></i></span>
                {/if}
            </div>
        {/if}

    </div>

    {if $exists}

        <!-- content -->
        <div class="block not-padded c-core-content">
            <div class="block">
                {* This block is used to confirm deletion *}
                <div id="contact-top-block" class="wa-box" style="display:none"></div>

                <div class="profile image96px" style="min-height: 120px">
                    {* Photo and a link to change it. *}
                    <div class="photo image">
                        <img src="{$contact->getPhoto()}" alt="{if $contact.photo}[`Photo`]{else}[`No photo`]{/if}" class="userpic" />
                        {if empty($readonly) && !$wa->request('readonly')}
                            <div class="wa-contact-photo-buttons">
                                <div class="photo-change-link">
                                    <a href="{ifset($photo_editor_url, $wa_app_url|cat:"#/contact/photo/{$contact->getId()}")}">[`Change photo`]</a>
                                </div>
                            </div>
                        {/if}

                        <!-- plugin hook: 'backend_contact_info.photo' -->
                        {* @event backend_customer.%plugin_id%.photo *}
                        {if !empty($backend_contact_info)}
                            {foreach $backend_contact_info as $_}{ifset($_.photo)}{/foreach}
                        {/if}

                    </div>
                    <div class="details">

                        <!-- plugin hook: 'backend_contact_info.before_header' -->
                        {* @event backend_customer.%plugin_id%.before_header *}
                        {if !empty($backend_contact_info)}
                            {foreach $backend_contact_info as $_}{ifset($_.before_header)}{/foreach}
                        {/if}

                        <div class="details-header" id="contact-fullname">
                            <h1 class="name"><span class="title">{$contact.title|escape}</span> {$contact.firstname|escape} {$contact.middlename|escape} {$contact.lastname|escape}</h1>
                            {if !$contact.is_company}
                                <h1 class="jobtitle-company">
                                    {if $contact.jobtitle}
                                        <span class="title">{$contact.jobtitle|escape}</span>
                                    {/if}
                                    {if $contact.jobtitle && $contact.company}
                                        <span class="at">[`@`]</span>
                                    {/if}
                                    {if $contact.company}
                                        <span class="company">{$contact.company|escape}</span>
                                    {/if}
                                </h1>
                            {/if}

                            <!-- plugin hook: 'backend_contact_info.header' -->
                            {* @event backend_customer.%plugin_id%.header *}
                            {if !empty($backend_contact_info)}
                                {foreach $backend_contact_info as $_}{ifset($_.header)}{/foreach}
                            {/if}

                        </div>

                        <!-- plugin hook: 'backend_contact_info.after_header' -->
                        {* @event backend_customer.%plugin_id%.after_header *}
                        {if !empty($backend_contact_info)}
                            {foreach $backend_contact_info as $_}{ifset($_.after_header)}{/foreach}
                        {/if}

                        <p class="status"></p>

                        <!-- plugin hook: 'backend_contact_info.before_top' -->
                        {* @event backend_customer.%plugin_id%.before_top *}
                        {if !empty($backend_contact_info)}
                            {foreach $backend_contact_info as $_}{ifset($_.before_top)}{/foreach}
                        {/if}

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

                        <!-- plugin hook: 'backend_contact_info.after_top' -->
                        {* @event backend_customer.%plugin_id%.after_top *}
                        {if !empty($backend_contact_info)}
                            {foreach $backend_contact_info as $_}{ifset($_.after_top)}{/foreach}
                        {/if}

                    </div>
                </div>
            </div>

            {* Tab controls *}
            <ul class="tabs" id="c-info-tabs">
                <li id="t-contact" class="selected"><a href="javascript:void(0)">[`Contact`]</a></li>

                {* User tab *}
                {if !$contact['is_company'] && ($superadmin || !empty($own_profile))}
                    <li id="t-user">
                        <a href="javascript:void(0)">
                            {contactsHelper::getAccessTabTitle($contact)}
                        </a>
                    </li>
                {/if}
            </ul>

            {* Contact tab content *}
            <div class="block not-padded tab-contents-wrapper">
                <div id="tc-contact" class="tab-content">
                    <div class="block double-padded">
                        {if ($own_profile || empty($readonly)) && !$wa->request('readonly')}
                            <a class="float-right no-underline c-edit-contact" href="javascript:void(0);" id="edit-contact-double">
                                <i class="icon16 edit"></i>[`Edit`]
                            </a>
                        {/if}
                        <div class="fields">
                            <div id="contact-info-block">
                                <!-- Contents generated by JS later -->
                            </div>

                            {* Not editable info block *}
                            {if empty($limited_own_profile)}
                                <ul class="hint c-create-method-info">
                                    <li>[`ID`]: {$contact.id}</li>
                                    <li>[`Added`]: {if !empty($author)}{$author.name|escape} {/if}{$contact_create_time}</li>
                                    <li>[`Method`]: {if $contact.create_method}{$contact.create_method} ({$contact.create_app_id}){else}{$contact.create_app_id}{/if}</li>
                                </ul>
                            {/if}
                        </div>
                        {if empty($readonly) && !$wa->request('readonly') && empty($own_profile) && !$wa->request('no_delete')}
                            <div style="width: 100%; float: left;" id="c-delete-contact-wrapper">
                                <a href="javascript:void(0);" class="float-right no-underline small delete" id="delete-contact">[`Delete contact`]</a>
                            </div>
                        {/if}
                        <div class="clear-left"></div>
                    </div>
                </div>

                {* User tab content *}
                {if !$contact['is_company'] && ($superadmin || !empty($own_profile))}
                    <div id="tc-user" class="tab-content hidden">
                        <div class="block double-padded">
                            {include file="templates/actions/contacts/ContactsUser.html"}
                        </div>
                    </div>
                {/if}

                {* Tabs from other applications  *}

                {if !empty($links) && $wa_view->templateExists("templates/actions/contacts/ContactsInfoTabs.html")}
                    {include file="templates/actions/contacts/ContactsInfoTabs.html"}
                {/if}
            </div>

            <div class="clear-left"></div>
        </div>{* div.block.not-padded.c-core-content *}

    {else}

        <div class="block" style="text-align: center;">
            <h2 style="margin-top: 50px;">[`Contact not found`] (Contact ID={$contact.id})</h2>
            <div class="clear-left"></div>
        </div>

    {/if}

</div>{* div.contacts-background *}

{if $exists}

    <script type="text/javascript">

        if (!$.storage) {
            $.storage = new $.store();
        }

        // 'Back to' link
        {if !$wa->request('no_backlink')}
        if($.wa.controller.lastView && $.wa.controller.lastView.title) {
            $('#c-e-last-view')
                .text($.wa.controller.lastView.title)
                .prepend('<i class="icon10 larr"></i>')
                .attr('href', $.wa.controller.lastView.hash || '#/')
                .parent()
                .show();
        }
        {/if}
        var edit_mode = window.location.hash.indexOf('/contact/edit') >= 0;
        var delete_mode = !edit_mode && window.location.hash.indexOf('/contact/delete') >= 0;

        // attach tab controls to tabs
        (function() {
            var wrapper = $('#c-info-tabs');

            // Drag-and-drop tabs, saving their position to local browser storage
            wrapper.sortable({
                items: 'li',
                tolerance: "pointer",
                distance: 7,
                delay: 50,
                update: function(event, ui) {
                    $.storage.set('contacts/tab_order', wrapper.children().map(function(i, el) {
                        return el.id;
                    }).toArray());
                }
            });

            // Restore tabs order
            var old_tabs_order = $.storage.get('contacts/tab_order');
            if (old_tabs_order) {
                var children = {};
                wrapper.children().detach().each(function(i, el) {
                    children[el.id] = el;
                });

                $.each(old_tabs_order, function(i, id) {
                    if (children[id]) {
                        wrapper.append(children[id]);
                        delete children[id];
                    }
                });
                $.each(children, function(i, el) {
                    wrapper.append(el);
                });
            }

            // Switch to tab when user clicks on it
            {if !$wa->request('no_switchtab')}
                // !!! TODO: use delegation instead?..
                wrapper.children().each(function(k, tab) {
                    tab = $(tab);
                    tab.bind('click.switch_tab', function() {
                        $.wa.contactEditor.switchToTab(tab, function() {
                            var id = tab.attr('id').substr(2);
                            var hash = '#/contact/{$contact.id}/';
                            if (id != 'contact' || tab.prev().length) {
                                hash += id+'/';
                            }
                            hash = $.wa.controller.cleanHash(hash);
                            if (hash != $.wa.controller.cleanHash()) {
                                $.wa.controller.stopDispatch(1);
                                $.wa.setHash(hash);
                            }
                            var input = $('#tc-'+id+' input:visible')[0];
                            if (input) {
                                input.focus();
                            }
                        });
                    });
                });
            {else}
                $('#c-info-tabs li').bind('click.switch_tab', function() {
                    $.wa.contactEditor.switchToTab($(this));
                });
            {/if}

            {if $tab}
                // Switch to active tab
                $('#t-{$tab}').click();
            {else}
                // Open first tab
                wrapper.children(':first').click();
            {/if}

        })();

        {if !empty($limited_own_profile)}
            $.wa.contactEditor.wa_app_url = '';
        {else}
            $.wa.contactEditor.wa_app_url = '{$wa_app_url}';
        {/if}
        $.wa.contactEditor.update_title = {if !$wa->request('no_update_title')}true{else}false{/if};
        $.wa.contactEditor.wa_backend_url = '{$wa_backend_url}';
        $.wa.contactEditor.contact_id = {$contact.id};
        $.wa.contactEditor.current_user_id = {$current_user_id};
        $.wa.contactEditor.contactType = '{if $contact.is_company}company{else}person{/if}';
        {* $.wa.contactEditor.limitedCategories = {$limitedCategories}; *}
        $.wa.contactEditor.justCreated = false;
        {if !empty($save_url)}
            $.wa.contactEditor.saveUrl = "{$save_url}";
        {/if}
        {if !empty($save_geocoords_url)}
            $.wa.contactEditor.saveGeocoordsUrl = "{$save_geocoords_url}";
        {/if}
        {if !empty($password_save_url)}
            $.wa.contactEditor.passwdSaveUrl = "{$password_save_url}";
        {/if}
        {if !empty($regions_url)}
            $.wa.contactEditor.regionsUrl = "{$regions_url}";
        {/if}

        $.wa.contactEditor.initFactories({json_encode($contactFields)}, {json_encode($contactFieldsOrder)});
        $.wa.contactEditor.initAllEditors();
        $.wa.contactEditor.initFieldEditors({json_encode($fieldValues)});
        $.wa.contactEditor.initContactInfoBlock('view');

        {if ($own_profile || empty($readonly)) && !$wa->request('readonly')}
            // Edit button onclick
            $('.c-edit-contact').click(function() {
                $.wa.contactEditor.switchToTab('contact');
                $.wa.contactEditor.switchMode('edit');
                return false;
            });
            if (edit_mode) {
                $.wa.contactEditor.switchMode('edit');
            }

            {if empty($own_profile)}
                // AJAX checking dialog before user deletion
                $("#delete-contact").click(function () {
                    $.wa.controller.contactsDelete([{$contact.id}]);
                    return false;
                });
                if (delete_mode) {
                    $.wa.controller.contactsDelete([{$contact.id}]);
                }
            {/if}

        {/if}

        {if !$wa->request('standalone') && !empty($history)}
            // Update history
            $.wa.history.updateHistory({json_encode($history)});
        {/if}

        var paging = $('.c-core-header .paging');
        $(document).unbind('keyup').bind('keyup', function(e) {
            if ((e.ctrlKey || e.metaKey) && !(e.altKey || e.shiftKey)) {
                var a = null;
                if (e.which == 37) { // left arrow
                    a = paging.find('.prev');
                } else if (e.which == 39) { // right arrow
                    a = paging.find('.next');
                }
                if (a && a.is(':visible')) {
                    $.wa.controller.lastView.offset = a.data('offset') || 0;
                    window.location.hash = a.attr('href');
                }
            }
        });

        {if empty($readonly) && !$wa->request('readonly') && empty($own_profile) && !$wa->request('no_delete')}
            var info_block = $('#contact-info-block');
            var bottom_offset = info_block.offset().top + info_block.height();
            var wrapper = $('#c-delete-contact-wrapper');
            var offset = wrapper.offset().top;
            wrapper.css('margin-top', (bottom_offset - offset) + 30);
        {/if}

    </script>

{/if}