MemberInfo.cshtml

@model Sitecore.Foundation.MembershipXdb.Models.MemberInfoModel

@if (Model.MemberDataIsNull || Model.PersonalInfoIsNull)
{
    <div class="row">
        <div class="col-lg-6">
            <div class="sc-advancedExpander-header data-sc-registered" data-bind="click: toggle">
                <table>
                    <tbody>
                        <tr>
                            <td class="sc-advancedExpander-header-icon-container data-sc-registered" data-bind="css: {'not-empty': imageUrl()!='' }">
                                <img class="sc-advancedExpander-header-icon data-sc-registered" onerror="this.style.display = 'none'" onload="this.style.display = 'inline';" 
                                     alt="" data-bind="attr : {src: imageUrl}" src="" style="display: none;">
                            </td>
                            <td class="sc-advancedExpander-header-title">
                                <span class="sc-advancedExpander-header-title-text data-sc-registered" data-bind="text: header">Member details</span>
                            </td>
                            <td class="sc-advancedExpander-header-actionbar sc-actionbar-collapsed data-sc-registered" data-bind="css: {'sc-actionbar-collapsed': !showActionBar() }">
                                <div class="sc-advancedExpander-header-actionbar-container data-sc-registered" data-bind="visible: showActionBar" style="display: none;"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="row" style="padding: 15px;">
                <div>
                    <span class="memberDetailsLabel"><strong>Membership</strong></span>
                    <span class="memberDetailsValue">THE CONTACT'S MEMBER DATA IS EMPTY</span>
                </div>
            </div>
        </div>
    </div>
}
else
{

    <style>
        .memberDetailsLabel {
            padding-left: 10px;
            width: 190px;
            display: block;
            float: left;
        }

        .memberDetailsValue {
            padding-left: 100px;
            /*display: block;*/
        }
    </style>
    <div class="row">
        <div class="col-lg-6">
            <div class="sc-advancedExpander-header data-sc-registered" data-bind="click: toggle">
                <table>
                    <tbody>
                        <tr>
                            <td class="sc-advancedExpander-header-icon-container data-sc-registered" data-bind="css: {'not-empty': imageUrl()!='' }">
                                <img class="sc-advancedExpander-header-icon data-sc-registered" onerror="this.style.display = 'none'" onload="this.style.display = 'inline';" 
                                     alt="" data-bind="attr : {src: imageUrl}" src="" style="display: none;">
                            </td>
                            <td class="sc-advancedExpander-header-title">
                                <span class="sc-advancedExpander-header-title-text data-sc-registered" data-bind="text: header">Member details</span>
                            </td>
                            <td class="sc-advancedExpander-header-actionbar sc-actionbar-collapsed data-sc-registered" data-bind="css: {'sc-actionbar-collapsed': !showActionBar() }">
                                <div class="sc-advancedExpander-header-actionbar-container data-sc-registered" data-bind="visible: showActionBar" style="display: none;"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="sc-advancedExpander-header-promotedfields" colspan="3"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="sc-advancedExpander-header data-sc-registered" data-bind="click: toggle">
                <table>
                    <tbody>
                        <tr>
                            <td class="sc-advancedExpander-header-icon-container data-sc-registered" data-bind="css: {'not-empty': imageUrl()!='' }">
                                <img class="sc-advancedExpander-header-icon data-sc-registered" onerror="this.style.display = 'none'" onload="this.style.display = 'inline';" 
                                     alt="" data-bind="attr : {src: imageUrl}" src="" style="display: none;">
                            </td>
                            <td class="sc-advancedExpander-header-title">
                                <span class="sc-advancedExpander-header-title-text data-sc-registered" data-bind="text: header">Status</span>
                            </td>
                            <td class="sc-advancedExpander-header-actionbar sc-actionbar-collapsed data-sc-registered" data-bind="css: {'sc-actionbar-collapsed': !showActionBar() }">
                                <div class="sc-advancedExpander-header-actionbar-container data-sc-registered" data-bind="visible: showActionBar" style="display: none;"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="sc-advancedExpander-header-promotedfields" colspan="3"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="row" style="padding: 15px;">
                <div>
                    <span class="memberDetailsLabel"><strong>Location</strong></span>
                    <span class="memberDetailsValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property1:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property1</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property2:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property2</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property3:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property3</span>
                </div>
            </div>
            <div class="row" style="padding: 15px;">
                <div>
                    <span class="memberDetailsLabel"><strong>Membership</strong></span>
                    <span class="memberDetailsValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property4:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property4</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property5:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property5</span>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="row" style="padding: 15px;">
                <div>
                    <span class="memberDetailsLabel"><strong>Status</strong></span>
                    <span class="memberDetailsValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property1:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Status.Property1</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property2:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Status.Property2</span>
                </div>
                <div>
                    <span class="memberDetailsLabel">Property7:</span>
                    <span class="memberDetailsValue">@Model.MemberData.Registration.Property7</span>
                </div>
            </div>
        </div>
    </div>
}