{$_user_me = $wa->user()}
{$_load_resources = empty($deal_id)}

<div class="c-log-section" id="c-log-section">

    {if $_load_resources}
        {* UI *}
        <link href="{$wa_app_static_url}js/jquery/jquery-ui.css?v={$wa->version()}" rel="stylesheet">
        <script src="{$wa_app_static_url}js/jquery/jquery-ui.min.js?v={$wa->version()}"></script>
        {$_locale_string = $wa->locale()}

        {* TIMEPICKER *}
        <script src="{$wa_app_static_url}js/timepicker/jquery.timepicker.min.js?v={$wa->version(true)}"></script>
        <link href="{$wa_app_static_url}js/timepicker/jquery.timepicker.css?v={$wa->version()}" rel="stylesheet">

        {* Redactor *}
        <link href="{$wa_url}wa-content/js/redactor/2/redactor.css?v{$wa->version(true)}" rel="stylesheet">

        {* LOCALES *}
        {$_locale_string = substr($wa->locale(), 0, 2)}
        {if $_locale_string != 'en'}
            <script src="{$wa_app_static_url}js/jquery/i18n/datepicker-{$_locale_string}.js"></script>
        {/if}

        {* D3 *}
        <script src="{$wa_url}wa-content/js/d3/d3.min.js"></script>

        {* CRMDialog & sendEmailDialog *}
        <link href="{$wa_app_static_url}js/crmDialog/crmDialog.css?v={$wa->version()}" rel="stylesheet">
        <script src="{$wa_app_static_url}js/crmDialog/crmDialog.js?v={$wa->version()}"></script>
        <script src="{$wa_app_static_url}js/message/message.sendEmailDialog.js?v={$wa->version()}"></script>

        {* CRM Object & related *}
        <script src="{$wa_url}wa-content/js/jquery-plugins/jquery.store.js?v={$wa->version()}"></script>
        <script src="{$wa_url}wa-content/js/redactor/2/redactor.min.js?v={$wa->version()}"></script>
        <script src="{$wa_app_static_url}js/crm.js?v={$wa->version()}"></script>
        {if $_locale_string != 'en'}
            <script src="{$wa_url}wa-content/js/redactor/2/{$_locale_string}.js?v{$wa->version()}"></script>
        {/if}

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

        {* CRM CORE *}
        <script>
            (function($) {
                {* lang for wysiwyg *}
                $.crm.lang = {$_locale_string|json_encode};
                {* need for redirects or url generation *}
                $.crm.app_url = {$wa_app_url|json_encode};
            })(jQuery);
        </script>
    {/if}

    {* PAGE *}
    <link rel="stylesheet" href="{$wa_app_static_url}css-legacy/log.css?v={$wa->version()}">
    <script src="{$wa_app_static_url}js-legacy/log.js?v={$wa->version()}"></script>
    <script src="{$wa_app_static_url}js-legacy/reminder.form.edit.js?v={$wa->version()}"></script>

    {* LIST *}
    <section class="c-reminders-section js-reminders-section">
        <div class="c-add-form-wrapper" id="c-add-reminder-form">
            <form>
                <div class="c-layout">
                    <div class="c-column middle c-icon-column">
                        <i class="icon16 c-plus"></i>
                    </div>
                    <div class="c-column">
                        <textarea class="js-textarea" name="data[content]" placeholder="[`Add reminder`]" required></textarea>
                    </div>
                </div>

                <div class="c-hidden-form">
                    <div class="c-layout">
                        <div class="c-column">

                            <ul class="menu-h dropdown c-reminder-type-toggle js-reminder-type-toggle">
                                {$_reminder_types = crmConfig::getReminderType()}
                                {$_active_reminder_type = $_reminder_types["OTHER"]}
                                <li>
                                    <a class="inline-link c-visible-link with-icon js-visible-link" href="javascript:void(0);">
                                        <b>
                                            <i>
                                                <span class="js-text">
                                                    {if !empty($_active_reminder_type.icon)}
                                                        <i class="icon16 {$_active_reminder_type.icon}"></i>
                                                    {/if}
                                                    {$_active_reminder_type.name|escape}
                                                </span>
                                            </i>
                                        </b>
                                        <i class="icon10 darr"></i>
                                    </a>
                                    <ul class="menu-v with-icons">
                                        {foreach $_reminder_types as $_type}
                                            <li class="{if $_type.id === $_active_reminder_type.id}selected{/if}">
                                                <a href="javascript:void(0);" data-type-id="{$_type.id}">
                                                    {if !empty($_type.icon)}
                                                        <i class="icon16 {$_type.icon}"></i>
                                                    {else}
                                                        <i class="icon16" style="visibility: hidden;"></i>
                                                    {/if}
                                                    {$_type.name|escape}
                                                </a>
                                            </li>
                                        {/foreach}
                                    </ul>
                                    <input class="js-field" name="data[type]" type="hidden" value="{$_active_reminder_type.id}">
                                </li>
                            </ul>

                            {* DATE *}
                            {strip}
                            <span class="c-date">
                                <input class="c-datepicker js-datepicker" type="text" value="" placeholder="[`Date`]">
                                <i class="icon16 calendar"></i>
                                <input name="data[due_date]" type="hidden" value="">
                            </span>
                            {/strip}

                            {* TIME *}
                            <span class="c-time-toggle js-time-toggle">
                                <span class="c-visible">
                                    <a class="inline-link js-show-time hint" href="javascript:void(0);"><b><i>[`set time`]</i></b></a>
                                </span>
                                <span class="c-hidden">
                                    <input class="c-timepicker js-timepicker" data-time-format="H:i" name="data[due_time]" placeholder="[`Time`]">
                                    <a class="inline-link js-reset-time hint" href="javascript:void(0);"><b><i>[`clear time`]</i></b></a>
                                </span>
                            </span>

                        </div>
                        <div class="c-column right">

                            {* USER *}
                            <div class="c-contact-wrapper js-contact-wrapper">
                                <div class="c-contact js-user">
                                    {$_me = $wa->user()}
                                    {$_userpic = $_me->getPhoto(16)}
                                    {if !empty($_userpic)}
                                        <i class="icon16 userpic20" style="background-image: url({$_userpic});"></i>
                                    {/if}
                                    <span class="c-name">{$_me.name|escape}</span>
                                    <a class="inline-link js-show-combobox" href="javascript:void(0);"><b><i>[`Assign another user`]</i></b></a>
                                </div>
                                <div class="c-combobox">
                                    <input class="js-autocomplete" type="text" value="" placeholder="[`Choose a user`]">
                                    <a class="inline-link js-hide-combobox" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                                </div>
                                <input class="js-field" type="hidden" name="data[user_contact_id]" value="{$_me.id}">
                            </div>

                        </div>
                    </div>

                    <div class="line">
                        <input class="button green" type="submit" value="[`Save`]">
                        <span>[`or`]</span>
                        <a class="inline-link js-cancel" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                    </div>
                </div>
                {if !empty($_user_me.id)}
                    <input type="hidden" name="data[user_id]" value="{$_user_me.id}">
                {/if}
                {if !empty($contact.id)}
                    <input type="hidden" name="data[contact_id]" value="{$contact.id}">
                {elseif !empty($deal_id)}
                    <input type="hidden" name="data[deal_id]" value="{$deal_id}">
                {/if}
            </form>
        </div>

        {if !empty($reminders)}
            {$_reminder_types = crmConfig::getReminderType()}

            <ul class="c-reminders-list">
                {foreach $reminders as $_reminder}
                    {if $_reminder.complete_datetime}{continue}{/if}

                    {if !empty($users[$_reminder.user_contact_id])}
                        {$_user = $users[$_reminder.user_contact_id]}
                        {$_userpic = $_user->getPhoto(16)}
                    {else}
                        {$_userpic = null}
                    {/if}

                    {if !empty($_reminder.type) && !empty($_reminder_types[$_reminder.type])}
                        {$_active_reminder_type = $_reminder_types[$_reminder.type]}
                    {/if}

                    <li class="c-reminder-wrapper {$_reminder.state|default:""}" data-id="{$_reminder.id}">
                        {capture assign=_header}
                            {if $_reminder.type !== "OTHER" && !empty($_active_reminder_type)}
                                {if !empty($_active_reminder_type.icon)}<i class="icon16 {$_active_reminder_type.icon}"></i>{/if}
                                <span class="c-reminder-type">{$_active_reminder_type.name|escape}</span>
                            {/if}

                            {if $_reminder.contact_id < 0 && isset($deals[abs($_reminder.contact_id)]) && empty($deal)}
                                <a href="{$wa_app_url}deal/{abs($_reminder.contact_id)}/">
                                    {$deals[abs($_reminder.contact_id)].name|escape}
                                </a>
                            {/if}
                        {/capture}

                        {* VIEW *}
                        <div class="c-step is-view is-shown">
                            {if !empty($_reminder.rights)}
                                <span class="c-marker c-mark-done js-mark-done" title="[`mark as done`]"></span>
                            {else}
                                <span class="c-marker"></span>
                            {/if}

                            {if !empty($_header) && trim($_header)}<header class="c-header">{$_header}</header>{/if}

                            <div class="c-content">
                                {if !empty($_reminder.rights)}
                                    <div class="c-quick-content-toggle-wrapper js-quick-content-toggle-wrapper">
                                        <form>
                                            <textarea class="c-text-field js-textarea" name="data[content]" data-text="{$_reminder.content|escape}">{$_reminder.content|escape}</textarea>
                                            <input name="data[id]" type="hidden" value="{$_reminder.id}">
                                            <input name="data[contact_id]" type="hidden" value="{$_reminder.contact_id}">
                                            <input name="data[user_contact_id]" type="hidden" value="{$_reminder.user_contact_id}">
                                            <input name="data[due_date]" type="hidden" value="{$_reminder.due_date}">
                                            {if !empty($_reminder.due_datetime)}
                                                {$_time = waDateTime::format('H:i', $_reminder.due_datetime)}
                                                <input name="data[due_time]" type="hidden" value="{$_time}">
                                            {/if}
                                            {if !empty($_reminder.deal_id)}
                                                <input name="data[deal_id]" type="hidden" value="{$_reminder.deal_id}">
                                            {/if}
                                        </form>
                                    </div>
                                {else}
                                    <span class="js-text">{$_reminder.content|escape|nl2br}</span>
                                {/if}
                            </div>

                            <footer class="c-footer">
                                <div class="c-layout">
                                    <div class="c-column">
                                        {if !empty($_reminder.rights)}
                                            <div class="c-quick-date-toggle-wrapper js-quick-date-toggle-wrapper">
                                                <div class="c-visible">
                                                    <span class="c-date-text c-change-date hint js-change-date">
                                                        {if $_reminder.due_datetime}
                                                            {waDateTime::format('humandatetime', $_reminder.due_datetime)}
                                                        {else}
                                                            {waDateTime::format('humandate', $_reminder.due_date)}
                                                        {/if}
                                                    </span>
                                                </div>
                                                <div class="c-hidden">
                                                    <form action="">
                                                        {* DATE *}
                                                        {strip}
                                                            <span class="c-date-wrapper">
                                                                <input class="c-datepicker js-date-field" type="text" value="{$_reminder.due_date|wa_date}" placeholder="[`Date`]" required>
                                                                <i class="icon16 calendar"></i>
                                                                <input class="js-alt-date-field" name="data[due_date]" type="hidden" value="{$_reminder.due_date}">
                                                            </span>
                                                        {/strip}

                                                        {* TIME *}
                                                        {$_time = false}
                                                        {if !empty($_reminder.due_datetime)}
                                                            {$_time = waDateTime::format('H:i', $_reminder.due_datetime)}
                                                        {/if}

                                                        <span class="c-time-toggle js-time-toggle {if !empty($_time)}is-active{/if}">
                                                            <span class="c-visible">
                                                                <a class="inline-link js-show-time hint" href="javascript:void(0);"><b><i>[`set time`]</i></b></a>
                                                            </span>
                                                            <span class="c-hidden">
                                                                <input class="c-timepicker js-timepicker" data-time-format="H:i" name="data[due_time]" type="text" value="{if !empty($_time)}{$_time}{/if}" placeholder="[`Time`]">
                                                                <a class="inline-link js-reset-time hint" href="javascript:void(0);"><b><i>[`clear time`]</i></b></a>
                                                            </span>
                                                        </span>

                                                        <span class="c-date-actions">
                                                            <i class="icon16 disk js-save-date"></i>
                                                            <span style="margin: 0 2px;">[`or`]</span>
                                                            <a class="inline-link js-cancel-edit-date" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                                                        </span>

                                                        <input name="data[id]" type="hidden" value="{$_reminder.id}">
                                                        <input name="data[contact_id]" type="hidden" value="{$_reminder.contact_id}">
                                                        <input name="data[user_contact_id]" type="hidden" value="{$_reminder.user_contact_id}">
                                                        <input name="data[content]" type="hidden" value="{$_reminder.content|escape}">
                                                        {if !empty($_reminder.deal_id)}
                                                            <input name="data[deal_id]" type="hidden" value="{$_reminder.deal_id}">
                                                        {/if}
                                                    </form>
                                                </div>
                                            </div>
                                        {else}
                                            <span class="c-date-text hint">
                                                {if $_reminder.due_datetime}
                                                    {waDateTime::format('humandatetime', $_reminder.due_datetime)}
                                                {else}
                                                    {waDateTime::format('humandate', $_reminder.due_date)}
                                                {/if}
                                            </span>
                                        {/if}
                                    </div>
                                    <div class="c-column right">

                                        <span class="c-create-date hint">[`Created at`]: {$_reminder.create_datetime|wa_date:"d.m.Y H:i"}</span>

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

                            <div class="c-right-actions">
                                {if !empty($_reminder.rights)}
                                    <a class="inline-link js-edit-reminder c-hidden" href="javascript:void(0);"><b><i>[`edit`]</i></b></a>
                                {/if}
                                {if !empty($_userpic)}
                                    <a href="{$wa_app_url}contact/{$_user.id}/" class="c-user">
                                        <i class="icon16 userpic20" style="background-image: url({$_userpic});" title="{$_user.name|escape}"></i>
                                    </a>
                                {/if}
                            </div>
                        </div>

                        {* EDIT *}
                        <div class="c-step is-edit">
                            {$_reminder_user = ifset($users[$_reminder.user_contact_id], false)}
                            {if !empty($_reminder_user)}
                                {include file="../reminder/ReminderFormEdit.inc.html" _user=$_reminder_user _reminder=$_reminder inline}
                            {/if}
                        </div>

                        {* CONFIRM *}
                        <div class="c-step is-confirm">
                            <p>[`Are you sure?`]</p>
                            <div class="c-actions">
                                <input class="button red js-confirm-delete" type="button" value="[`Delete`]">
                                [`or`]
                                <a class="inline-link js-confirm-cancel" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                            </div>
                        </div>
                    </li>
                {/foreach}
            </ul>
        {/if}
    </section>

    {* NOTE FORM *}
    <section class="c-note-section" id="c-note-section">
        <span class="c-activity-point" style="background: {$_activity_item.app.sash_color|default: "#aaa"};"></span>
        <div class="c-form-wrapper">
            <form>
                <textarea name="data[content]" cols="" rows="" placeholder="[`Add note`]"></textarea>

                {* FILE *}
                <div class="c-files-wrapper js-files-wrapper">
                    <div class="c-drop-wrapper js-drop-area">
                        <div class="js-drop-text" data-default="[`Attach file`]" data-hover="[`Drop file here`]">[`Attach file`]</div>
                        <input class="c-drop-field js-drop-field" type="file" multiple>
                    </div>

                    <div class="c-upload-list">
                        <div class="c-upload-item is-template">
                            <span class="c-name js-name"></span>
                            <span class="c-progress-wrapper">
                                        <span class="c-progress">
                                            <span class="c-bar js-bar" style="width: 0;"></span>
                                        </span>
                                    </span>
                            <span class="c-status js-status" data-success="[`File successful added`]"></span>
                            <a class="inline-link js-file-delete" href="javascript:void(0);"><i class="icon16 delete"></i><b><i>[`delete`]</i></b></a>
                        </div>
                    </div>
                </div>

                {if !empty($contact)}
                    <input name="data[contact_id]" value="{$contact.id}" type="hidden">
                {elseif !empty($deal_id)}
                    <input name="data[deal_id]" value="{$deal_id}" type="hidden">
                {/if}

                <div class="c-actions">
                    <div class="c-layout inline">
                        <div class="c-column middle">
                            <input class="button green js-submit" type="submit" value="[`Send to timeline`]">
                        </div>
                        <div class="c-column middle">
                            <div class="c-status-wrapper js-status-wrapper"></div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </section>

    {* FILTER *}
    <div class="c-filters-section">
        <h3 class="c-section-title">[`Live Stream`]</h3>

        {if !empty($filters)}
            {$_title = "<b><i>[`Filter`]</i></b>"}
            {$_title_icons = []}
            {foreach $filters as $_filter}
                {if !empty($_filter.is_active)}
                    {capture append="_title_icons"}
                        <i class="icon16 color" style="background: {$_filter.color|default:"transparent"};"></i>
                    {/capture}
                {/if}
            {/foreach}
            {if !empty($_title_icons) && count($_title_icons) < count($filters)}
                {$_title = $_title_icons|join:""}
            {/if}

            <div class="c-toggle-wrapper">
                <div class="c-visible">
                    <a href="javascript:void(0);" class="inline-link">{$_title}&nbsp;<i class="icon10 darr"></i></a>
                </div>
                <div class="c-hidden">
                    {$_active_filter_count = 0}

                    <form id="c-filters-form">
                        <div class="c-filters-wrapper">
                            <ul class="menu-v c-filters-list">
                                {foreach $filters as $_filter}
                                    {if !empty($_filter.is_active)}{$_active_filter_count = $_active_filter_count + 1}{/if}

                                    <li>
                                        <label class="c-filter js-filter {if !empty($_filter.is_active)}is-active{/if}" data-filter-id="">
                                            <input class="c-field js-field" type="checkbox" name="filters[{$_filter.id}]" {if !empty($_filter.is_active)}checked{/if}>
                                            <i class="icon16 color" style="background: {$_filter.color|default:"transparent"};"></i>
                                            <a class="c-name js-set-force-filter inline-link" href="javascript:void(0);"><b><i>{$_filter.name|escape}</i></b></a>
                                        </label>
                                    </li>
                                {/foreach}
                            </ul>

                            {$_is_filter_set = true}
                            {if $filters|count == $_active_filter_count || $_active_filter_count === 0}
                                {$_is_filter_set = false}
                            {/if}

                            <div class="c-actions js-actions">
                                <div class="js-apply-wrapper" style="display: none; margin: 0 0 10px;">
                                    <input class="button gray js-apply-filters" type="button" value="[`Apply`]">
                                    <span style="margin: 0 4px;">[`or`]</span>
                                    <a href="javascript:void(0);" class="inline-link js-cancel-filters"><b><i>[`cancel`]</i></b></a>
                                </div>
                                {if !empty($_is_filter_set)}
                                    <a class="inline-link js-reset-filters" href="javascript:void(0);" style=""><b><i>[`Show all`]</i></b></a>
                                {/if}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        {/if}
    </div>

    {* TIMELINE *}
    {include file="./LogTimeline.html" inline}

    <script>
        ( function($) {
            new CRMLog({
                $wrapper: $("#c-log-section"),
                app_url: "{$wa_backend_url}crm/",
                user_id: {if !empty($_user_me.id)}{$_user_me.id}{else}false{/if},
                contact_id: {if !empty($contact.id)}{$contact.id}{else}false{/if},
                deal_id: {if !empty($deal_id)}{$deal_id}{else}false{/if},
                max_upload_size: {waRequest::getUploadMaxFilesize()},
                locales: {
                    bad_date: "[`Bad datetime`]",
                    empty: "[`Required field is empty`]",
                    file_size: "[`File is too large or another upload error occurred.`]"
                }
            });
        })(jQuery);
    </script>
</div>