{{#if !wizard}}
<div class="panel panel-default">
    {{#if fileCount(this.id) > 0}}
    <span class="badge badge-attachments" onclick="routie('living')"><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" onclick="routie('living')">
        <div style="cursor: pointer;">
            <h3 id="tourLiving">Current living arrangements.</h3>
            <dl class="dl-horizontal" style="margin-bottom: 0px;">
                <dt>Residing</dt>
                <dd>{{living.location}}</dd>
                <dt>Others living at home</dt>
                <dd>{{yesno(living.othersLiving)}}{{#if living.otherPeopleLiving.length > 0}} ({{living.otherPeopleLiving.length}} {{#if living.otherPeopleLiving.length == 1}}person{{else}}people{{/if}}){{/if}}</dd>
                <dt>Children's address</dt>
                <dd>{{living.children.address}}</dd>
                <dt>Residing - Comments</dt>
                <dd>{{living.locationOther}}</dd>
                {{#if children.together.children && under18together}}
                    <dt>Their children are residing</dt>
                    <dd>{{living.children.together}}</dd>
                    <dt>Children - Comments</dt>
                    <dd>{{living.children.togetherOther}}</dd>
                {{/if}}

                {{#if children.other.children && under18other}}
                    <dt>Other children are residing</dt>
                    <dd>{{living.children.other}}</dd>
                    <dt>Other children - Comments</dt>
                    <dd>{{living.children.otherOther}}</dd>
                {{/if}}

                {{#if living.children.childSupport.paying}}
                <dt>Child support - Paying</dt>
                {{#if living.children.childSupport.paying === true}}
                <dd>
                    {{formatValue(living.children.childSupport.payingAmount)}} per week
                </dd>
                {{/if}} 
                {{/if}} 

                {{#if living.children.childSupport.recieving}}
                <dt>Child support - Receiving</dt>
                {{#if living.children.childSupport.recieving === true}}
                <dd>
                    {{formatValue(living.children.childSupport.recievingAmount)}} per week
                </dd>
                {{/if}} 
                {{/if}} 

                {{#if living.children.childSupport.arrears}}
                <dt>Child support - Arrears</dt>
                {{#if living.children.childSupport.arrears === true}}
                <dd>
                    {{formatValue(living.children.childSupport.arrearsAmount)}} owing
                </dd>
                {{/if}} 
                {{/if}} 

                <dt>Child support details</dt>
                <dd>{{living.children.childSupport.details}}</dd>
                <dt>Paying/receiving maintenance</dt>
                <dd>{{yesno(living.maintenance)}} {{#if living.maintenance === true}}({{formatValue(living.maintenanceAmount)}} per week){{/if}}</dd>
                <dt>Living with new partner</dt>
                <dd>{{yesno(living.newPartner)}}</dd>
            </dl>
        </div>
        {{#if children.together.children || children.other.children}}
        <div class="alert alert-default alert-dismissible" role="alert" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Link to child support estimator <a href="#" class="alert-link">...</a>
        </div>
        {{/if}}
    </div>
    <recommendation panel="Living" id="Living" />
</div>
{{/if}}

<aside id="cvsLiving" class="js-offcanvas c-offcanvas-50" data-offcanvas-options='{"modifiers":"right,push", "resize":false}' style="display: none;">
    {{#if wizard}}
    <div class="js-offcanvas-header" style="padding: 0px; height: auto; position: relative; border-bottom: none;">
        <div class="hero">
            <img src="https://app.lawswitch.com/botui_files/btnclose.svg" class="hero-close">
            <img src="../../images/headers/living.png" class="img-responsive image hero-image">
        </div>
    </div>
    {{else}}
    <div class="js-offcanvas-header">
        <p class='lead pull-left js-offcanvas-title' id="cvsContent-title">Current living arrangements</p>
        <i class="fa fa-times pull-right js-offcanvas-close" aria-hidden="true"></i>
    </div>
    {{/if}}

    <div class="js-offcanvas-content" style="{{#if wizard}}margin-top: 0px;{{/if}}">

        {{#if wizard}}
        <div class="stepwizard" style="display: none;">
            <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-primary 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-default 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_living_information" data-toggle="tab">Information</a>
                    </li>
                    <li>
                        <a href="#tab_living_attachements" 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_living_information">

                        {{#if wizard}}
                            <div id="wizardNav" class="col-md-3">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wizardNav-living-wrap">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>

                                <div id="wizardNav-living-wrap" class="collapse navbar-collapse">
                                    <div id="wizardNav-details" style="padding: 0px;">
                                        <span class="questionnaire-nav-heading general">General</span>
                                        <ul class="nav nav-pills nav-stacked" style="padding-top: 12px;">
                                            <li class="wizard-step-1" role="presentation"><a href="#" on-click="@this.wizardStep(1)">Personal details</a></li>
                                            <li class="wizard-step-2" role="presentation"><a href="#" on-click="@this.wizardStep(2)">Relationship</a></li>
                                            <li class="wizard-step-3" role="presentation"><a href="#" on-click="@this.wizardStep(3)">Children</a></li>
                                            <li class="wizard-step-4 active" role="presentation"><a href="#" on-click="@this.wizardStep(4)">Living arrangements</a></li>
                                        </ul>
                                        <span class="questionnaire-nav-heading property">Property</span>
                                        <ul class="nav nav-pills nav-stacked" style="padding-top: 12px;">
                                            <li class="wizard-step-5" role="presentation"><a href="#" on-click="@this.wizardStep(5)">Income & expenses</a></li>
                                            <li class="wizard-step-6" role="presentation"><a href="#" on-click="@this.wizardStep(6)">Assets & super</a></li>
                                            <li class="wizard-step-7" role="presentation"><a href="#" on-click="@this.wizardStep(7)">What is owed</a></li>
                                            <li class="wizard-step-8" role="presentation"><a href="#" on-click="@this.wizardStep(8)">Other assets & liabilities</a></li>
                                            <li class="wizard-step-9" role="presentation"><a href="#" on-click="@this.wizardStep(9)">Your contributions</a></li>
                                            <li class="wizard-step-10" role="presentation"><a href="#" on-click="@this.wizardStep(10)">Your future</a></li>
                                        </ul>
                                    </div>

                                    <div id="parentingNav-details" style="padding: 0px;">
                                        <span class="questionnaire-nav-heading screening">Current situation</span>
                                        <ul class="nav nav-pills nav-stacked" style="padding-top: 12px;">
                                            <li class="parenting-step-1" role="presentation"><a href="#" on-click="@this.parentingQuestionnaireStep(1)">Where you're at</a></li>
                                            <li class="parenting-step-2" role="presentation"><a href="#" on-click="@this.parentingQuestionnaireStep(2)">Proceedings / orders</a></li>
                                            <li class="parenting-step-3" role="presentation"><a href="#" on-click="@this.parentingQuestionnaireStep(3)">Family violence</a></li>
                                            <li class="parenting-step-4" role="presentation"><a href="#" on-click="@this.parentingQuestionnaireStep(4)">How you're coping</a></li>
                                        </ul>

                                        <span class="questionnaire-nav-heading parenting">Parenting</span>
                                        <ul class="nav nav-pills nav-stacked" style="padding-top: 12px;">
                                            <li class="parenting-step-5" role="presentation"><a href="#" on-click="@this.parentingQuestionnaireStep(5)">Parenting arrangements</a></li>
                                        </ul>
                                    </div>

                                    <div id="wizardNav-portal" style="padding: 0px;">
                                        <ul class="nav nav-pills nav-stacked" style=" display: none; padding-top: 12px; margin-top: 12px; border-top: 1px solid #ebebeb;">
                                            <li role="presentation"><a href="#" on-click="@this.clientPortal()">Client portal</a></li> 
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {{/if}}

                        <div id="wizardForm" class="{{#if wizard}}col-md-9{{/if}}">
                            <div id="livingForm-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                            <form id="livingForm" class="jsonform">Loading...</form>   
                        </div>  
                    </div>
                    <div class="tab-pane" id="tab_living_attachements">
                        <!-- Start: Attachments section -->
                        <button id="livingFormFile-button" type="button" class="btn btn-default btn-lg btn-block">Select a file to attach</button>
                        <div id="livingFormFile-upload" style="display: none;">
                            <div id="livingFormFile-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                            <form id="livingFormFile" 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>