{{#with data}}
<div class="notification-preferences-page bs4--bg-gray-100 bs4--clearfix bs4--pt-2 bs4--d-flex">
    <form id="{{@root/dom/notificationPreferencesForm}}" class="bs4--pa-2 notification-form-container bs4--clearfix bs4--bg-white bs4--w-100">
        <div class="bs4--row">
            <div class="bs4--col-12 {{#if hasSMSOptions}}bs4--col-sm-6{{else}}bs4--col-sm-8{{/if}}">
               <h1 class="headline-3 bs4--font-weight-light">How do you want to hear from us?</h1>
            </div>
            <div class="bs4--d-none bs4--d-sm-block bs4--col-sm-2 bs4--text-center bs4--text-gray-300 pt-20">
                <p class="bs4--my-2"><span class="material-icons bs4--align-middle md-18" aria-hidden="true">mail</span> Email</p>
            </div>
            <div class="bs4--d-none bs4--d-sm-block bs4--col-sm-2 bs4--text-center bs4--text-gray-300 pt-20">
                <p class="bs4--my-2"><span class="material-icons bs4--align-middle md-18" aria-hidden="true">error</span>Push</p>
            </div>
            <!-- {{#if hasSMSOptions}}
            <div class="bs4--d-none bs4--d-sm-block bs4--col-sm-2 bs4--text-center bs4--text-gray-300 pt-20">
                <p class="bs4--my-2"><span class="material-icons bs4--align-middle md-18" aria-hidden="true">sms</span>SMS</p>
            </div>
            {{/if}} -->
        </div>
        {{#if notificationPreferenceItem}}
            {{#with notificationPreferenceItem}}
            <div class="bs4--row">
                <div id="{{@root/dom/divNotificationPreferenceItem}}" class="preferenceItem bs4--col-12"></div>
            </div>
            {{/with}}
        {{/if}}
        <div id="{{@root/dom/divCategoryContainer}}">
        {{#each notificationPreferenceCategory}}
            <div id="{{@root/dom/divNotificationPreferenceCategory}}_{{@index}}"></div>
        {{/each}}
        </div>

        <!-- Opt out Section -->
        <div id="{{@root/dom/divOptOutLabel}}">
            <div class="bs4--row">
                <div class="bs4--col-12 email-heading bs4--text-uppercase pointer ">
                    <p class="bs4--font-weight-bolder bs4--mb-0 bs4--float-left">Opt Out</p>
                    <span id="{{@root/dom/spanOptOutCollapseChevron}}" class="material-icons bs4--float-right text-grey">expand_more</span>
                </div>

            </div>
        </div>
        <div class=" collapse preferenceItem" id="{{@root/dom/divOptOutCollapse}}">
            <div class="bs4--py-3 bg-light-grey clearfix bs4--row">
                <div class="bs4--col-12 {{#if hasSMSOptions}}bs4--col-sm-6{{else}}bs4--col-sm-8{{/if}}">
                    <h4>Opt Out from All Notifications</h4>
                    <p class="bs4--text-gray-300 bs4--mb-0">Turn off all notifications</p>
                </div>
                <div class="bs4--col-12 bs4--col-sm-2 bs4--text-center emailPreference">
                    <div class="bs4--float-left bs4--d-block bs4--d-sm-none">Email</div>
                    <div class="bs4--text-center checkbox-container bs4--d-flex bs4--h-100 bs4--position-relative bs4--w-100 bs4--justify-content-end bs4--justify-content-sm-center bs4--align-items-center">
                        <label for="{{@root/dom/inputEmailOptOutCheckbox}}" class="bs4--d-flex bs4--align-items-center bs4--justify-content-end bs4--justify-content-sm-center " tabindex="0">
                            <input id="{{@root/dom/inputEmailOptOutCheckbox}}" type="checkbox" name="email-checkbox bs4--position-absolute" tabindex="-1"/>
                            <span class="checkmark bs4--position-absolute"></span>
                        </label>
                    </div>
                </div>
                <div class="bs4--col-12 bs4--col-sm-2 bs4--text-center pushPreference">
                    <div class="bs4--float-left bs4--d-block bs4--d-sm-none">Push</div>
                    <div class="bs4--text-center checkbox-container bs4--d-flex bs4--h-100 bs4--position-relative bs4--w-100 bs4--justify-content-end bs4--justify-content-sm-center bs4--align-items-center">
                        <label for="{{@root/dom/inputPushOptOutCheckbox}}" class="bs4--d-flex bs4--align-items-center bs4--justify-content-end bs4--justify-content-sm-center " tabindex="0">
                            <input id="{{@root/dom/inputPushOptOutCheckbox}}" type="checkbox" name="email-checkbox bs4--position-absolute" tabindex="-1"/>
                            <span class="checkmark bs4--position-absolute"></span>
                        </label>
                    </div>
                </div>
                <!-- {{#if hasSMSOptions}}

                <div class="bs4--col-12 bs4--col-sm-2 bs4--text-center smsPreference">
                    <div class="bs4--float-left bs4--d-block bs4--d-sm-none">SMS</div>
                    <div class="bs4--text-center checkbox-container bs4--d-flex bs4--h-100 bs4--position-relative bs4--w-100 bs4--justify-content-end bs4--justify-content-sm-center bs4--align-items-center">
                        <label for="{{@root/dom/inputSMSOptOutCheckbox}}" class="bs4--d-flex bs4--align-items-center bs4--justify-content-end bs4--justify-content-sm-center " tabindex="0">
                            <input id="{{@root/dom/inputSMSOptOutCheckbox}}" type="checkbox" name="email-checkbox bs4--position-absolute" tabindex="-1"/>
                            <span class="checkmark bs4--position-absolute"></span>
                        </label>
                    </div>
                </div>
                {{/if}} -->
            </div>
        </div>

        <div class="bs4--text-center bs4--clearfix notification-preferences-save-container bs4--mt-2" >
            <input id="{{@root/dom/btnSave}}" type="submit" class="btn btn-primary bs4--p-1 paint-first-background" value="Save Changes" />
        </div>
        <div id="{{@root/dom/divSuccess}}" class="bs4--mt-2 bs4--text-center bs4--d-none notification-success-text">
            <p class="bs4--mb-0">Notifications Updated!</p>
        </div>
         {{#if notificationPreferenceItem}}
        <div class="bs4--row bs4--text-center notification-preferences-settings-link">
            <a id="{{@root/dom/aShowAllNotifications}}" href="/notification-preferences">Notification Settings</a>
        </div>
        {{/if}}
    </form>
</div>
{{/with}}