extends root
    
append styles
    link(rel='stylesheet' href='/public/3pt/css/pikaday.css')
    link(rel='stylesheet' href='/public/css/player.css')
    link(rel='stylesheet' href='/public/css/calls.css')

append scripts
    script.
        let cdr = !{JSON.stringify(cdr)};
        const section = "calls";
    script(src='/public/3pt/js/pikaday.js')
    script(src='/public/3pt/js/dayjs.js')
    script(src='/public/3pt/js/dayjs_cpf.js')
    script(src='/public/js/player.js')
    script(src='/public/js/calls.js')
    script.
        dayjs.extend(window.dayjs_plugin_customParseFormat);




mixin headerColumn(name, text, isSortable, sortId = name)
    .cell(class=['cell_' + name, {'sortable': isSortable}], sort-id=sortId)
        if isSortable
            .cell-clickable-area(sort-id=sortId)
                span.name= text
                .sort-button
                    +icon('down')
        else
            span.name= text


mixin filter(name, text, filterId = name, hasWildcard)
    .filter(class='filter_' + name, filter-id=filterId)
        .wrapper        
            input.value(class='textbox', type='text', placeholder=text, filter-id=filterId)
            if hasWildcard
                .wildcard(class='wildcard_' + name, filter-id=filterId)
                    +icon('wildcard')
            .status(filter-id=filterId)


mixin calltype(name, icon, text, ctId = name)
    .call-type(class='call-type_' + name ct-id=ctId)
        +icon(icon)
        span.description= text
        

mixin setting(name, text)
    +checkbox(text, name)





block subsections
    .subsections
        +subsection('filter', 'Фильтры', '.left-panel .filters')
        .filters(class='hidden')
            .ss-line
            +filter('date-start', 'Начало', 'dateStart')
            +filter('date-end', 'Конец', 'dateEnd')
            +filter('source', 'Кто звонил', 'source', true)
            +filter('destination', 'Кому звонил', 'destination', true)
            +filter('any', 'Любой номер', 'any', true)
            +filter('id', 'Идентификатор')
            .call-types
                +calltype('incoming', 'incoming-call', 'Вход.')
                +calltype('outgoing', 'outgoing-call', 'Исх.')
                +calltype('internal', 'internal-call', 'Внутр.')
                
            .buttons
                +button('ОК', 'apply')
                +button('Сбросить', 'reset')

        +subsection('settings', 'Настройки', '.left-panel .settings')
        .settings(class='hidden')
            .ss-line
            +checkbox('Не группировать по дате', 'grouping')
            +checkbox('Отображать названия у известных номеров', 'call-names')
            +checkbox('Время в секундах', 'time-in-seconds')
            +checkbox('Автоматическое обновление звонков', 'auto-update')
                        
        .new-entries
            .text
                span Новых звонков: 
                span.num 0
            +button('Обновить', 'update')


block data
    .cdr
        .table
            .header
                +headerColumn('id', '№', false, 'id')
                +headerColumn('dailyct', 'ID', false, 'dailyCT')
                +headerColumn('type', 'Тип', true, 'callType')
                +headerColumn('date', 'Дата', true, 'callDate')
                +headerColumn('source', 'Источник', true)
                +headerColumn('destination', 'Назначение', true)
                .cell.cell-group.cell-group_col
                    +headerColumn('duration', 'Длительность', false)
                    .cell.cell-group.cell-group_row
                        +headerColumn('total-duration', 'Всего', true, 'totalDuration')
                        +headerColumn('call-duration', 'Разг.', true, 'callDuration')
                +headerColumn('result', 'Результат', true, 'callResult')
                +headerColumn('records', 'Запись', false)

            .body(data-simplebar)
                .no-cdrs
                    h1.text По заданным фильтрам ничего не было найдено
                    +button('Сбросить все фильтры', 'reset')

        .controls
            +icon('begin', 'button', 'button_begin')
            +icon('left', 'button', 'button_left')
            .status
            input.goto-page(class='textbox', type='number', min=1)            
            +icon('goto', 'button', 'button_goto')         
            +icon('right', 'button', 'button_right')            
            +icon('end', 'button', 'button_end')

block post-body
    include player.pug