<div class="row max-width-initial">
    <div class="large-6 columns">
        <div class="prof-box" style="width:100%;">
            <div class="demo-box" style="width:100%; height:auto; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;">
                <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">DETAILS</h5>
                <div class="row">
                    <div class="large-5 columns">
                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Account User Type</strong></p>
                    </div>
                    <div class="large-7 columns">
                        <span style="font-size:13px;">: &nbsp; {{ accountUser.accountUserType.description }}</span>
                    </div>
                    <div class="large-5 columns">
                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>First Name</strong></p>
                    </div>
                    <div class="large-7 columns">
                        <span style="font-size:13px;">: &nbsp; {{ accountUser.firstName }}</span>
                    </div>
                    <div class="large-5 columns">
                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Middle Name</strong></p>
                    </div>
                    <div class="large-7 columns">
                        <span style="font-size:13px;">: &nbsp; {{ accountUser.middleName }}</span>
                    </div>
                    <div class="large-5 columns">
                        <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Last Name</strong></p>
                    </div>
                    <div class="large-7 columns">
                        <span style="font-size:13px;">: &nbsp; {{ accountUser.lastName }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="large-6 columns">
        <div class="prof-box" style="width:100%;">
                {% if accountUser.accountUserType.description == 'Sales Agent' and accountUser.salesAgent %}
                    <div class="demo-box" style="width:100%; height:auto; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;">
                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">CONTACT INFORMATION</h5>
                        <div class="row">
                            {% if(accountUser.salesAgent.address != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Address</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.address }}</p>
                                </div>
                            {% endif %}
                            {% if(accountUser.salesAgent.email != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Email</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.email }}</p>
                                </div>
                            {% endif %}
                            {% if(accountUser.salesAgent.mobileNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Mobile No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.mobileNo }}</p>
                                    {% if(accountUser.salesAgent.mobileNoTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.mobileNoTwo }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.salesAgent.phoneNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Phone No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.phoneNo }}</p>
                                    {% if(accountUser.salesAgent.mobileNoTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.salesAgent.phoneNoTwo }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.salesAgent.address == null and accountUser.salesAgent.email == null and accountUser.salesAgent.phoneNo == null and accountUser.salesAgent.mobileNo == null) %}
                                <div class="large-1 columns"></div>
                                <div class="large-11 columns">No contact information</div>
                            {% endif %}
                        </div>
                    </div>
                {% elseif accountUser.accountUserType.description == 'Account Staff' and accountUser.accountStaff %}
                    <div class="demo-box" style="width:100%; height:auto; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;">
                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">CONTACT INFORMATION</h5>
                        <div class="row">
                            {% if(accountUser.accountStaff.address != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Address</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.address }}</p>
                                </div>
                            {% endif %}
                            {% if(accountUser.accountStaff.email != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Email</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.email }}</p>
                                </div>
                            {% endif %}
                            {% if(accountUser.accountStaff.mobileNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Mobile No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.mobileNo }}</p>
                                    {% if(accountUser.accountStaff.mobileNoTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.mobileNoTwo }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.accountStaff.phoneNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Phone No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.phoneNo }}</p>
                                    {% if(accountUser.accountStaff.mobileNoTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.accountStaff.phoneNoTwo }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.accountStaff.address == null and accountUser.accountStaff.email == null and accountUser.accountStaff.phoneNo == null and accountUser.accountStaff.mobileNo == null) %}
                                <div class="large-1 columns"></div>
                                <div class="large-11 columns">No contact information</div>
                            {% endif %}
                        </div>
                    </div>
                {% elseif accountUser.accountUserType.description == 'Clinician' and accountUser.provider %}
                    <div class="demo-box" style="width:100%; height:auto; border:solid 2px #1eb7f0; padding-bottom:5px; margin-bottom: 15px;">
                        <h5 style="height:25px; font-size:12px; background-color:#2199e8; padding: 5px; color:#fff; font-family:'Arial';">CONTACT INFORMATION</h5>
                        <div class="row">
                            {% if(accountUser.provider.address != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Address</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <span style="font-size:13px;">: &nbsp; {{ accountUser.provider.address }}</span>
                                </div>
                            {% endif %}
                            {% if(accountUser.provider.email != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>Email(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.email }}</p>
                                    {% if(accountUser.provider.emailTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.emailTwo }}</p>
                                    {% endif %}
                                    {% if(accountUser.provider.emailThree != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.emailThree }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.provider.mobileNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>>Mobile No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.mobileNo }}</p>
                                    {% if(accountUser.provider.emailTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.mobileNoTwo }}</p>
                                    {% endif %}
                                    {% if(accountUser.provider.emailThree != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.mobileNoThree }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.provider.phoneNo != null) %}
                                <div class="large-3 columns">
                                    <p style="margin-left: 10px; margin-bottom:0; font-size:13px;"><strong>>Phone No.(s)</strong></p>
                                </div>
                                <div class="large-9 columns">
                                    <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.mobileNo }}</p>
                                    {% if(accountUser.provider.emailTwo != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.phoneNoTwo }}</p>
                                    {% endif %}
                                    {% if(accountUser.provider.emailThree != null) %}
                                        <p style="font-size:13px;">: &nbsp; {{ accountUser.provider.phoneNoThree }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                            {% if(accountUser.provider.address == null and accountUser.provider.email == null and accountUser.provider.phoneNo == null and accountUser.provider.mobileNo == null) %}
                                <div class="large-1 columns"></div>
                                <div class="large-11 columns">No contact information</div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
        </div>
    </div>
</div>