{% extends "base_page.html" %}
{% load bootstrap3 %}
{% load compress %}
{% load i18n %}
{% load humanize %}

{% block stylesheets %}
{{ block.super }}
<style>
    a.btn-jumbo {
        color: navy;
        width:320px;
        height:240px;
        border: 1px solid black;
        border-radius: 5px;
        white-space: normal;
        line-height:55px;
        padding:80px 20px;
        margin: 20px;
    }
    a.btn-jumbo > * {
        vertical-align: middle;
        display: inline-block;
        line-height:20px;
    }
    div.btn-jumbo-group {
        text-align: center;
    }
</style>
{% endblock %}

{% block title %}{% trans "How much time do you have?" %}{% endblock %}
{% block description %}
    {% trans "A complete picture is always more helpful but sometimes you don't have the time" %}
{% endblock %}
{% block inner %}
    <div class="btn-jumbo-group">
        <a class="btn btn-block btn-warning" href="{% url 'long-form' %}" role="button">
            <h2>20+ Minutes</h2>
            <p>Full Form (Preferred)</p>
        </a>
        <a class="btn btn-block btn-info" href="{% url 'short-form' %}" role="button">
            <h2>5-10 Minutes</h2>
            <p>Express Form</p>
        </a>
    </div>
{% endblock %}