IAA Template

<link rel="stylesheet" href="/vendors/font-awesome/css/font-awesome.min.css" />
<style>
body {
    padding:15px;
}
.header {
    background-color:#252525;
    color:#FFF;
    padding:20px 30px;
    height:50px;
}
table {
    width:100%;
    border:1px solid #252525;
    border-collapse: collapse;
}
h1, h2, h3 {
    margin:0px;
    padding:0px;
}
.text-header {
    border-left:1px solid #fff;
    padding-left:5px;
    float:right;
    text-align:right;
    width:65%;
    font-size:9pt;
    height:50px;
}
input {
    border:none;
    padding:5px;
    text-align:left;
    color:#242424;
    display:block;
    width:100%;
}
td{
    border:1px solid #333;
    border-top:0px;
    padding:3px;
}
label {
    display:block;
    font-size:8pt;
    color:#444;
}
.generated-content {
    padding:10px;
}
ul {
    list-style: none;
    margin-left:0px;
    padding:0px;
}
</style>

<div class="header">
    <div class="text-header">
        <h1>Initial Assessment Application Form</h1>
        <h3>CareerSource South Florida</h3>
    </div>
</div>
<table>
    <tr>
        <td>
            <label>DATE</label>
            <input type="text" value="{{ "now" | date("m/d/Y") }}" />
        </td>

        <td style="width:55%">
            <label>LAST FOUR DIGITS OF SSN</label>
            <input type="text" value="***-**-{{ user.ssn | slice(5, 8) }}" />
        </td>
    </tr>
    <tr>

        <td colspan="2">
            <label>NAME</label>
            <input type="text" value="{{ user.firstname }} {{ user.lastname }}" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <label>ADDRESS</label>
            <input type="text" value="{{ user.address_1 }}" />
        </td>
    </tr>

    <tr>
        <td>
            <label>PHONE</label>
            <input type="text" value="{{ user.phone }}" />
        </td>

        <td>
            <label>DATE OF BIRTH</label>
            <input type="text" value="{{ user.dob | date("m/d/Y") }}" />
        </td>
    </tr>

    {% for question in questions %}
        <tr>
            {% if question.type == "text" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    <input type="text" value="{{ question.answer }}" />
                </td>
            {% elseif question.type == "checkbox" %}
                <td colspan="2" class="generated-content" valign="top">
                    {% if question.answer == "true" %}
                        <i class="fa fa-square"></i>
                    {% else %}
                        <i class="fa fa-square-o"></i>
                    {% endif %}
                    {{ question.label }}
                </td>
            {% elseif question.type == "radio" %}
                <td colspan="2" class="generated-content" valign="top">
                    <i class="fa fa-circle-o"></i>
                </td>
            {% elseif question.type == "checkboxgroup" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    <ul>
                        {% for key, value in question.options %}
                            <li>
                                {% if question.answer[value.value] =="true" %}
                                    <i class="fa fa-square"></i>
                                {% else %}
                                    <i class="fa fa-square-o"></i>
                                {% endif %}

                                <span>{{ value.name }}</span>
                            </li>
                        {% endfor %}
                    </ul>

                </td>
            {% elseif question.type == "radiogroup" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    <ul>
                        {% for key, value in question.options %}
                            <li>
                                {% if value.value == question.answer %}
                                    <i class="fa fa-circle"></i>
                                {% else %}
                                    <i class="fa fa-circle-o"></i>
                                {% endif %}

                                <span>{{ value.name }}</span>
                            </li>
                        {% endfor %}
                    </ul>
                </td>
            {% elseif question.type == "select" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    {% for key, value in question.options %}
                        {% if value.value == question.answer %}
                            <input type="text" value="{{ value.name }}" />
                        {% endif %}
                    {% endfor %}
                </td>
            {% elseif question.type == "date" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    <input type="text" value="{{question.answer | date("m/d/Y")}}" />
                </td>
            {% elseif question.type == "text" %}
                <td colspan="2" class="generated-content" valign="top">
                    <label>{{ question.label }}</label>
                    <input type="text" value="{{question.answer}}" />
                </td>
            {% endif %}
        </tr>
    {% endfor %}
</table>