{{#main-content}}
<div class="widget-box transparent">
    {{#grid-header dropdownMenu=false clear-search=true}}
        <div class="widget-menu">
            {{#link-to 'customer.list.advanced-query' data-rel="tooltip" title='Advanced Query'}}
                <i class="ace-icon fa fa-database bigger-120"></i>
            {{/link-to}}
            <a href="#" data-rel="tooltip" data-action="settings" data-toggle="dropdown" title="Dropdown">
                <i class="ace-icon fa fa-bars bigger-120"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
                {{#if ajax.user.admin}}
                <li>
                    {{#link-to 'customer.import'}}
                        <i class="ace-icon fa fa-address-card-o bigger-110"></i>
                        Import Customers
                    {{/link-to}}
                </li>
                <li>
                    {{#link-to 'customer-ytd-sale.import'}}
                        <i class="ace-icon fa fa-line-chart bigger-110"></i>
                        Import Sales Data
                    {{/link-to}}
                </li>
                <li>
                    <a href="/customer/export" target="_blank">
                        <i class="ace-icon fa fa-download bigger-110"></i>
                        Export Customers
                    </a>
                </li>
                {{/if}}
                <li>
                    {{#link-to 'customer.list.advanced-query'}}
                        <i class="ace-icon fa fa-database bigger-110"></i>
                        Advanced Query
                    {{/link-to}}
                </li>
            </ul>
        </div>
    {{/grid-header}}

    <div class="widget-body">
        <!-- #section:custom/scrollbar -->
        <div class="widget-main no-padding table-responsive no-border">
            <table class="table table-striped table-bordered table-hover" style="border: 1px solid #ddd;">
                <thead class="thin-border-bottom">
                    <tr>
                        {{!--
                            1 ID  
                            2 Name  
                            3 Sales(3Yrs) 
                            4 Comment 
                            5 Application  
                            6 Status  
                            7 Added  
                            8 Year  
                            9 Country  
                            10 State  
                            11 City  
                            12 MS   
                            13 Region  
                            14 Slspsn 
                        --}}
                        {{#if tableOptions.showId}}
                            {{sortable-th name='id' text='ID'}}
                        {{/if}}
                        {{#if tableOptions.showName}}
                            <th style='min-width: 86px; max-width: 168px;'>Name</th>
                        {{/if}}
                        {{#if tableOptions.showYtdSale}}
                            {{sortable-th name='sumYtdSales' text='Sales(3Yrs)' style='min-width: 126px;'}}
                        {{/if}}
                        {{#if tableOptions.showIssue1}}
                            <th style="min-width: 168px;">
                                {{th-filter name='issue' text='Comment' label='Comment Filter' options=model.issueOptions}}
                            </th>
                        {{/if}}
                        {{#if tableOptions.showIssue2}}
                            <th>Comment 2</th>
                        {{/if}}
                        {{#if tableOptions.showIssue3}}
                            <th>Comment 3</th>
                        {{/if}}
                        {{#if tableOptions.showApplication}}
                            {{#sortable-th name='application' style='min-width: 138px;'}}
                                {{th-filter name='application' 
                                    text='Application' 
                                    label='Application Filter'
                                    options=model.applicationList
                                    value-field='id'
                                    text-field='name'}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showStatus}}
                            {{#sortable-th name='status' style='min-width: 96px;'}}
                                {{th-filter name='status' 
                                    text='Status' 
                                    label='Status Filter' 
                                    options=model.statusList
                                    value-field='id'
                                    text-field='name'}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showDateAdded}}
                            {{#sortable-th name='dateAdded' style='min-width: 96px;'}}
                                {{th-filter name='dateAdded' text='Added' label='Added Filter' options=model.dateAddedList}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showYears}}
                            {{#sortable-th name='year' style='min-width: 86px'}}
                                {{th-filter name='year' text='Year' label='Year Filter' options=model.latestYearList}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showCountryCode}}                            
                            <th>
                                {{th-filter name='countryCode' text='Country' label='Country Filter' options=model.countryCodeList}}
                            </th>
                        {{/if}}
                        {{#if tableOptions.showState}}
                            <th style="min-width: 48px;">
                                {{th-filter name='state' text='State' label='State Filter' options=model.stateList}}
                            </th>
                        {{/if}}
                        {{#if tableOptions.showCity}}
                            <th style="min-width: 48px;">
                                {{th-filter name='city' text='City' label='City Filter' options=model.cityList}}
                            </th>
                        {{/if}}
                        {{#if tableOptions.showMs}}
                            {{#sortable-th name='ms' style='min-width: 74px;'}}
                                {{th-filter name='ms' text='MS' label='MS Filter' options=model.msList}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showRegion}}
                            {{#sortable-th name='region' text='Region' style='min-width: 100px;'}}
                                {{th-filter name='region' text='Region' label='Region Filter' options=model.regionList}}
                            {{/sortable-th}}
                        {{/if}}
                        {{#if tableOptions.showSalesperson}}
                            {{#sortable-th name='salesperson' style='min-width: 100px;'}}
                                {{th-filter name='salesperson' text='Slspsn' label='Salesperson Filter' options=model.salespersonList}}
                            {{/sortable-th}}
                        {{/if}}
                        <th>
                            <i class="ace-icon fa fa-cogs bigger-110 hidden-480"></i>
                            Settings
                        </th>
                    </tr>
                </thead>

                <tbody>
                    {{#each model.data as |it|}}
                    <tr>
                        {{#if tableOptions.showId}}
                        <td>
                            {{#link-to 'customer.show' it.id title='Show Customer'}}
                                {{it.id}}
                            {{/link-to}}
                        </td>
                        {{/if}}
                        {{#if tableOptions.showName}}
                            <td style="white-space: initial;">
                                {{it.name}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showYtdSale}}
                            <td>
                                {{#if it.countYtdSales}}
                                    {{#if it.expand}}
                                    <a style="cursor: pointer;" {{action (route-action 'collapseYtdSales' it)}}>
                                        <i class="ui-icon ace-icon fa fa-minus center blue bigger-110"></i>
                                    </a>
                                    {{else}}
                                    <a style="cursor: pointer;" {{action (route-action 'expandYtdSales' it)}}>
                                        <i class="ui-icon ace-icon fa fa-plus center blue bigger-110"></i>
                                    </a>
                                    {{/if}}
                                {{/if}}
                                {{number-us it.sumYtdSales}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showIssue1}}
                            <td style="max-width: 36px; white-space: initial;">
                                {{#if it.issue1}}
                                    <div style="max-height: 48px; overflow: auto; cursor: pointer;">
                                        {{issue-cell issue=it.issue1.issue}}
                                    </div>
                                    <span class="msg-time">
                                        <i class="ace-icon fa fa-clock-o"></i>
                                        <span style="font-size: 80%;">
                                            {{moment-format (if it.issue1.dateUpdated it.issue1.dateUpdated it.issue1.dateCreated) 'M/D/YYYY H:mm:ss'}}
                                        </span>
                                    </span>
                                    {{#link-to 'customer-issue.edit' it.issue1.id data-rel='tooltip' title='Edit Comment'}}
                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                    {{/link-to}}
                                {{/if}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showIssue2}}
                            <td style="max-width: 36px; white-space: initial;">
                                {{#if it.issue2}}
                                    <div style="max-height: 48px; overflow: auto; cursor: pointer;">
                                        {{issue-cell issue=it.issue2.issue}}
                                    </div>
                                    <span style="font-size: 80%;">
                                        {{moment-format (if it.issue2.dateUpdated it.issue2.dateUpdated it.issue2.dateCreated) 'M/D/YYYY H:mm:ss'}}
                                    </span>
                                    {{#link-to 'customer-issue.edit' it.issue2.id class="blue" data-rel='tooltip' title='Edit Comment'}}
                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                    {{/link-to}}
                                {{/if}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showIssue3}}
                            <td style="max-width: 36px; white-space: initial;">
                                {{#if it.issue3}}
                                    <div style="max-height: 48px; overflow: auto; cursor: pointer;">
                                        {{issue-cell issue=it.issue3.issue}}
                                    </div>
                                    <span style="font-size: 80%;">
                                        {{moment-format (if it.issue3.dateUpdated it.issue3.dateUpdated it.issue3.dateCreated) 'M/D/YYYY H:mm:ss'}}
                                    </span>
                                    {{#link-to 'customer-issue.edit' it.issue3.id class="blue" data-rel='tooltip' title='Edit Comment'}}
                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                    {{/link-to}}
                                {{/if}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showApplication}}
                            <td style="max-width: 96px; white-space: initial;">
                                {{#each (str-split it.applications) as |aId|}}
                                    {{#each model.applicationList as |app|}}
                                        {{#if (eq aId app.id)}}
                                            {{customer-application/preview-btn model=app}}
                                        {{/if}}
                                    {{/each}}
                                    {{!option-text model.applicationList a 'id' 'name'}}
                                {{/each}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showStatus}}
                            <td>
                                {{it.statusText}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showDateAdded}}
                            <td>
                                {{date-cell value=it.dateAdded format='YYYY'}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showYears}}
                            <td>
                                {{!--
                                {{#if (eq it.years.length 1)}}
                                    {{it.years.firstObject}}
                                {{else if (gt it.years.length 1)}}
                                    {{it.years.firstObject}}-{{it.years.lastObject}}
                                {{/if}}
                                --}}
                                {{it.year}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showCountryCode}}
                            <td>
                                {{it.countryCode}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showState}}
                            <td>
                                {{it.state}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showCity}}
                            <td>
                                {{it.city}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showMs}}
                            <td>
                                {{it.ms}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showRegion}}
                            <td>
                                {{it.region}}
                            </td>
                        {{/if}}
                        {{#if tableOptions.showSalesperson}}
                            <td>
                                {{it.salesperson}}
                            </td>
                        {{/if}}
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                {{#link-to 'customer-issue.create' it.id class='btn btn-xs btn-success' data-rel='tooltip' title='Write Comment'}}
                                    <i class="ace-icon fa fa-tags bigger-120"></i>
                                {{/link-to}}
                                {{#link-to 'customer.edit' it.id class='btn btn-xs btn-info' data-rel='tooltip' title='Edit Customer'}}
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                {{/link-to}}
                            </div>
                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">

                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            {{#link-to 'customer-issue.create' it.id class='tooltip-info' title='Write Comment'}}
                                                <span class="green">
                                                    <i class="ace-icon fa fa-tags bigger-120"></i>
                                                </span>
                                            {{/link-to}}
                                        </li>
                                        <li>
                                            {{#link-to 'customer.edit' it.id class='tooltip-info' title='Edit Customer'}}
                                                <span class="blue">
                                                    <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                </span>
                                            {{/link-to}}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {{#if it.expand}}
                    <tr>
                        <td colspan="{{tableOptions.countOfShowing}}">
                            <table class="table table-striped table-hover dataTable table-bordered" style="border: 1px solid #ddd;">
                                <thead class="thin-border-bottom">
                                <tr>
                                    <th style='width: 106px;'>Year</th>
                                    <th>Sales</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{#each it.ytdSales as |yearSale|}}
                                <tr>
                                    <td>
                                        {{yearSale.year}}                            
                                    </td>
                                    <td>
                                        {{number-us yearSale.sale}} 
                                    </td>
                                </tr>
                                {{/each}}
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>
        {{pagination-bar}}
    </div>
</div>
{{outlet}}
{{/main-content}}