{% extends 'base.html' %}
{% load input_field %}
{% load step_order %}

{% block title %}{{ block.super }}: Your Information{% endblock %}

{% block progress %}{% include "partials/progress.html" %}{% endblock %}

{% block content %}

<h1><small>Step 2:</small>Your Information (Claimant 1)</h1>

<div class="question-well">
    <h3>Please enter your name (as it appears on your marriage certificate or registration of marriage)</h3>
    {% input_field type="text" name="name_you" class="form-block input-wide response-textbox" %}

    <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_changed_name" aria-controls="collapse_changed_name">
        <div>
            Have you changed your legal name since getting married?
        </div>
    </div>
    <div class="collapse" id="collapse_changed_name">
        <div>
            <p>If either of you has had a legal name change since you were married, put that new name on your form, and bring along a copy of the change of name certificate when you file your documents.</p>
        </div>
    </div>

    <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_maiden_name" aria-controls="collapse_maiden_name">
        <div>
            Should I use my maiden name or married name?
        </div>
    </div>
    <div class="collapse" id="collapse_maiden_name">
        <div>
            <p>For the Notice of Family Claim Form (F1) you need to enter your name as it appears on the marriage certificate. </p>
            <p>When you got married, your name didn't automatically change. You're allowed to use your spouse's surname, but a formal name change wasn't necessary.</p>
        </div>
    </div>
</div>

<div class="question-well">
    <h3>Do you go by any other names?</h3>

    <div class="btn-radio-group" data-toggle="buttons">
        <label class="btn btn-radio">
                            {% input_field type="radio" name="any_other_name_you" autocomplete="off" value="YES" data_target_id="enter_name" data_reveal_target="true" %} Yes
                        </label>

        <label class="btn btn-radio">
                            {% input_field type="radio" name="any_other_name_you" autocomplete="off" value="NO" data_target_id="enter_name" data_reveal_target="false" %} No
                        </label>
    </div>

    <p>This could be an abbreviation of your legal name, a maiden name, or any aliases you use for business or legal matters.</p>

    <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_other_name" aria-controls="collapse_other_name">
        <div>
            Why do I need to provide other names that I go by? How will you be using this information?
        </div>
    </div>
    <div class="collapse" id="collapse_other_name">
        <div>
            <p>The name(s) that you provide will appear on the final
                <span class="tooltip-link" data-toggle="tooltip" data-placement="right" data-html="true" title="<b>Court Orders</b><br /><br />A record of a decision made by a judge or master that
                                       tells you or your spouse what you must do (or not do).  For example: The court has made an order that
                                       your spouse must pay you $250 on a monthly basis to help pay off your combined debt">court order(s)<i class="fa fa-question-circle" aria-hidden="true"></i></span> . Any names you provide will be used on the final court order for the purposes of executing
                or following up on the orders. For example, if you and your spouse will be dividing property, the Land Titles will likely want to see the name in the court order match what is on the title. This would also apply to pensions, RRSPs, etc. The
                order for divorce is also used to create linkages between names.</p>
            <p>You may want to take a look at the names that you have used on any legal and business agreements/contracts to ensure you are providing the courts with all variations of your name.</p>
        </div>
    </div>

    <div id="enter_name" hidden>
        <h3>Please enter the name</h3>
        <!-- This is used for adding a new other name field when add button is clicked -->
        <div id="other_names_group" hidden>
            {% include "partials/alias_field.html" with name="other_name_you" %}
        </div>
        <div id="other_names_fields">
            {% if other_name_you %}
                {% multiple_values_to_list source=other_name_you as values %}
                {% for alias_type, value in values %} {% include "partials/alias_field.html" with name="other_name_you" alias_type=alias_type value=value delete_button="true" %} {% endfor %}
            {% else %}
                {% include "partials/alias_field.html" with name="other_name_you" %}
            {% endif %}
        </div>
        <input type="button" id="btn_add_other_names" class="btn btn-success" value="Add name" data-add-for="you" />
        <div id="other_name_warning_message"></div>
    </div>
</div>

