{% load input_field %}

<div class="question-well fact-sheets {% if derived.fact_sheet_b_error %}error{% endif %}">
    <h1>Shared Living Arrangement (Fact Sheet B)</h1>
    <p>
        Since you have previously indicated that the child/children will live with both parents more or less equally
        (between 40 to 60% of the time with each parent) we need you to answer the questions below, even if you have a Separation Agreement or
        existing Court Order.<br>
        <b>This information is needed for the Judge. You will be able to indicate a different child support amount in a following step.</b>
    </p>
    <div class="question-well">
        <h3>Number of Shared Children</h3>
        <p>
            This is the number of children, as indicated in the <b>Children details</b> page, that you
            and your spouse have a <b>shared parenting arrangement</b> (the child spends at least 40 percent of the
            time with each of you in a year). If you and your spouse have a split parenting arrangement for any other children,
            they are not included in this set of questions.
        </p>
        {% input_field type="number" name="number_of_children" value=derived.number_of_children class="form-control input-narrow positive-integer" readonly="" %}
    </div>
    <br/>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th></th>
            <th>You</th>
            <th>Spouse</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="fact-sheet-question">
                <p>
                    What is the approximate amount of time the children spend with each parent?
                </p>
                <p>
                    Note: This includes time that a parent is responsible for the children, even if they are not
                    physically with that parent (for example the child is at school).
                </p>
                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_percentage_time"
                     aria-controls="collapse_percentage_time">
                    <div>
                        How do I determine the percentage of time spent with each parent?
                    </div>
                </div>
                <div class="collapse" id="collapse_percentage_time">
                    <div>
                        <p>For more information please refer to:</p>
                        <ul>
                            <li>
                                The <a href="http://www.justice.gc.ca/eng/rp-pr/fl-lf/child-enfant/guide/step3-etap3.html#h5"
                                       target="_blank">Federal Child Support Guidelines: Step-by-Step Guide</a>
                            </li>
                            <li>
                                The <a href="https://familylaw.lss.bc.ca/resources/fact_sheets/child_support.php#fortyPercentPrinciple"
                                       target="_blank">child support</a> page on the Family Law in B.C. website.
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
            <td class="fact-sheet-answer">
                <div class="{% if time_spent_with_you_error %}table-error{% endif %}">
                    <div class="percent-suffix">
                        {% input_field type="number" name="time_spent_with_you" class="fact-sheet-input" min="0" placeholder="enter number" ignore_error=True %}
                        <label> %</label>
                    </div>
                </div>
            </td>
            <td class="fact-sheet-answer">
                <div class="{% if time_spent_with_spouse_error %}table-error{% endif %}">
                    <div class="percent-suffix">
                        {% input_field type="number" name="time_spent_with_spouse" class="fact-sheet-input" min="0" placeholder="enter number" ignore_error=True %}
                        <label> %</label>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="fact-sheet-question">Annual income as per
                <a href="http://laws-lois.justice.gc.ca/eng/regulations/SOR-97-175/page-2.html#h-6" target="_blank">Federal Child Support
                    Guidelines</a>
                <span class="tooltip-link"
                      data-toggle="tooltip"
                      data-placement="right"
                      data-html="true"
                      title="<b>Federal Child Support Guidelines</b><br />
                  This is a copy of an official work that is published by the Government of Canada and that this copy has
                  not been produced in affiliation with, or with the endorsement of the Government of Canada."><i class="fa fa-question-circle"
                                                                                                                  aria-hidden="true"></i>
                        </span>
            </td>
            <td class="fact-sheet-answer" readonly>
                <div class="dollar-prefix">
                    {% money_input_field id="fact_b_annual_gross_income" name="annual_gross_income" value="" class="fact-sheet-input" readonly="" ignore_error=True %}
                </div>
            </td>
            <td class="fact-sheet-answer" readonly>
                <div class="dollar-prefix">
                    {% money_input_field id="fact_b_spouse_annual_gross_income" name="spouse_annual_gross_income" value="" class="fact-sheet-input" readonly="" ignore_error=True %}
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">What is the 'Guideline' amount for child support?
            </td>
            <td class="fact-sheet-answer">
                <div class="{% if your_child_support_paid_b_error %}table-error{% endif %}">
                    <div class="dollar-prefix">
                        {% money_input_field id="fact_b_your_child_support_paid" name="your_child_support_paid_b" class="fact-sheet-input claimants-child-support-amounts determine-payor" data_calc_delta="true" data_delta_term_selector=".claimants-child-support-amounts" data_delta_target_selector="input[name=difference_payment_amounts_b]" placeholder="enter amount" ignore_error=True %}
                    </div>
                </div>
            </td>
            <td class="fact-sheet-answer">
                <div class="{% if your_spouse_child_support_paid_b_error %}table-error{% endif %}">
                    <div class="dollar-prefix">
                        {% money_input_field id="fact_b_your_spouse_child_support_paid" name="your_spouse_child_support_paid_b" class="fact-sheet-input claimants-child-support-amounts determine-payor" data_calc_delta="true" data_delta_term_selector=".claimants-child-support-amounts" data_delta_target_selector="input[name=difference_payment_amounts_b]" placeholder="enter amount" ignore_error=True %}
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_amounted_needed"
                     aria-controls="collapse_amounted_needed">
                    <div>
                        How do I determine the 'Guideline' amount for child support?
                    </div>
                </div>
                <div class="collapse" id="collapse_amounted_needed">
                    <div>
                        <p>
                            To figure out how much child support the
                            <span class="tooltip-link"
                                  data-toggle="tooltip"
                                  data-placement="right"
                                  data-html="true"
                                  title="<b>Payor</b><br />The person who pays child support.">
                                        payor<i class="fa fa-question-circle" aria-hidden="true"></i>
                                    </span> will be paying under the guidelines:
                        </p>
                        <ul>
                            <li>
                                Use the <a href="http://www.justice.gc.ca/eng/fl-df/child-enfant/2017/look-rech.asp" target="_blank">
                                Child Support Table Lookup tool</a>
                                (effective from November 22, 2017) to calculate the correct amount of child support.
                            </li>
                            <li>
                                Refer to the <a href="http://laws-lois.justice.gc.ca/eng/regulations/SOR-97-175/index.html" target="_blank">
                                Federal Child Support Tables</a>
                                <span class="tooltip-link"
                                      data-toggle="tooltip"
                                      data-placement="right"
                                      data-html="true"
                                      title="<b>Federal Child Support Guidelines</b><br />
                                  This is a copy of an official work that is published by the Government of Canada and that this copy has
                                  not been produced in affiliation with, or with the endorsement of the Government of Canada."><i
                                        class="fa fa-question-circle" aria-hidden="true"></i>
                                        </span>.
                                Make sure you view the table pertaining to the province where the payor lives
                            </li>
                        </ul>
                        <p>
                            To speak to someone in person, you can call the Department of Justice Canada's Family
                            Law Information Line at 1-888-373-2222. When you call, be ready to tell them:
                        </p>
                        <ul>
                            <li>Where the paying parent lives</li>
                            <li>Whether both parents live in the same province or territory, and</li>
                            <li>The number of children to be supported</li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                Difference between the Guidelines table amount of the claimant and the Guidelines table amount of the respondent
            </td>
            <td class="fact-sheet-answer" colspan="2" readonly>
                <div class="dollar-prefix">
                    {% money_input_field name="difference_payment_amounts_b" value="" class="money fact-sheet-input" readonly="" %}
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                Special or extraordinary expenses (as per
                <a href="http://laws-lois.justice.gc.ca/eng/regulations/SOR-97-175/section-7.html" target="_blank">Section 7 of the Federal Child
                    Support Guidelines</a>
                <span class="tooltip-link"
                      data-toggle="tooltip"
                      data-placement="right"
                      data-html="true"
                      title="<b>Federal Child Support Guidelines</b><br />
                  This is a copy of an official work that is published by the Government of Canada and that this copy has
                  not been produced in affiliation with, or with the endorsement of the Government of Canada."><i class="fa fa-question-circle"
                                                                                                                  aria-hidden="true"></i>
                        </span>
                ) to be paid monthly
            </td>
            <td class="fact-sheet-answer" readonly>
                <div class="dollar-prefix">
                    {% money_input_field name="your_proportionate_share_amount" class="money fact-sheet-input" readonly="" %}
                </div>
            </td>
            <td class="fact-sheet-answer" readonly="">
                <div class="dollar-prefix">
                    {% money_input_field name="spouse_proportionate_share_amount" class="money fact-sheet-input" readonly="" %}
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <p>
                    Any other relevant information regarding the conditions, means, needs and other circumstances of
                    each spouse or of any child for whom support is sought? {% include 'partials/optional.html' with inline=True %}
                </p>
                {% input_field style="height:50px;" type="textarea" name="additional_relevant_spouse_children_info" maxlength="500" rows="3" class="fact-sheet-input form-control response-textarea" %}
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                <p>Amount of child support to be paid per month by <span class="payor-placeholder">payor</span></p>
                <p>Please note: You will need to indicate who the 'payor' is below.</p>
            </td>
            <td class="fact-sheet-answer" colspan="2" readonly>
                <div class="dollar-prefix">
                    {% money_input_field name="difference_payment_amounts_b" value="" class="money fact-sheet-input different-payment-amounts" readonly="" %}
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
