{% extends 'base.html' %}

{% block title %}{{ super }}: Stylesheet{% endblock %}

{% block content %}

<div class="container-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1>Step 1: Your Marriage</h1>
                <h2>Please provide the date and location of your marriage</h2>
                <h3>When were you married?</h3>
                <p>
                    <span class="input-group date date-picker-group">
                        <input type="text" class="date-picker form-control" placeholder="MMM D, YYYY">
                        <span class="input-group-addon" >
                            <i class="fa fa-calendar circle"></i>
                        </span>
                    </span>
                </p>
                <p>
                    <em>Enter exact date as it appears on your <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="auto" data-html="true" data-trigger="click" title="<b>ORIGINAL MARRIAGE CERTIFICATE</b><br />The marriage certi cate you received at the church — or any other place where you were married — isn't acceptable in court. You can get a copy of your marriage certificate or a certified copy of the registration of marriage from Vital Statistics (an office run by the provincial government)."
                        aria-hidden="true"></i> marriage certificate</em>
                </p>
                <div class="btn-radio-group" data-toggle="buttons">
                    <label class="btn btn-radio">
                        <input type="radio" name="options" id="yes" autocomplete="off"> Yes
                    </label>

                    <label class="btn btn-radio btn-radio-long">
                        <input type="radio" name="options" id="no" autocomplete="off"> No, it's impossible to obtain a Marriage Certificate (or registration of marriage)
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1>Your Seperation</h1>
                <h2>Have you been seperated for at least one year?</h2>
                <div class="btn-radio-group" data-toggle="buttons">
                    <label class="btn btn-radio">
                        <input type="radio" name="options" id="yes" autocomplete="off"> Yes
                    </label>

                    <label class="btn btn-radio">
                        <input type="radio" name="options" id="no" autocomplete="off"> No
                    </label>
                </div>

                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseExample" aria-controls="collapseExample">
                    <div>
                        Where do I get a marriage certificate?
                    </div>
                </div>
                <div class="collapse" id="collapseExample">
                    <div>
                        <p>
                            You can get a copy of your marriage certificate Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.
                        </p>
                    </div>
                </div>
                <div class="checkbox">
                    <label> <input type="checkbox"> Spousal Support </label>
                </div>
                <p><em>Payments to support you, not the children.</em></p>
                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseExample2" aria-controls="collapseExample">
                    <div>
                        What if I cannot get a copy of my marriage certificate? And what if this line is very, very long and runs into multiple lines? Then what?
                    </div>
                </div>
                <div class="collapse" id="collapseExample2">
                    <div>
                        <p>
                            You can get a copy of your marriage certificate Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.
                        </p>
                    </div>
                </div>
                <div class="bg-danger">
                    <p>
                        In order to be considered a spouse for the purposes of dividing property or debt you must have lived together in a marriage-like relationship for at least two years.
                    </p>
                    <p>
                        Under the law, the start date of a spousal relationship is the day two individuals begin living together in a marriage-like relationship, or the day they were married, whichever is first. The start date of a spousal relationship determines when rights or responsibilities start under the Family Law Act, particularly respecting property division.
                    </p>
                </div>
                <h1>Step 1: Your Marriage</h1>
                <h2>Please provide the date and location of your marriage</h2>
                <h3>When were you married?</h3>
                <p>
                    <span class="input-group date date-picker-group">
                        <input type="text" class="date-picker form-control" placeholder="MMM D, YYYY">
                        <span class="input-group-addon" >
                            <i class="fa fa-calendar circle"></i>
                        </span>
                    </span>
                </p>
                <p>
                    <em>Enter exact date as it appears on your <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<b>ORIGINAL MARRIAGE CERTIFICATE</b><br />The marriage certi cate you received at the church — or any other place where you were married — isn't acceptable in court. You can get a copy of your marriage certificate or a certified copy of the registration of marriage from Vital Statistics (an office run by the provincial government)."
                        aria-hidden="true"></i> marriage certificate</em>
                </p>
                <h3>Where were you married?</h3>
                <p>Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)</p>
                <label>City</label>
                <input type="text" name="where_were_you_married_city" value="" class="form-block input-wide response-textbox">
                <label>Prov/State</label>
                <input type="text" name="where_were_you_married_prov" value="" class="form-block input-narrow response-textbox">
                <label>Country</label>
                <div class="radio"><label><input type="radio" name="where_were_you_married_country" value="Canada" class="radio-with-other">Canada</label></div>
                <div class="radio"><label><input type="radio" name="where_were_you_married_country" value="USA" class="radio-with-other">USA</label></div>
                <div class="radio"><label><input type="radio" name="where_were_you_married_country" value="Other" id="radio_with_textbox" class="radio-with-other">Other <input type="text" name="where_were_you_married_other_country" value="" class="response-textbox other-textbox input-inline"></label></div>
            </div>
        </div>
    </div>
</div>
<div class="container-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1>Heading 1</h1>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
                <h4>Heading 4</h4>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
                <ul>
                    <li>Nam iaculis tortor nec mollis condimentum.</li>
                    <li>Nam iaculis tortor nec mollis condimentum.</li>
                    <li>Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.</li>
                </ul>
                <h3>Heading 3</h3>
                <p>Phasellus sit amet ex diam. Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt. Donec vulputate quam a metus sodales, eu aliquet lectus
                    iaculis. Nam finibus enim sit amet ex fringilla rhoncus. Maecenas dictum nisi ac mauris faucibus pretium. Nulla varius massa in urna dignissim mattis. In eget cursus est. Nulla facilisi. Donec fringilla urna ac luctus suscipit.</p>
                <ol>
                    <li>Nam iaculis tortor nec mollis condimentum.</li>
                    <li>Nam iaculis tortor nec mollis condimentum.</li>
                    <li>Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.</li>
                </ol>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
            </div>
        </div>
    </div>
</div>
<div class="container-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
                <h4>Heading 4</h4>
            </div>
        </div>
    </div>
</div>
<div class="container-wrapper">
    <div class="container">
        <div class="row">
            <div id="form_navigation" class="col-md-8 col-md-offset-2">
                <form action="{% url 'question_steps' '09_other_questions' %}">
                    <input class="btn-primary" type="submit" value="Back"/>
                </form>
                <form action="#">
                    <input class="btn-primary" type="submit" value="Save"/>
                </form>
                <form action="{% url 'question_steps' '11_review' %}">
                    <input class="btn-primary" type="submit" value="Next"/>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %} {% block sidebarText %}
<p>Phasellus sit amet ex diam. Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt. Donec vulputate quam a metus sodales, eu aliquet lectus iaculis. Nam
    finibus enim sit amet ex fringilla rhoncus. Maecenas dictum nisi ac mauris faucibus pretium. Nulla varius massa in urna dignissim mattis. In eget cursus est. Nulla facilisi. Donec fringilla urna ac luctus suscipit.</p>
{% endblock %}
