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

{% block title %}{{ block.super }}: Other Orders{% endblock %}

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

{% block content %}


<h1><small>Step {% step_order step="other_orders" %}:</small>Other Orders</h1>

<div class="question-well">
    <h3>Are you asking for a legal name change?</h3>

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

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

    <div class="collapse-trigger collapsed" data-toggle="collapse"
         aria-expanded="false" data-target="#name-change-you"
         aria-controls="name-change-you">
        <div>
            Do I need to ask for a legal name change if I took my spouse's last name?
        </div>
    </div>
    <div class="collapse" id="name-change-you">
        <p>If you took on your spouse’s surname (last name) after marriage
        and now you decide to go back to using your own surname, you can do
        this at any time without a <strong>legal</strong> change of
        name.</p>

        <p>If you took your spouse’s name at marriage and want to return to
        your pre-married name, you don’t need a legal name change.</p>
    </div>

    <div id="name_change_you_fullname" hidden>
        <h3>Please enter the full <strong>new</strong> name</h3>
        {% input_field type="text" name="name_change_you_fullname" class="form-block input-wide response-textbox" %}
    </div>

</div>

<div class="question-well">
    <h3>Is your spouse asking for a legal name change?</h3>

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

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

    <div class="collapse-trigger collapsed" data-toggle="collapse"
         aria-expanded="false" data-target="#name-change-spouse"
         aria-controls="name-change-spouse">
        <div>
            Does my spouse need to ask for a legal name change if they took my last name?
        </div>
    </div>
    <div class="collapse" id="name-change-spouse">
        <p>If your spouse took on your surname (last name) after marriage and now
        they decide to go back to using their own surname, they can do this at
        any time without a <strong>legal</strong> change of name.</p>

        <p>If your spouse took your name at marriage and wants to return to
        their pre-married name, they don’t need a legal name change.</p>
    </div>

    <div id="name_change_spouse_fullname" hidden>
        <h3>Please enter the full <strong>new</strong> name</h3>
        {% input_field type="text" name="name_change_spouse_fullname" class="form-block input-wide response-textbox" %}
    </div>

</div>

<div class="question-well">
    <h3>Please enter the details for other orders that you are asking for.</h3>
    {% input_field type="textarea" name="other_orders_detail" rows="8" cols="65" class="response-textarea" %}

    <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-gavel" aria-hidden="true"></i>
                    <h1 class="modal-title">Other Orders</h1>
                </div>
                <div class="modal-body">
                    <p>This section will allow you to provide the details for any other orders you are seeking.</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>
<div class="modal-backgrop in"></div>
{% endblock %}

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

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