<div class="question-well">
    <h3>What was your last name when you were born?</h3>
    <div>{% input_field type="text" name="last_name_born_you" class="form-block input-wide response-textbox" %}</div>
    <p>This is often referred to as Family name or Surname</p>
</div>

<div class="question-well">
    <h3>What was your last name immediately before you were married?</h3> {% input_field type="text" name="last_name_before_married_you" class="form-block input-wide response-textbox" %}
    <p>This is often referred to as Family name or Surname</p>
</div>

<div class="question-well">
    <h3>What is your date of birth?</h3>
    <p>
        <span class="input-group date date-picker-group">
            {% input_field type="text" name="birthday_you" class="date-picker form-control" id="birth_date" placeholder="MMM D, YYYY" %}
            <span class="input-group-addon" >
                <i class="fa fa-calendar circle"></i>
            </span>
        </span>
    </p>
</div>

<div class="question-well">
    <h3>What is your occupation?</h3>
    <div>{% input_field type="text" name="occupation_you" class="form-block input-wide response-textbox" %}</div>
    <p>This refers to the type of work you do. For example,  janitor, banker, student, nurse etc.</p>
</div>

<div class="question-well">
    <h3>How long have you lived in B.C.?</h3>
    <p>Please select one</p>
    <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_you" value="Since birth" %}Since birth</label></div>
    <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_you" value="Moved to B.C. on" %}Moved to B.C. on
        <span class="input-group date date-picker-group">
            {% input_field type="text" name="moved_to_bc_date_you" id="moved_date" class="date-picker other-textbox input-inline form-control" tabindex="-1" placeholder="MMM D, YYYY" %}
            <span class="input-group-addon" >
                <i class="fa fa-calendar circle"></i>
            </span>
        </span>
    </label></div>
    <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_you" value="Do not live in B.C." %}Do not live in B.C.</label></div>

    <p>In order to apply for a divorce in B.C., you or your spouse must have been a regular resident in B.C (the legal term is
        <span class="tooltip-link" data-toggle="tooltip" data-placement="right" data-html="true" title="<b>Ordinarily resident</b><br /><br />
                        Ordinarily Resident<ul><li>the place where a person resides in the ordinary course of his or her day to day</li>
                        <li>you do not lose your ordinary resident in a place when you leave for a temporary purpose (e.g. go to school in
                        another province)</li></ul><br/>Not an Ordinarily Resident<ul><li>If you have travelled to another place to live and work indefinitely
                        (even though you ultimately intend to return to the prior home)</li></ul><p>A detailed explanation of the
                        <a href='http://www.justice.gc.ca/eng/rp-pr/fl-lf/divorce/rhro_cl/p4.html' target='_blank'>meaning of ordinarily resident</a> can be found on the Department of Justice website.</p>">
            ordinarily resident<i class="fa fa-question-circle" aria-hidden="true"></i></span>) for at least one year immediately before starting the proceeding.
    </p>

    <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseExample" aria-controls="collapseExample">
        <div>
            Can't remember the exact date?
        </div>
    </div>
    <div class="collapse" id="collapseExample">
        <div>
            <p>If you cannot remember the exact date you moved to B.C, select:</p>
            <ul>
                <li>the month you moved to B.C.</li>
                <li>the last day of that month</li>
                <li>year</li>
            </ul>
        </div>
    </div>
</div>


<div id="questions_modal" class="modal in" tabindex="-1" role="dialog" style="display: block">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <i class="fa fa-info" aria-hidden="true"></i>
                <h1 class="modal-title">Your Information</h1>
            </div>
            <div class="modal-body">
                <p>Next up, we have questions about who you are. Later on, we’ll ask the same questions about your spouse. </p>
                <p>Make sure you have a copy of your marriage certificate or registration of marriage. The spelling of your name must match what is on the marriage certificate. </p>
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Continue</a>
            </div>
        </div>
    </div>
</div>
<div class="modal-backgrop in"></div>

{% endblock %}

{% block formBack %}{% prev_step step='claimant' %}{% endblock %}
{% block formNext %}{% next_step step='claimant' %}{% endblock %}

{% block sidebarNav %}
<!-- no sidebar -->
{% endblock %}
{% block sidebar %}
<!-- no sidebar -->
{% endblock %}
