{{#if !wizard}}
<div class="panel panel-default">
    {{#if fileCount(this.id) > 0}}
    <span class="badge badge-attachments" onclick="routie('children')"><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">
        <div onclick="routie('children')" style="cursor: pointer;">
            <h3 id="tourChildren">Children.</h3>
            <dl class="dl-horizontal" style="margin-bottom: 0px;">
                {{#if hasChildrenTogether == 'Yes'}}
                    <dt>Children together</dt>
                    <dd>
                        {{children.together.children}}<br/>
                        {{#children.together.details}} 
                        {{name}}, {{gender}} (DOB: {{dte(dob, true)}})<br/>
                        {{/children.together.details}}
                    </dd>
                {{else}}
                <p style="color: rgb(153, 153, 153); margin-bottom: 0px;">No information to display yet. Click to edit.</p>
                {{/if}}

                {{#if hasChildrenOther == 'Yes'}}
                    <dt>Other children</dt>
                    <dd>
                        {{children.other.children}}<br/>
                        {{#children.other.details}} 
                        {{name}}, {{gender}} (DOB: {{dte(dob, true)}})<br/>
                        {{/children.other.details}}
                    </dd>
                {{/if}}
            </dl>
        </div>
    </div>
    <recommendation panel="Parenting" id="Parenting" />
</div>
{{/if}}

<aside id="cvsChildren" 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/children.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">Children</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-primary 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-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_children_information" data-toggle="tab">Information</a>
                    </li>
                    <li>
                        <a href="#tab_children_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_children_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-children-wrap">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>

                                <div id="wizardNav-children-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 active" role="presentation"><a href="#" on-click="@this.wizardStep(3)">Children</a></li>
                                            <li class="wizard-step-4" 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="childrenForm-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                            <form id="childrenForm" class="jsonform">Loading...</form>         
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_children_attachements">
                        <!-- Start: Attachments section -->
                        <button id="childrenFormFile-button" type="button" class="btn btn-default btn-lg btn-block">Select a file to attach</button>
                        <div id="childrenFormFile-upload" style="display: none;">
                            <div id="childrenFormFile-alert" class="alert-message alert-message-danger" style="display:none;"></div>
                            <form id="childrenFormFile" 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>