{{#if !wizard}}
<div class="panel panel-default">
    <div class="panel-body" on-click="@this.openDashboard()">
        <div style="cursor: pointer;">
            <h3>General.</h3>
            <dl class="dl-horizontal">
                <dt>Housing</dt>
                <dd>{{parentingArrangements.housingArrangements}}</dd>
                <dt>Care support</dt>
                <dd>{{parentingArrangements.childcare}}</dd>
                <dt>Work</dt>
                <dd>{{parentingArrangements.workArrangements}}</dd>
            </dl>
        </div>

        {{#children}}
        <div style="width: 50%; float: left; margin-bottom: 0px; cursor: pointer;">
            <h3>{{name}}.</h3>
            <dl class="dl-horizontal">
                <dt>Gender</dt>
                <dd>{{gender}}</dd>
                <dt>Age</dt>
                <dd>{{computeAge(dob)}}</dd>
                <dt>Relationship to child</dt>
                <dd>{{relationshipType}}{{#if relationshipDetails.length > 0}} ({{relationshipDetails}}){{/if}}</dd>
                <dt>Address</dt>
                <dd>{{livingAddress}}</dd>
                <dt>Residents</dt>
                <dd>
                {{#othersLiving}}
                {{name}} {{dob}} ({{computeAge(dob)}})<br/>
                Relationship to client: {{relationshipYou}}<br/>
                Relationship to child: {{relationshipChild}}<br/>
                {{/}}
                </dd>
                <dt>Medical issues</dt>
                <dd>{{medicalProblems}}</dd>
                <dt>Mental issues</dt>
                <dd>{{mentalProblems}}</dd>
                <dt>School</dt>
                <dd>{{schoolName}}</dd>
                <dt>Starting year</dt>
                <dd>{{schoolYear}}</dd>
                <dt>Current school level</dt>
                <dd>{{schoolLevel}}</dd>
                <dt>Views on arrangements</dt>
                <dd>{{childViews}}</dd>
                <dt>Child abuse/violence</dt>
                <dd>{{childConcerns}}</dd>
                <dt>Child protection reports</dt>
                <dd>{{childProtection}}</dd>
                <dt>Other information</dt>
                <dd>{{otherInformation}}</dd>
            </dl>
        </div>
        {{/}}
    </div>
</div>
{{/if}}

<div on-click="@this.questionnaireParentingArrangementsForm()" style="display: none;">Questionnaire - Parenting Arrangements</div>

<aside id="cvsQuestionnaireParentingArrangements" 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/parenting-arrangements.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">Parenting 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}}">

        <div class="stepwizard" style="display: none;">
            <div class="stepwizard-row">
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Where you're at">
                    <a class="btn btn-default btn-circle" on-click="@this.parentingQuestionnaireStep(1)">1</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Proceedings / orders">
                    <a class="btn btn-default btn-circle" on-click="@this.parentingQuestionnaireStep(2)">2</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Family violence">
                    <a class="btn btn-default btn-circle" on-click="@this.parentingQuestionnaireStep(3)">3</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="How you're coping">
                    <a class="btn btn-default btn-circle" on-click="@this.parentingQuestionnaireStep(4)">4</a>
                </div>
                <div class="stepwizard-step" data-toggle="tooltip" data-placement="bottom" title="Parenting arrangements">
                    <a class="btn btn-default btn-circle" on-click="@this.parentingQuestionnaireStep(5)">5</a>
                </div>
            </div>
        </div>

        {{#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-parenting-wrap">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div id="wizardNav-parenting-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" 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 active" 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="questionnaireParentingArrangementsForm-alert" class="alert-message alert-message-danger" style="display:none;"></div>
            <form id="questionnaireParentingArrangementsForm" class="jsonform">Loading...</form>   
        </div>

    </div>
</aside>