{% load input_field %}
{% load format_utils %}

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Payor <span id="fact_sheet_f_payor_title_{{ table_id }}"></span></th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="fact-sheet-question">
                How many child(ren) are you asking for support?
            </td>
            <td class="fact-sheet-answer">
                {% input_field type="number" name="number_children_seeking_support_"|add:claimant_id class="fact-sheet-input number-spinner" placeholder="enter number " %}
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                <p>
                    What is the monthly
                    {% include "partials/tooltip_link_federal_child_support_guidelines.html" with reference_link="http://www.justice.gc.ca/eng/rp-pr/fl-lf/child-enfant/guide/start-com.html#h11" link_text="Child Support Guidelines" %}
                    amount for $150,000?
                </p>
                {% include "partials/inline_question_determine_amount_to_pay.html" with collapse_target_id="collapse_guideline_amount" %}
            </td>
            <td class="fact-sheet-answer">
                <div class="dollar-prefix">
                    {% money_input_field name="child_support_amount_under_high_income_"|add:claimant_id class="fact-sheet-input money guideline-amount-"|add:claimant_id data_sum="true" data_sum_class="guideline-amount-"|add:claimant_id data_sum_target_id="total_amount_"|add:claimant_id placeholder="enter amount "%}
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                What is the % of income over $150,000 from the
                {% include "partials/tooltip_link_federal_child_support_guidelines.html" with reference_link="http://www.justice.gc.ca/eng/rp-pr/fl-lf/child-enfant/guide/start-com.html#h11" link_text="Child Support Guidelines" %}
                ?
            </td>
            <td class="fact-sheet-answer">
                <div class="percent-suffix">
                    {% input_field type="number" name="percent_income_over_high_income_limit_"|add:claimant_id class="fact-sheet-input" placeholder="enter percentage "%}
                    <label> %</label>
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                <p>
                    What is the monthly child support amount to be paid on the portion of income over
                    $150,000?
                </p>
                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false"
                     data-target="#collapse_high_income_amounts"
                     aria-controls="collapse_high_income_amounts">
                    <div>
                        How can I determine this amount?
                    </div>
                </div>
                <div class="collapse" id="collapse_high_income_amounts">
                    <div>
                        <p>
                            The child support tables only show an amount for the first $150,000 of income.
                            You have
                            two choices for determining how much child support should be paid on the portion
                            of
                            income over $150,000:
                        </p>
                        <ul>
                            <li>
                                you can multiply the amount of income over $150,000 by the percentage shown
                                in the
                                table for the province or territory where the paying parent lives; or
                            </li>
                            <li>
                                you can agree on an additional amount of support based on the condition,
                                means,
                                needs and other circumstances of your children and your financial ability to
                                contribute.
                            </li>
                        </ul>
                        <p>
                            Source:
                            {% include "partials/tooltip_link_federal_child_support_guidelines.html" with reference_link="http://www.justice.gc.ca/eng/rp-pr/fl-lf/child-enfant/guide/start-com.html#h11" link_text="Federal Child Support Guidelines" %}
                            , Department of Justice
                        </p>
                    </div>
                </div>
            </td>
            <td class="fact-sheet-answer">
                <div class="dollar-prefix">
                    {% money_input_field name="amount_income_over_high_income_limit_"|add:claimant_id class="fact-sheet-input money guideline-amount-"|add:claimant_id data_sum="true" data_sum_class="guideline-amount-"|add:claimant_id data_sum_target_id="total_amount_"|add:claimant_id data_mirror="true" data_mirror_target="#agreed_child_support_amount_"|add:claimant_id data_mirror_broadcast_change="true" placeholder="enter amount "%}
                </div>
            </td>
        </tr>
        <tr>
            <td class="fact-sheet-question">
                Guidelines table amount
            </td>
            <td class="fact-sheet-answer" readonly>
                <div class="dollar-prefix">
                    {% money_input_field name="total_guideline_amount_"|add:claimant_id id="total_amount_"|add:claimant_id class="fact-sheet-input money" readonly="" data_mirror="true" data_mirror_target="#agreed_total_amount" data_mirror_broadcast_change="true" %}
                </div>
            </td>
        </tr>
    </tbody>
</table>

<div class="question-well-border-less">
    <h3>
        Do you and your spouse agree that $<span
            id="agreed_child_support_amount_{{ claimant_id }}">{% agreed_child_support_amount claimant_id line_breaks=False %}</span> is the child support amount?
    </h3>
    <div class="btn-radio-group" data-toggle="buttons">
        <label class="btn btn-radio">
            {% input_field type="radio" name="agree_to_child_support_amount_"|add:claimant_id autocomplete="off" value="YES" data_target_id="enter_agreed_appropriate_amount_"|add:claimant_id data_reveal_target="false" %}
            YES
        </label>

        <label class="btn btn-radio">
            {% input_field type="radio" name="agree_to_child_support_amount_"|add:claimant_id autocomplete="off" value="NO" data_target_id="enter_agreed_appropriate_amount_"|add:claimant_id data_reveal_target="true" %}
            NO
        </label>
    </div>
    <div id="enter_agreed_appropriate_amount_{{ claimant_id }}" hidden>
        <h3>
            What is the amount that you and your spouse have agreed to (that differs from the Child Support Guidelines table amount)?
        </h3>
        <div>
            <div class="dollar-prefix">
                {% money_input_field name="agreed_child_support_amount_"|add:claimant_id value="" class="fact-sheet-input money" %}
            </div>
        </div>
        <h3>
            Why do you think the court should approve your proposed amount?
        </h3>
        <p>
            Discuss the conditions, means, needs and other circumstances of the child, and the financial
            ability of
            each parent to support the child/children.
        </p>
        <div>
            {% input_field type="textarea" name="reason_child_support_amount_"|add:claimant_id class="fact-sheet-input form-control response-textarea" maxlength="1000" rows="6" %}
        </div>
    </div>
</div>
