{{#if !wizard}}
<div class="panel panel-default">
    {{#if fileCount(this.id) > 0 && party == 'a'}}
    <span class="badge badge-attachments" on-click="@this.goto()"><span class="glyphicon glyphicon-paperclip" aria-hidden="true" style="margin-right: 5px;" data-toggle="popover" data-placement="left" data-trigger="hover" data-container="body" data-content="There are {{fileCount(this.id)}} attachments"></span> {{fileCount(this.id)}}</span>
    {{/if}}
    <div class="panel-body" on-click="@this.goto()">
        <div style="cursor: pointer;">
            <h3>{{name}}'s income.</h3>
            <dl class="dl-horizontal" style="margin-bottom: 0px;">
                <dt>Currently employed</dt>
                <dd>{{income.employed}}</dd>
                {{#if income.employed}}
                    <dt>Income from jobs</dt>
                    <dd>
                        {{#income.jobs}} 
                        {{occupation}} - {{business}} (p/w: {{formatValue(this.income)}} | p/m: {{formatValue(toMonthly(this.income, 'weekly'))}})<br/>
                        {{/income.jobs}}
                    </dd>
                {{/if}}
                <dt>Other income</dt>
                <dd>
                    {{yesno(income.other)}}
                    {{#if income.other === true}}
                    <br/>
                    <i>Source: {{income.otherType}}</i>
                    <br/>
                    <i>Per week: {{formatValue(income.otherIncome)}}</i><br/>
                    <i>Per month: {{formatValue(toMonthly(income.otherIncome, 'weekly'))}}</i>
                    {{/if}}
                </dd>
            </dl>
        </div>
    </div>
    <recommendation panel="Income" id="Income" party="{{party}}" />
</div>
{{/if}}

<aside id="cvsIncome" class="js-offcanvas c-offcanvas-50" data-offcanvas-options='{"modifiers":"right,push", "resize":false}' style="display: none;">
    <div class="js-offcanvas-header">
        <p class='lead pull-left js-offcanvas-title' id="cvsContent-title">Income details.</p>
        <i class="fa fa-times pull-right js-offcanvas-close" aria-hidden="true"></i>
    </div>

    <div class="js-offcanvas-content">

        {{#if wizard}}
        <div class="stepwizard">
            <div class="stepwizard-row">
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Personal details">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(1)">1</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Relationship details">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(2)">2</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="About your children">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(3)">3</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Current living arrangements">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(4)">4</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Income & expenses">
                    <a class="btn btn-primary btn-circle" on-click="@this.wizardStep(5)">5</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Assets & Super">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(6)">6</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="What is owed">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(7)">7</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Other assets & liabilities">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(8)">8</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Your contributions">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(9)">9</a>
                </div> 
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Your future">
                    <a class="btn btn-default btn-circle" on-click="@this.wizardStep(10)">10</a>
                </div> 
            </div>
        </div>
        {{/if}}

        <div class="tabbable-panel">
            <div class="tabbable-line">
                {{#if !wizard}}
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab_income_information" data-toggle="tab">Information</a>
                    </li>
                    <li>
                        <a href="#tab_income_attachments" data-toggle="tab">Attachments&nbsp;&nbsp;&nbsp;<span class="badge badge-attachments">{{attachments.length}}</span></a>
                    </li>
                </ul>
                {{/if}}
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_income_information">
                        <div id="incomeForm-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                        <form id="incomeForm" class="jsonform">Loading...</form>     
                    </div>
                    <div class="tab-pane" id="tab_income_attachments">
                        <!-- Start: Attachments section -->
                        <button id="incomeFormFile-button" type="button" class="btn btn-default btn-lg btn-block">Select a file to attach</button>
                        <div id="incomeFormFile-upload" style="display: none;">
                            <div id="incomeFormFile-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                            <form id="incomeFormFile" class="jsonform">Loading...</form>   
                        </div>
                        <hr/>
                        <div class="resources attachments">
                            {{#attachments}} 
                            <div class="media resource-item">
                                <div class="media-left routie" on-click="@this.attachmentDownload(this)">
                                    {{#if type == 'application/pdf'}}<img class="img-responsive image" src="/assets/icons/pdf.png">{{/if}}
                                    {{#if type == 'image/jpg'}}<img class="img-responsive image" src="/assets/icons/jpg.png">{{/if}}
                                    {{#if type == 'image/jpeg'}}<img class="img-responsive image" src="/assets/icons/jpg.png">{{/if}}
                                    {{#if type == 'image/png'}}<img class="img-responsive image" src="/assets/icons/png.png">{{/if}}
                                    {{#if type == 'image/gif'}}<img class="img-responsive image" src="/assets/icons/gif.png">{{/if}}
                                    {{#if type == 'application/zip'}}<img class="img-responsive image" src="/assets/icons/zip.png">{{/if}}
                                    {{#if type == 'application/msword'}}<img class="img-responsive image" src="/assets/icons/doc.png">{{/if}}
                                    {{#if type == 'application/vnd.ms-excel'}}<img class="img-responsive image" src="/assets/icons/xls.png">{{/if}}
                                    {{#if type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}}<img class="img-responsive image" src="/assets/icons/doc.png">{{/if}}
                                    {{#if type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}}<img class="img-responsive image" src="/assets/icons/xls.png">{{/if}}
                                    {{#if !type}}<img class="img-responsive image" src="/assets/icons/file.png">{{/if}}
                                </div>
                                <div class="media-body routie" on-click="@this.attachmentDownload(this)">
                                    <h4 class="media-heading">{{title}} 
                                        {{#if disclosure == 'Disclosed'}}
                                        <span class="badge" style="font-size: 11px; padding-top: 4px;{{#if party == 'c'}}background-color: #5c7584;{{/if}}">
                                            {{#if party == 'c'}}Disclosed{{else}}Accessible{{/if}} {{#if party == 'b' || party == 'c'}}(By OS){{/if}}
                                        </span>
                                        {{/if}}
                                    </h4>
                                    <p>{{description}}</p>
                                    <span class="label label-default label-attachment">
                                        Uploaded by {{uploader}} @ {{date}} | {{filetype(type)}} | {{filesize(size)}} | {{filename}}
                                    </span>
                                </div>
                                {{#if party == 'a'}}
                                <div class="media-right">
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-action dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li>
                                                <a style="cursor: pointer"  on-click="@this.attachmentDownload(this, false)">Download</a>
                                            </li>
                                            <li>
                                                <a style="cursor: pointer;" on-click="@this.attachment(ref, this)">Edit</a>
                                            </li>
                                            {{#if disclosure == 'Disclosed' && setup == 'single'}}
                                            <li>
                                                <a style="cursor: pointer;" on-click="@this.attachmentShare(this)">Get shareable link</a>
                                            </li>
                                            {{/if}}
                                            {{#if disclosure == 'Private'}}
                                            <li>
                                                <a style="cursor: pointer;" on-click="@this.attachmentAccessible(this)">Make accessible</a>
                                            </li>
                                            {{/if}}
                                            {{#if disclosure == 'Private' || (disclosure == 'Disclosed' && setup == 'joint')}}
                                            <li>
                                                <a style="cursor: pointer;" on-click="@this.attachmentDelete(this)">Delete</a>
                                            </li>
                                            {{/if}}
                                        </ul>
                                    </div>
                                </div>
                                {{/if}}
                                {{#if party == 'c'}}
                                <div class="media-right">
                                    <div class="btn-group" role="group">
                                        <div class="dropdown dropdown-lg">
                                            <button class="btn btn-default btn-action dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li>
                                                    <a style="cursor: pointer;" on-click="@this.attachment(ref, this)">Edit</a>
                                                </li>
                                                {{#if canDelete}}
                                                <li>
                                                    <a style="cursor: pointer" on-click="@this.attachmentDeleteOS(this)">Delete</a>
                                                </li>
                                                {{/if}}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                            {{/attachments}}
                        </div>
                        <!-- End: Attachments section -->
                    </div>
                </div>
            </div>
        </div>        
    </div>
</aside>